From c9f379adab864132e6cf044f808a43254601e4bb Mon Sep 17 00:00:00 2001 From: geireann Date: Fri, 30 Jul 2021 13:26:25 -0400 Subject: major UI / updates + refactoring --- deploy/assets/favicon.png | Bin 0 -> 22180 bytes deploy/index.html | 114 +++++----------------------------------------- deploy/loader.css | 85 ++++++++++++++++++++++++++++++++++ deploy/loader.js | 14 ++++++ 4 files changed, 110 insertions(+), 103 deletions(-) create mode 100644 deploy/assets/favicon.png create mode 100644 deploy/loader.css create mode 100644 deploy/loader.js (limited to 'deploy') diff --git a/deploy/assets/favicon.png b/deploy/assets/favicon.png new file mode 100644 index 000000000..59595b910 Binary files /dev/null and b/deploy/assets/favicon.png differ diff --git a/deploy/index.html b/deploy/index.html index dda0c6457..d96215391 100644 --- a/deploy/index.html +++ b/deploy/index.html @@ -1,114 +1,22 @@ - Dash Web - - + Dash + + + + - - - + + -
+
dashmesg("10%", "Loading Dash..."), load / 10); setTimeout(() => dashmesg("33%", "Preparing dashboards..."), load / 3); diff --git a/deploy/loader.css b/deploy/loader.css new file mode 100644 index 000000000..4be0cc98c --- /dev/null +++ b/deploy/loader.css @@ -0,0 +1,85 @@ +.dash-loader { + display: flex; + align-content: center; + justify-content: center; + background-color: #BDDDF5; + transition: 3s; + z-index: 10; + z-index:10; + width:100%; + height:100%; +} + +.dash-loader-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + align-content: center; +} + +.dash-progress-bar { + width: 200px; + height: 5px; + align-self: center; + margin-top: 20px; + background-color: #ececec; + border-radius: 5px; + overflow: hidden; +} + +.dash-progress { + width: 0%; + height: 20px; + background-color: #4476F7; + transition: 0.1s; +} + +.dash-animation-container { + width: 10vw; + height: 10vw; + display: flex; + align-items: center; + justify-content: center; + border-radius: 100%; + background-color: #4476F7; + justify-self: center; +} + +.dash-loader-text { + font-size: 15px; + font-family: "Roboto"; + font-weight: bold; + text-align: center; + color: #4476F7; + user-select: none; + -webkit-user-select: none; +} + +.dash-d-path { + stroke-dasharray: 1000; + stroke-dashoffset: 1000; + animation: dash-d-path 3s linear infinite; +} + +@keyframes dash-d-path { + 0% { + stroke-dashoffset: 1000; + } + + 20% { + stroke-dashoffset: 0; + } + + 70% { + stroke-dashoffset: 0; + } + + 90% { + stroke-dashoffset: 1000; + } + + 100% { + stroke-dashoffset: 1000; + } +} \ No newline at end of file diff --git a/deploy/loader.js b/deploy/loader.js new file mode 100644 index 000000000..0be421e14 --- /dev/null +++ b/deploy/loader.js @@ -0,0 +1,14 @@ +function getCookie(cname) { + var name = cname + "="; + var ca = document.cookie.split(';'); + for (var i = 0; i < ca.length; i++) { + var c = ca[i]; + while (c.charAt(0) == ' ') { + c = c.substring(1); + } + if (c.indexOf(name) == 0) { + return Number(c.substring(name.length, c.length)); + } + } + return 3000; +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 41ccf50f2b551edd6827c9fd6296b9ff87a65915 Mon Sep 17 00:00:00 2001 From: geireann Date: Sat, 31 Jul 2021 15:32:37 -0400 Subject: linking updates and tab updates --- deploy/index.html | 105 +++++++++++++++++++++++- src/client/views/DocumentButtonBar.scss | 11 ++- src/client/views/DocumentDecorations.scss | 4 +- src/client/views/collections/TabDocView.tsx | 7 +- src/client/views/nodes/DocumentLinksButton.scss | 15 +++- src/client/views/nodes/DocumentLinksButton.tsx | 83 ++++++++++--------- src/client/views/nodes/DocumentView.scss | 2 +- src/client/views/topbar/TopBar.scss | 10 ++- src/client/views/topbar/TopBar.tsx | 2 +- 9 files changed, 182 insertions(+), 57 deletions(-) (limited to 'deploy') diff --git a/deploy/index.html b/deploy/index.html index d96215391..c32aff638 100644 --- a/deploy/index.html +++ b/deploy/index.html @@ -11,8 +11,109 @@ - - + + diff --git a/src/client/views/DocumentButtonBar.scss b/src/client/views/DocumentButtonBar.scss index 621c2bf1b..157f3a4f2 100644 --- a/src/client/views/DocumentButtonBar.scss +++ b/src/client/views/DocumentButtonBar.scss @@ -50,10 +50,13 @@ $linkGap : 3px; } .documentButtonBar-button { - pointer-events: auto; - padding-right: 5px; - width: 25px; - height: 25px; + cursor: pointer; + display: flex; + width: 30px; + height: 30px; + align-content: center; + justify-content: center; + align-items: center; } .documentButtonBar-linker { diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index 1715f35e7..952d8d150 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -263,7 +263,6 @@ $linkGap : 3px; } .link-button-container { - padding: $linkGap; border-radius: 10px; width: max-content; height: auto; @@ -271,6 +270,9 @@ $linkGap : 3px; flex-direction: row; z-index: 998; position: absolute; + justify-content: center; + align-items: center; + gap: 5px; background: $medium-gray; } diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index d82810652..a24f1eb7a 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -169,7 +169,12 @@ export class TabDocView extends React.Component { })); //attach the selection doc buttons menu to the drag handle - const stack = tab.contentItem.parent; + const stack: HTMLDivElement = tab.contentItem.parent; + const header: HTMLDivElement = tab; + console.log("Stack: " + stack.id, stack.className) + stack.onscroll = action((e: any) => { + console.log('scrolling...') + }) const moreInfoDrag = document.createElement("div"); moreInfoDrag.className = "lm_iconWrap"; tab._disposers.buttonDisposer = reaction(() => this.view, view => diff --git a/src/client/views/nodes/DocumentLinksButton.scss b/src/client/views/nodes/DocumentLinksButton.scss index 3809319d7..9bab72d55 100644 --- a/src/client/views/nodes/DocumentLinksButton.scss +++ b/src/client/views/nodes/DocumentLinksButton.scss @@ -1,6 +1,16 @@ @import "../global/globalCssVariables.scss"; +.documentLinksButton-menu { + width: 100%; + height: 100%; + position: relative; + display: flex; + align-content: center; + justify-content: center; + align-items: center; +} + .documentLinksButton-cont { min-width: 20; min-height: 20; @@ -10,8 +20,8 @@ .documentLinksButton, .documentLinksButton-endLink, .documentLinksButton-startLink { - height: 20px; - width: 20px; + height: 25px; + width: 25px; position: absolute; border-radius: 50%; opacity: 0.9; @@ -38,7 +48,6 @@ font-weight: bold; &:hover { - background: $medium-gray; transform: scale(1.05); cursor: pointer; } diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index ed0e2d1ad..cec06d2d4 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -252,49 +252,50 @@ export class DocumentLinksButton extends React.Component; - return
-
- {this.props.InMenu ? - this.props.StartLink ? - - : link - : Array.from(this.filteredLinks).length} -
- {this.props.InMenu && !this.props.StartLink && DocumentLinksButton.StartLink !== this.props.View.props.Document ? //if the origin node is not this node -
+
DocumentLinksButton.StartLink && DocumentLinksButton.finishLinkClick(e.clientX, e.clientY, DocumentLinksButton.StartLink, this.props.View.props.Document, true, this.props.View)}> - {this.props.StartLink ? - - : link} -
- : (null) - } - {DocumentLinksButton.StartLink === this.props.View.props.Document && this.props.InMenu && this.props.StartLink ? //if link has been started from current node, then set behavior of link button to deactivate linking when clicked again -
- {this.props.StartLink ? - - : link} + backgroundColor: Colors.LIGHT_BLUE, + color: Colors.BLACK, + width: btnDim, + height: btnDim, + }}> + {Array.from(this.filteredLinks).length}
- : (null) - } -
; +
+ : +
+ {this.props.InMenu && !this.props.StartLink && DocumentLinksButton.StartLink !== this.props.View.props.Document ? //if the origin node is not this node +
DocumentLinksButton.StartLink && DocumentLinksButton.finishLinkClick(e.clientX, e.clientY, DocumentLinksButton.StartLink, this.props.View.props.Document, true, this.props.View)}> + {this.props.StartLink ? + + : link} +
+ : (null) + } + { + this.props.InMenu ? //if link has been started from current node, then set behavior of link button to deactivate linking when clicked again +
+ {this.props.StartLink ? + + : link} +
+ : (null)} +
+ ) } render() { diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss index 281f25fb3..7f164ca48 100644 --- a/src/client/views/nodes/DocumentView.scss +++ b/src/client/views/nodes/DocumentView.scss @@ -147,7 +147,7 @@ .documentView-titleWrapper, .documentView-titleWrapper-hover { overflow: hidden; - color: gray; + color: $black; transform-origin: top left; top: 0; width: 100%; diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss index adb968948..ebdf030e7 100644 --- a/src/client/views/topbar/TopBar.scss +++ b/src/client/views/topbar/TopBar.scss @@ -58,8 +58,8 @@ .topbar-dashSelect { border: none; - background-color: transparent; - color: black; + background-color: $dark-gray; + color: $white; font-family: 'Roboto'; font-size: 17; font-weight: 500; @@ -78,6 +78,7 @@ display: flex; justify-content: flex-end; gap: 5px; + margin-right: 5px; } .topbar-left { @@ -89,6 +90,10 @@ width: 450; gap: 5px; + .topBar-icon:hover { + background-color: $logout-red; + } + .topbar-lozenge-user, .topbar-lozenge { height: 23; @@ -99,7 +104,6 @@ padding: 4px; align-self: center; margin-left: 7px; - margin-right: 7px; display: flex; align-items: center; diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx index 6e4d4fe15..bd9935333 100644 --- a/src/client/views/topbar/TopBar.tsx +++ b/src/client/views/topbar/TopBar.tsx @@ -29,7 +29,7 @@ export class TopBar extends React.Component { {`${Doc.CurrentUserEmail}`}
window.location.assign(Utils.prepend("/logout"))}> - {"Logoff"} + {"Sign out"}
-- cgit v1.2.3-70-g09d2