From 409b43eb87e88191a016a0163b7f61130025127e Mon Sep 17 00:00:00 2001 From: Alex P Date: Fri, 28 Apr 2017 15:32:22 -0700 Subject: [PATCH 1/8] Make page headers mo betta No reason they need to be the equal parts --- ui/src/style/layout/page-header.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/style/layout/page-header.scss b/ui/src/style/layout/page-header.scss index 5da4446964..0013d3532e 100644 --- a/ui/src/style/layout/page-header.scss +++ b/ui/src/style/layout/page-header.scss @@ -31,7 +31,7 @@ $page-header-weight: 400 !important; } .page-header__left, .page-header__right { - flex: 1 0 0; + flex: 0 0 1; display: flex; align-items: center; From 437bbae5cde5a28aa1c911bf3240856addc9c103 Mon Sep 17 00:00:00 2001 From: Alex P Date: Fri, 28 Apr 2017 15:32:39 -0700 Subject: [PATCH 2/8] Make round scrollbars completely round --- ui/src/style/modules/mixins.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/ui/src/style/modules/mixins.scss b/ui/src/style/modules/mixins.scss index 5bc20a2681..e9ce2e8df3 100644 --- a/ui/src/style/modules/mixins.scss +++ b/ui/src/style/modules/mixins.scss @@ -70,7 +70,9 @@ $scrollbar-offset: 3px; &::-webkit-scrollbar { width: $scrollbar-width; border-top-right-radius: $radius; + border-top-left-radius: $radius; border-bottom-right-radius: $radius; + border-bottom-left-radius: $radius; &-button { background-color: $trackColor; From 476d7da937ba2bc9c4379f936f7f8ac24a57113b Mon Sep 17 00:00:00 2001 From: Alex P Date: Fri, 28 Apr 2017 15:33:05 -0700 Subject: [PATCH 3/8] Add Icon to Manage Button --- ui/src/dashboards/components/Dashboard.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ui/src/dashboards/components/Dashboard.js b/ui/src/dashboards/components/Dashboard.js index 57ad6e05d4..cbdf2c03f7 100644 --- a/ui/src/dashboards/components/Dashboard.js +++ b/ui/src/dashboards/components/Dashboard.js @@ -77,7 +77,8 @@ const Dashboard = ({ className="btn btn-primary btn-sm" onClick={onOpenTemplateManager} > - Manage + + Manage From 81f14c81c60e5b18a1c81c2873d80c785c144af7 Mon Sep 17 00:00:00 2001 From: Alex P Date: Fri, 28 Apr 2017 15:33:25 -0700 Subject: [PATCH 4/8] Move template control styles into their own sheet --- .../components/template-control-bar.scss | 77 +++++++++++++++++++ ui/src/style/pages/dashboards.scss | 25 ++---- 2 files changed, 83 insertions(+), 19 deletions(-) create mode 100644 ui/src/style/components/template-control-bar.scss diff --git a/ui/src/style/components/template-control-bar.scss b/ui/src/style/components/template-control-bar.scss new file mode 100644 index 0000000000..3286005514 --- /dev/null +++ b/ui/src/style/components/template-control-bar.scss @@ -0,0 +1,77 @@ +/* + Template Control Bar + ------------------------------------------------------ + Used within a dashboard to control values for + template variables +*/ + +.template-control-bar { + height: 50px; + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 4px; + padding: 0 14px; + @extend .cell-shell; +} +.template-control--heading { + font-size: 16px; + font-weight: 500; + color: $g13-mist; + margin: 0 8px 0 0; + @include no-user-select(); + white-space: nowrap; +} + +.template-control--dropdown { + flex: 0 1 auto; + min-width: 160px; + display: flex; + align-items: center; + flex-wrap: nowrap; + margin: 0 0 0 8px; + + .dropdown { + order: 2; + margin: 0; + flex: 1 0 0; + } + + .dropdown-toggle { + border-radius: 0 $radius-small $radius-small 0; + width: 100%; + } + .dropdown.open > div.btn.dropdown-toggle { + @include gradient-h($c-comet,$c-pool); + } + .dropdown-menu { + @include gradient-h($c-amethyst,$c-ocean); + @include custom-scrollbar-round($c-ocean,$c-laser); + + > li > a { + &, &:active {background-color: transparent !important;} + } + > li { + &:hover {@include gradient-h($c-star,$c-ocean);} + } + } +} +.template-control--label { + order: 1; + height: 30px; + padding: 0 9px; + margin: 0; + font-size: 12px; + font-family: $code-font; + color: $c-potassium; + line-height: 30px; + border-radius: $radius-small 0 0 $radius-small; + background-color: $g5-pepper; + // transition: + // background-color 0.25s ease, + // color 0.25s ease; +} +.dropdown.open + .template-control--label { + @include gradient-h($c-star,$c-comet); + color: $g20-white; +} \ No newline at end of file diff --git a/ui/src/style/pages/dashboards.scss b/ui/src/style/pages/dashboards.scss index 964a03fde6..71dd3f0543 100644 --- a/ui/src/style/pages/dashboards.scss +++ b/ui/src/style/pages/dashboards.scss @@ -41,25 +41,6 @@ $dash-graph-options-arrow: 8px; } .dashboard { - .template-control-bar { - height: 50px; - font-size: 18px; - font-weight: 400; - color: $g14-chromium; - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 4px; - padding: 10px 15px; - @extend .cell-shell; - .dropdown { - flex: 0 1 auto; - min-width: 100px; - } - .dropdown-toggle { - width: 100%; - } - } .react-grid-item { @extend .cell-shell; } @@ -376,6 +357,12 @@ $dash-graph-options-arrow: 8px; } } +/* + Template Control Bar + ------------------------------------------------------ +*/ +@import '../components/template-control-bar'; + /* Overylay Technology (Cell Edit Mode) ------------------------------------------------------ From b932193a09c958fcb38bee49a5ea831853a1f2ac Mon Sep 17 00:00:00 2001 From: Alex P Date: Fri, 28 Apr 2017 15:33:41 -0700 Subject: [PATCH 5/8] Apply the styles, update the markup --- ui/src/dashboards/components/Dashboard.js | 26 +++++++++++++---------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/ui/src/dashboards/components/Dashboard.js b/ui/src/dashboards/components/Dashboard.js index cbdf2c03f7..f3eeed294b 100644 --- a/ui/src/dashboards/components/Dashboard.js +++ b/ui/src/dashboards/components/Dashboard.js @@ -52,10 +52,8 @@ const Dashboard = ({ >
- Template Variables -
-
- {templates.map(({id, values}) => { +

Template Variables

+ {templates.map(({id, values, tempVar}) => { const items = values.map(value => ({...value, text: value.value})) const selectedItem = items.find(item => item.selected) || items[0] const selectedText = selectedItem && selectedItem.text @@ -64,15 +62,21 @@ const Dashboard = ({ // the full array, and [item] to all `selected` values when we update // this component to support multiple values return ( - - onSelectTemplate(id, [item].map(x => omit(x, 'text')))} - /> +
+ + onSelectTemplate(id, [item].map(x => omit(x, 'text')))} + /> + +
) })} +
+
+ {templates.map(({id, values, tempVar}) => { + const items = values.map(value => ({...value, text: value.value})) + const selectedItem = items.find(item => item.selected) || items[0] + const selectedText = selectedItem && selectedItem.text - // TODO: change Dropdown to a MultiSelectDropdown, `selected` to - // the full array, and [item] to all `selected` values when we update - // this component to support multiple values - return ( -
- - onSelectTemplate(id, [item].map(x => omit(x, 'text')))} - /> - -
- ) - })} -
-
- -
+ // TODO: change Dropdown to a MultiSelectDropdown, `selected` to + // the full array, and [item] to all `selected` values when we update + // this component to support multiple values + return ( +
+ + onSelectTemplate(id, [item].map(x => omit(x, 'text')))} + /> + +
+ ) + })}
{cells.length ? div.btn.dropdown-toggle { - @include gradient-h($c-comet,$c-pool); + font-size: 12px; + font-family: $code-font; } .dropdown-menu { - @include gradient-h($c-amethyst,$c-ocean); - @include custom-scrollbar-round($c-ocean,$c-laser); + @include gradient-h($c-star,$c-pool); + @include custom-scrollbar-round($c-pool,$c-laser); > li > a { &, &:active {background-color: transparent !important;} + font-size: 12px; + font-family: $code-font; } > li { - &:hover {@include gradient-h($c-star,$c-ocean);} + &:hover {@include gradient-h($c-comet,$c-pool);} } } -} +} .template-control--label { + @include no-user-select(); order: 1; - height: 30px; - padding: 0 9px; + height: 18px; + padding: 0 8px; margin: 0; - font-size: 12px; + font-size: 11px; font-family: $code-font; color: $c-potassium; - line-height: 30px; - border-radius: $radius-small 0 0 $radius-small; - background-color: $g5-pepper; - // transition: - // background-color 0.25s ease, - // color 0.25s ease; -} -.dropdown.open + .template-control--label { - @include gradient-h($c-star,$c-comet); - color: $g20-white; + line-height: 18px; + border-radius: $radius-small $radius-small 0 0; + background-color: $g4-onyx; } \ No newline at end of file From f9980fc84d6b3fb5741a3a7a63c036430c536515 Mon Sep 17 00:00:00 2001 From: Alex P Date: Fri, 28 Apr 2017 16:41:35 -0700 Subject: [PATCH 8/8] SHIP IT AGAIN --- ui/src/dashboards/components/Dashboard.js | 14 +++++++------- ui/src/style/components/template-control-bar.scss | 11 +++++++---- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/ui/src/dashboards/components/Dashboard.js b/ui/src/dashboards/components/Dashboard.js index e40a850a46..206b50b311 100644 --- a/ui/src/dashboards/components/Dashboard.js +++ b/ui/src/dashboards/components/Dashboard.js @@ -52,13 +52,6 @@ const Dashboard = ({ >

Template Variables

- {templates.map(({id, values, tempVar}) => { const items = values.map(value => ({...value, text: value.value})) const selectedItem = items.find(item => item.selected) || items[0] @@ -82,6 +75,13 @@ const Dashboard = ({
) })} + {cells.length ?