From 769d335e1aedf163fa4ae079b0c525ff3301cf19 Mon Sep 17 00:00:00 2001 From: Joshua Rule Dobson Date: Wed, 14 Sep 2016 10:18:05 -0400 Subject: [PATCH 1/6] initial widget sizing classes --- ui/dashboard/widgets/widget.reel/_widget.css | 12 +++++++++++ ui/dashboard/widgets/widget.reel/widget.css | 2 +- ui/dashboard/widgets/widget.reel/widget.html | 22 ++++++++++++++++++-- ui/dashboard/widgets/widget.reel/widget.js | 16 ++++++++++++++ 4 files changed, 49 insertions(+), 3 deletions(-) diff --git a/ui/dashboard/widgets/widget.reel/_widget.css b/ui/dashboard/widgets/widget.reel/_widget.css index 12e93a2d95..7b12d32bb5 100644 --- a/ui/dashboard/widgets/widget.reel/_widget.css +++ b/ui/dashboard/widgets/widget.reel/_widget.css @@ -19,6 +19,18 @@ @nest .drawer-is-open &:hover { box-shadow: 0px 0px 2px 2px rgba(43,156,216,1); } + + &.small { + background: green; + } + + &.medium { + background: orange; + } + + &.large { + background: purple; + } } .Widget-header { diff --git a/ui/dashboard/widgets/widget.reel/widget.css b/ui/dashboard/widgets/widget.reel/widget.css index 11fa6de2c4..26a79363aa 100644 --- a/ui/dashboard/widgets/widget.reel/widget.css +++ b/ui/dashboard/widgets/widget.reel/widget.css @@ -1 +1 @@ -.Widget{display:-webkit-box;display:-ms-flexbox;display:flex;height:15em;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background:#16171a;border-radius:4px;overflow:hidden;box-shadow:0 0 2px 2px rgba(43,156,216,0);-webkit-transition:box-shadow .25s ease-in-out;transition:box-shadow .25s ease-in-out}.Widget>*{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.drawer-is-open .Widget:hover{box-shadow:0 0 2px 2px #2b9cd8}.Widget-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:8px;padding:.5rem;line-height:1em;height:2.5em;background-color:#404040;color:#e0e5e5}.Widget-header svg{width:1.4em;height:1.4em;margin-right:.5em;color:inherit}.flip .Widget-header{background-color:#0c5688}.Widget-content{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;overflow:hidden;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.Widget-content:before{content:'';position:absolute;visibility:hidden;opacity:0;top:0;left:0;right:0;bottom:0;border-radius:4px;background:rgba(0,0,0,.75);-webkit-transition:visibility .35s ease-in-out,opacity .35s ease-in-out;transition:visibility .35s ease-in-out,opacity .35s ease-in-out;z-index:2}.drawer-is-open .has-settings .Widget-content:before{visibility:visible;opacity:1}.drawer-is-open .flip .Widget-content:before{visibility:hidden;opacity:0}.Widget-content-front{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.Widget-content-front .Scrollview-transform{-webkit-box-flex:0;-ms-flex:none;flex:none;display:block}.Widget-footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.Widget-back,.Widget-flipper,.Widget-front{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.Widget-back,.Widget-flipper,.Widget-front,.Widget.flip .Widget-back,.Widget .Widget-front{display:-webkit-box;display:-ms-flexbox;display:flex}.Widget.flip .Widget-front,.Widget .Widget-back{display:none}.Widget-back{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.Widget-back .Widget-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:1em;width:100%;max-width:25em}.Widget-back .Widget-settings{-webkit-box-flex:1;-ms-flex:1;flex:1}.Widget-back .Widget-header{width:100%}.Widget-back .Widget-footer *{margin-left:.5em}.Widget-info{position:absolute;z-index:10;left:1em;bottom:1em;visibility:hidden;opacity:0;-webkit-transition:visibility .35s ease-in-out,opacity .35s ease-in-out;transition:visibility .35s ease-in-out,opacity .35s ease-in-out}.drawer-is-open .has-settings .Widget-info{visibility:visible;opacity:1} \ No newline at end of file +.Widget{display:-webkit-box;display:-ms-flexbox;display:flex;height:15em;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background:#16171a;border-radius:4px;overflow:hidden;box-shadow:0 0 2px 2px rgba(43,156,216,0);-webkit-transition:box-shadow .25s ease-in-out;transition:box-shadow .25s ease-in-out}.Widget>*{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.drawer-is-open .Widget:hover{box-shadow:0 0 2px 2px #2b9cd8}.Widget.small{background:green}.Widget.medium{background:orange}.Widget.large{background:purple}.Widget-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:8px;padding:.5rem;line-height:1em;height:2.5em;background:#404040;color:#e0e5e5}.Widget-header svg{width:1.4em;height:1.4em;margin-right:.5em;color:inherit}.Widget-content{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;overflow:hidden;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.Widget-content:before{content:'';position:absolute;visibility:hidden;opacity:0;top:0;left:0;right:0;bottom:0;border-radius:4px;background:rgba(0,0,0,.75);-webkit-transition:visibility .35s ease-in-out,opacity .35s ease-in-out;transition:visibility .35s ease-in-out,opacity .35s ease-in-out;z-index:2}.drawer-is-open .has-settings .Widget-content:before{visibility:visible;opacity:1}.drawer-is-open .flip .Widget-content:before{visibility:hidden;opacity:0}.Widget-content-front{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.Widget-content-front .Scrollview-transform{-webkit-box-flex:0;-ms-flex:none;flex:none;display:block}.Widget-footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.Widget-back,.Widget-flipper,.Widget-front{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.Widget-back,.Widget-flipper,.Widget-front,.Widget.flip .Widget-back,.Widget .Widget-front{display:-webkit-box;display:-ms-flexbox;display:flex}.Widget.flip .Widget-front,.Widget .Widget-back{display:none}.Widget-back{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center}.Widget-back .Widget-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:1em;width:100%;max-width:25em}.Widget-back .Widget-settings{-webkit-box-flex:1;-ms-flex:1;flex:1}.Widget-back .Widget-header{width:100%}.Widget-back .Widget-footer *{margin-left:.5em}.Widget-info{position:absolute;z-index:10;left:1em;bottom:1em;visibility:hidden;opacity:0;-webkit-transition:visibility .35s ease-in-out,opacity .35s ease-in-out;transition:visibility .35s ease-in-out,opacity .35s ease-in-out}.drawer-is-open .has-settings .Widget-info{visibility:visible;opacity:1} \ No newline at end of file diff --git a/ui/dashboard/widgets/widget.reel/widget.html b/ui/dashboard/widgets/widget.reel/widget.html index 79a2dfb9b1..cea08cb545 100644 --- a/ui/dashboard/widgets/widget.reel/widget.html +++ b/ui/dashboard/widgets/widget.reel/widget.html @@ -6,11 +6,17 @@ { "owner": { "properties": { - "element": {"#": "owner"} + "element": {"#": "owner"}, + "sizeOptions": [ + {"value": "small"}, + {"value": "medium"}, + {"value": "large"} + ] }, "bindings": { "classList.has('flip')": {"<-": "this.isFlipped"}, - "classList.has('has-settings')": {"<-": "@owner.hasSettings"} + "classList.has('has-settings')": {"<-": "@owner.hasSettings"}, + "size": {"<-": "@sizeSelector.selectedValue"} } }, @@ -46,6 +52,17 @@ "bindings": { "value": {"<-": "@owner.settingsLabel.defined() ? @owner.settingsLabel : 'Settings'"} } + }, + + "sizeSelector": { + "prototype": "blue-shark/ui/select.reel", + "properties": { + "element": {"#": "sizeSelector"}, + "selectedValue": "medium" + }, + "bindings": { + "options": {"<-": "@owner.sizeOptions.map{value}"} + } } } @@ -59,6 +76,7 @@
+
diff --git a/ui/dashboard/widgets/widget.reel/widget.js b/ui/dashboard/widgets/widget.reel/widget.js index 3c7a2717c2..5c97df7cdf 100644 --- a/ui/dashboard/widgets/widget.reel/widget.js +++ b/ui/dashboard/widgets/widget.reel/widget.js @@ -5,6 +5,22 @@ var Component = require("montage/ui/component").Component; * @extends Component */ exports.Widget = Component.specialize({ + _size: { + value: null + }, + + size: { + get: function () { + return this._size; + }, + set: function (option) { + if(this._size !== option) { + this.classList.remove("is-" + this._size); + this.classList.add("is-" + option); + this._size = option; + } + } + }, isFlipped: { value: false From 9ed887c77a06610c4684987b390b67e803e483c9 Mon Sep 17 00:00:00 2001 From: Joshua Rule Dobson Date: Tue, 20 Sep 2016 09:24:16 -0400 Subject: [PATCH 2/6] wip widget size classes --- .../widget-wrapper.reel/_widget-wrapper.css | 37 ++++++++++++++----- .../widget-wrapper.reel/widget-wrapper.css | 2 +- .../widget-wrapper.reel/widget-wrapper.html | 19 +++++++++- .../widget-wrapper.reel/widget-wrapper.js | 25 +++++++++++++ ui/dashboard/widgets/widget.reel/_widget.css | 14 ------- ui/dashboard/widgets/widget.reel/widget.css | 2 +- ui/dashboard/widgets/widget.reel/widget.html | 22 +---------- ui/dashboard/widgets/widget.reel/widget.js | 16 -------- 8 files changed, 74 insertions(+), 63 deletions(-) diff --git a/ui/dashboard/widgets/widget-wrapper.reel/_widget-wrapper.css b/ui/dashboard/widgets/widget-wrapper.reel/_widget-wrapper.css index 8f7779ec4b..5b4bf2c5f1 100644 --- a/ui/dashboard/widgets/widget-wrapper.reel/_widget-wrapper.css +++ b/ui/dashboard/widgets/widget-wrapper.reel/_widget-wrapper.css @@ -18,18 +18,28 @@ opacity: .75; } - @media (min-width: 65em) { - width: calc(50% - 1em); - max-width: 100%; - } + &.Widget--small { + @media (min-width: 65em) { + width: calc(50% - 1em); + max-width: 100%; + } - @media (min-width: 90em) { - width: calc(33% - .825em); - max-width: calc(50% - 1em); + @media (min-width: 90em) { + width: calc(33.333% - 1em); + max-width: calc(50% - 1em); + } } - &.Widget-size-2 { width: 50%; } - &.Widget-size-3 { width: 100%; max-width: 100%;} + &.Widget--medium { + @media (min-width: 65em) { + width: calc(100% - 1em); + } + + @media (min-width: 90em) { + width: calc(66.666% - 1em); + max-width: calc(100% - 1em); + } + } } .WidgetWrapper-removeButton { @@ -56,3 +66,12 @@ transform: scale(1); } } + +/* Widget Size Selector */ + +.Widget-sizeSelector { + position: absolute; + top: .5rem; + right: 2rem; + font-size: .75em; +} diff --git a/ui/dashboard/widgets/widget-wrapper.reel/widget-wrapper.css b/ui/dashboard/widgets/widget-wrapper.reel/widget-wrapper.css index 82caab5832..c2521aac03 100644 --- a/ui/dashboard/widgets/widget-wrapper.reel/widget-wrapper.css +++ b/ui/dashboard/widgets/widget-wrapper.reel/widget-wrapper.css @@ -1 +1 @@ -.WidgetWrapper{position:relative;width:100%}.Main.drawer-is-open .WidgetWrapper{cursor:-webkit-grab;cursor:grab}.Sideboard .WidgetWrapper{margin-left:0;margin-right:0;margin-top:0;width:100%;max-width:100%}.WidgetWrapper.isDragging{opacity:.75}@media (min-width:65em){.WidgetWrapper{width:calc(50% - 1em);max-width:100%}}@media (min-width:90em){.WidgetWrapper{width:calc(33% - .825em);max-width:calc(50% - 1em)}}.WidgetWrapper.Widget-size-2{width:50%}.WidgetWrapper.Widget-size-3{width:100%;max-width:100%}.WidgetWrapper-removeButton{right:-8px;right:-.5rem;top:-8px;top:-.5rem;position:absolute;width:32px;width:2rem;height:32px;height:2rem;background:#e0003a;border-radius:50%;padding:8px;padding:.5rem;color:#fff;box-shadow:0 2px 2px 1px rgba(0,0,0,.3);visibility:hidden;-webkit-transform:scale(0);transform:scale(0);-webkit-transition:visibility .25s ease-in-out,-webkit-transform .25s ease-in-out;transition:visibility .25s ease-in-out,-webkit-transform .25s ease-in-out;transition:transform .25s ease-in-out,visibility .25s ease-in-out;transition:transform .25s ease-in-out,visibility .25s ease-in-out,-webkit-transform .25s ease-in-out}.WidgetWrapper-removeButton:hover{background:#cc0036}.Main.drawer-is-open .WidgetWrapper-removeButton{visibility:visible;-webkit-transform:scale(1);transform:scale(1)} \ No newline at end of file +.WidgetWrapper{position:relative;width:100%}.Main.drawer-is-open .WidgetWrapper{cursor:-webkit-grab;cursor:grab}.Sideboard .WidgetWrapper{margin-left:0;margin-right:0;margin-top:0;width:100%;max-width:100%}.WidgetWrapper.isDragging{opacity:.75}@media (min-width:65em){.WidgetWrapper.Widget--small{width:calc(50% - 1em);max-width:100%}}@media (min-width:90em){.WidgetWrapper.Widget--small{width:calc(33.333% - 1em);max-width:calc(50% - 1em)}}@media (min-width:65em){.WidgetWrapper.Widget--medium{width:calc(100% - 1em)}}@media (min-width:90em){.WidgetWrapper.Widget--medium{width:calc(66.666% - 1em);max-width:calc(100% - 1em)}}.WidgetWrapper-removeButton{right:-8px;right:-.5rem;top:-8px;top:-.5rem;position:absolute;width:32px;width:2rem;height:32px;height:2rem;background:#e0003a;border-radius:50%;padding:8px;padding:.5rem;color:#fff;box-shadow:0 2px 2px 1px rgba(0,0,0,.3);visibility:hidden;-webkit-transform:scale(0);transform:scale(0);-webkit-transition:visibility .25s ease-in-out,-webkit-transform .25s ease-in-out;transition:visibility .25s ease-in-out,-webkit-transform .25s ease-in-out;transition:transform .25s ease-in-out,visibility .25s ease-in-out;transition:transform .25s ease-in-out,visibility .25s ease-in-out,-webkit-transform .25s ease-in-out}.WidgetWrapper-removeButton:hover{background:#cc0036}.Main.drawer-is-open .WidgetWrapper-removeButton{visibility:visible;-webkit-transform:scale(1);transform:scale(1)}.Widget-sizeSelector{position:absolute;top:8px;top:.5rem;right:32px;right:2rem;font-size:.75em} \ No newline at end of file diff --git a/ui/dashboard/widgets/widget-wrapper.reel/widget-wrapper.html b/ui/dashboard/widgets/widget-wrapper.reel/widget-wrapper.html index e0d371ce32..7cb2e1451f 100644 --- a/ui/dashboard/widgets/widget-wrapper.reel/widget-wrapper.html +++ b/ui/dashboard/widgets/widget-wrapper.reel/widget-wrapper.html @@ -6,7 +6,12 @@ { "owner": { "properties": { - "element": {"#": "owner"} + "element": {"#": "owner"}, + "sizeOptions": [ + {"value": "small", "label": "small"}, + {"value": "medium", "label": "medium"}, + {"value": "large", "label": "large"} + ] } }, @@ -20,12 +25,21 @@ "object": {"<-": "@owner.object"} } }, - "removeWidgetButton": { "prototype": "montage/ui/button.reel", "properties": { "element": {"#": "removeButton"} } + }, + "sizeSelector": { + "prototype": "blue-shark/ui/tabs.reel", + "properties": { + "element": {"#": "sizeSelector"} + }, + "bindings": { + "options": {"<-": "@owner.sizeOptions"}, + "selection": {"<->": "@owner.size"} + } } } @@ -36,6 +50,7 @@ +
diff --git a/ui/dashboard/widgets/widget-wrapper.reel/widget-wrapper.js b/ui/dashboard/widgets/widget-wrapper.reel/widget-wrapper.js index 8a785fd574..0387947447 100644 --- a/ui/dashboard/widgets/widget-wrapper.reel/widget-wrapper.js +++ b/ui/dashboard/widgets/widget-wrapper.reel/widget-wrapper.js @@ -11,6 +11,31 @@ exports.WidgetWrapper = AbstractDraggableComponent.specialize(/** @lends WidgetW _placeHolderStrategy: { value: "remove" + }, + + _size: { + value: null + }, + + size: { + get: function () { + return this._size; + }, + set: function (option) { + if(this._size !== option) { + this.classList.remove("Widget--" + this._size); + this.classList.add("Widget--" + option); + this._size = option; + } + } + }, + + enterDocument: { + value: function (isFirstTime) { + if(isFirstTime) { + this.size = "small"; + } + } } }); diff --git a/ui/dashboard/widgets/widget.reel/_widget.css b/ui/dashboard/widgets/widget.reel/_widget.css index 7b12d32bb5..a624a2d64c 100644 --- a/ui/dashboard/widgets/widget.reel/_widget.css +++ b/ui/dashboard/widgets/widget.reel/_widget.css @@ -19,18 +19,6 @@ @nest .drawer-is-open &:hover { box-shadow: 0px 0px 2px 2px rgba(43,156,216,1); } - - &.small { - background: green; - } - - &.medium { - background: orange; - } - - &.large { - background: purple; - } } .Widget-header { @@ -167,5 +155,3 @@ opacity: 1; } } - - diff --git a/ui/dashboard/widgets/widget.reel/widget.css b/ui/dashboard/widgets/widget.reel/widget.css index 26a79363aa..c5394f4e73 100644 --- a/ui/dashboard/widgets/widget.reel/widget.css +++ b/ui/dashboard/widgets/widget.reel/widget.css @@ -1 +1 @@ -.Widget{display:-webkit-box;display:-ms-flexbox;display:flex;height:15em;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background:#16171a;border-radius:4px;overflow:hidden;box-shadow:0 0 2px 2px rgba(43,156,216,0);-webkit-transition:box-shadow .25s ease-in-out;transition:box-shadow .25s ease-in-out}.Widget>*{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.drawer-is-open .Widget:hover{box-shadow:0 0 2px 2px #2b9cd8}.Widget.small{background:green}.Widget.medium{background:orange}.Widget.large{background:purple}.Widget-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:8px;padding:.5rem;line-height:1em;height:2.5em;background:#404040;color:#e0e5e5}.Widget-header svg{width:1.4em;height:1.4em;margin-right:.5em;color:inherit}.Widget-content{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;overflow:hidden;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.Widget-content:before{content:'';position:absolute;visibility:hidden;opacity:0;top:0;left:0;right:0;bottom:0;border-radius:4px;background:rgba(0,0,0,.75);-webkit-transition:visibility .35s ease-in-out,opacity .35s ease-in-out;transition:visibility .35s ease-in-out,opacity .35s ease-in-out;z-index:2}.drawer-is-open .has-settings .Widget-content:before{visibility:visible;opacity:1}.drawer-is-open .flip .Widget-content:before{visibility:hidden;opacity:0}.Widget-content-front{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.Widget-content-front .Scrollview-transform{-webkit-box-flex:0;-ms-flex:none;flex:none;display:block}.Widget-footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.Widget-back,.Widget-flipper,.Widget-front{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.Widget-back,.Widget-flipper,.Widget-front,.Widget.flip .Widget-back,.Widget .Widget-front{display:-webkit-box;display:-ms-flexbox;display:flex}.Widget.flip .Widget-front,.Widget .Widget-back{display:none}.Widget-back{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center}.Widget-back .Widget-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:1em;width:100%;max-width:25em}.Widget-back .Widget-settings{-webkit-box-flex:1;-ms-flex:1;flex:1}.Widget-back .Widget-header{width:100%}.Widget-back .Widget-footer *{margin-left:.5em}.Widget-info{position:absolute;z-index:10;left:1em;bottom:1em;visibility:hidden;opacity:0;-webkit-transition:visibility .35s ease-in-out,opacity .35s ease-in-out;transition:visibility .35s ease-in-out,opacity .35s ease-in-out}.drawer-is-open .has-settings .Widget-info{visibility:visible;opacity:1} \ No newline at end of file +.Widget{display:-webkit-box;display:-ms-flexbox;display:flex;height:15em;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background:#16171a;border-radius:4px;overflow:hidden;box-shadow:0 0 2px 2px rgba(43,156,216,0);-webkit-transition:box-shadow .25s ease-in-out;transition:box-shadow .25s ease-in-out}.Widget>*{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.drawer-is-open .Widget:hover{box-shadow:0 0 2px 2px #2b9cd8}.Widget-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:8px;padding:.5rem;line-height:1em;height:2.5em;background:#404040;color:#e0e5e5}.Widget-header svg{width:1.4em;height:1.4em;margin-right:.5em;color:inherit}.Widget-content{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;overflow:hidden;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.Widget-content:before{content:'';position:absolute;visibility:hidden;opacity:0;top:0;left:0;right:0;bottom:0;border-radius:4px;background:rgba(0,0,0,.75);-webkit-transition:visibility .35s ease-in-out,opacity .35s ease-in-out;transition:visibility .35s ease-in-out,opacity .35s ease-in-out;z-index:2}.drawer-is-open .has-settings .Widget-content:before{visibility:visible;opacity:1}.drawer-is-open .flip .Widget-content:before{visibility:hidden;opacity:0}.Widget-content-front{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.Widget-content-front .Scrollview-transform{-webkit-box-flex:0;-ms-flex:none;flex:none;display:block}.Widget-footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.Widget-back,.Widget-flipper,.Widget-front{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.Widget-back,.Widget-flipper,.Widget-front,.Widget.flip .Widget-back,.Widget .Widget-front{display:-webkit-box;display:-ms-flexbox;display:flex}.Widget.flip .Widget-front,.Widget .Widget-back{display:none}.Widget-back{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center}.Widget-back .Widget-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:1em;width:100%;max-width:25em}.Widget-back .Widget-settings{-webkit-box-flex:1;-ms-flex:1;flex:1}.Widget-back .Widget-header{width:100%}.Widget-back .Widget-footer *{margin-left:.5em}.Widget-info{position:absolute;z-index:10;left:1em;bottom:1em;visibility:hidden;opacity:0;-webkit-transition:visibility .35s ease-in-out,opacity .35s ease-in-out;transition:visibility .35s ease-in-out,opacity .35s ease-in-out}.drawer-is-open .has-settings .Widget-info{visibility:visible;opacity:1} \ No newline at end of file diff --git a/ui/dashboard/widgets/widget.reel/widget.html b/ui/dashboard/widgets/widget.reel/widget.html index cea08cb545..79a2dfb9b1 100644 --- a/ui/dashboard/widgets/widget.reel/widget.html +++ b/ui/dashboard/widgets/widget.reel/widget.html @@ -6,17 +6,11 @@ { "owner": { "properties": { - "element": {"#": "owner"}, - "sizeOptions": [ - {"value": "small"}, - {"value": "medium"}, - {"value": "large"} - ] + "element": {"#": "owner"} }, "bindings": { "classList.has('flip')": {"<-": "this.isFlipped"}, - "classList.has('has-settings')": {"<-": "@owner.hasSettings"}, - "size": {"<-": "@sizeSelector.selectedValue"} + "classList.has('has-settings')": {"<-": "@owner.hasSettings"} } }, @@ -52,17 +46,6 @@ "bindings": { "value": {"<-": "@owner.settingsLabel.defined() ? @owner.settingsLabel : 'Settings'"} } - }, - - "sizeSelector": { - "prototype": "blue-shark/ui/select.reel", - "properties": { - "element": {"#": "sizeSelector"}, - "selectedValue": "medium" - }, - "bindings": { - "options": {"<-": "@owner.sizeOptions.map{value}"} - } } } @@ -76,7 +59,6 @@
-
diff --git a/ui/dashboard/widgets/widget.reel/widget.js b/ui/dashboard/widgets/widget.reel/widget.js index 5c97df7cdf..3c7a2717c2 100644 --- a/ui/dashboard/widgets/widget.reel/widget.js +++ b/ui/dashboard/widgets/widget.reel/widget.js @@ -5,22 +5,6 @@ var Component = require("montage/ui/component").Component; * @extends Component */ exports.Widget = Component.specialize({ - _size: { - value: null - }, - - size: { - get: function () { - return this._size; - }, - set: function (option) { - if(this._size !== option) { - this.classList.remove("is-" + this._size); - this.classList.add("is-" + option); - this._size = option; - } - } - }, isFlipped: { value: false From c2b358031987836b06ff9f9b74340434bb515ae6 Mon Sep 17 00:00:00 2001 From: Joshua Rule Dobson Date: Tue, 20 Sep 2016 10:44:12 -0400 Subject: [PATCH 3/6] lays out sizing select and settings button on widget --- .../widget-wrapper.reel/_widget-wrapper.css | 16 ++++++++++++++-- .../widget-wrapper.reel/widget-wrapper.css | 2 +- ui/dashboard/widgets/widget.reel/_widget.css | 14 ++++++++------ ui/dashboard/widgets/widget.reel/widget.css | 2 +- 4 files changed, 24 insertions(+), 10 deletions(-) diff --git a/ui/dashboard/widgets/widget-wrapper.reel/_widget-wrapper.css b/ui/dashboard/widgets/widget-wrapper.reel/_widget-wrapper.css index 5b4bf2c5f1..796912631e 100644 --- a/ui/dashboard/widgets/widget-wrapper.reel/_widget-wrapper.css +++ b/ui/dashboard/widgets/widget-wrapper.reel/_widget-wrapper.css @@ -40,6 +40,10 @@ max-width: calc(100% - 1em); } } + + @nest .Sideboard & { + width: 100%; + } } .WidgetWrapper-removeButton { @@ -71,7 +75,15 @@ .Widget-sizeSelector { position: absolute; - top: .5rem; - right: 2rem; + display: none; + bottom: .5rem; + left: .5rem; font-size: .75em; + box-shadow: 0 0 4px 0px rgba(0,0,0,1); + z-index: 1; + + @nest .Main.drawer-is-open .Dashboard & { + display: block; + } + } diff --git a/ui/dashboard/widgets/widget-wrapper.reel/widget-wrapper.css b/ui/dashboard/widgets/widget-wrapper.reel/widget-wrapper.css index c2521aac03..20026aa886 100644 --- a/ui/dashboard/widgets/widget-wrapper.reel/widget-wrapper.css +++ b/ui/dashboard/widgets/widget-wrapper.reel/widget-wrapper.css @@ -1 +1 @@ -.WidgetWrapper{position:relative;width:100%}.Main.drawer-is-open .WidgetWrapper{cursor:-webkit-grab;cursor:grab}.Sideboard .WidgetWrapper{margin-left:0;margin-right:0;margin-top:0;width:100%;max-width:100%}.WidgetWrapper.isDragging{opacity:.75}@media (min-width:65em){.WidgetWrapper.Widget--small{width:calc(50% - 1em);max-width:100%}}@media (min-width:90em){.WidgetWrapper.Widget--small{width:calc(33.333% - 1em);max-width:calc(50% - 1em)}}@media (min-width:65em){.WidgetWrapper.Widget--medium{width:calc(100% - 1em)}}@media (min-width:90em){.WidgetWrapper.Widget--medium{width:calc(66.666% - 1em);max-width:calc(100% - 1em)}}.WidgetWrapper-removeButton{right:-8px;right:-.5rem;top:-8px;top:-.5rem;position:absolute;width:32px;width:2rem;height:32px;height:2rem;background:#e0003a;border-radius:50%;padding:8px;padding:.5rem;color:#fff;box-shadow:0 2px 2px 1px rgba(0,0,0,.3);visibility:hidden;-webkit-transform:scale(0);transform:scale(0);-webkit-transition:visibility .25s ease-in-out,-webkit-transform .25s ease-in-out;transition:visibility .25s ease-in-out,-webkit-transform .25s ease-in-out;transition:transform .25s ease-in-out,visibility .25s ease-in-out;transition:transform .25s ease-in-out,visibility .25s ease-in-out,-webkit-transform .25s ease-in-out}.WidgetWrapper-removeButton:hover{background:#cc0036}.Main.drawer-is-open .WidgetWrapper-removeButton{visibility:visible;-webkit-transform:scale(1);transform:scale(1)}.Widget-sizeSelector{position:absolute;top:8px;top:.5rem;right:32px;right:2rem;font-size:.75em} \ No newline at end of file +.WidgetWrapper{position:relative;width:100%}.Main.drawer-is-open .WidgetWrapper{cursor:-webkit-grab;cursor:grab}.Sideboard .WidgetWrapper{margin-left:0;margin-right:0;margin-top:0;width:100%;max-width:100%}.WidgetWrapper.isDragging{opacity:.75}@media (min-width:65em){.WidgetWrapper.Widget--small{width:calc(50% - 1em);max-width:100%}}@media (min-width:90em){.WidgetWrapper.Widget--small{width:calc(33.333% - 1em);max-width:calc(50% - 1em)}}@media (min-width:65em){.WidgetWrapper.Widget--medium{width:calc(100% - 1em)}}@media (min-width:90em){.WidgetWrapper.Widget--medium{width:calc(66.666% - 1em);max-width:calc(100% - 1em)}}.Sideboard .WidgetWrapper{width:100%}.WidgetWrapper-removeButton{right:-8px;right:-.5rem;top:-8px;top:-.5rem;position:absolute;width:32px;width:2rem;height:32px;height:2rem;background:#e0003a;border-radius:50%;padding:8px;padding:.5rem;color:#fff;box-shadow:0 2px 2px 1px rgba(0,0,0,.3);visibility:hidden;-webkit-transform:scale(0);transform:scale(0);-webkit-transition:visibility .25s ease-in-out,-webkit-transform .25s ease-in-out;transition:visibility .25s ease-in-out,-webkit-transform .25s ease-in-out;transition:transform .25s ease-in-out,visibility .25s ease-in-out;transition:transform .25s ease-in-out,visibility .25s ease-in-out,-webkit-transform .25s ease-in-out}.WidgetWrapper-removeButton:hover{background:#cc0036}.Main.drawer-is-open .WidgetWrapper-removeButton{visibility:visible;-webkit-transform:scale(1);transform:scale(1)}.Widget-sizeSelector{position:absolute;display:none;bottom:8px;bottom:.5rem;left:8px;left:.5rem;font-size:.75em;box-shadow:0 0 4px 0 #000;z-index:1}.Main.drawer-is-open .Dashboard .Widget-sizeSelector{display:block} \ No newline at end of file diff --git a/ui/dashboard/widgets/widget.reel/_widget.css b/ui/dashboard/widgets/widget.reel/_widget.css index a624a2d64c..41ce076fbc 100644 --- a/ui/dashboard/widgets/widget.reel/_widget.css +++ b/ui/dashboard/widgets/widget.reel/_widget.css @@ -61,12 +61,12 @@ right: 0; bottom: 0; border-radius: var(--widget-border-radius); - background: rgba(0,0,0,.75); + background: rgba(0,0,0,.5); transition: visibility .35s ease-in-out, opacity .35s ease-in-out; - z-index: 2; + z-index: 1; } - @nest .drawer-is-open .has-settings &:before { + @nest .drawer-is-open &:before { visibility: visible; opacity: 1; } @@ -141,14 +141,16 @@ } } +/* Button */ + .Widget-info { position: absolute; - z-index: 10; - left: 1em; - bottom: 1em; + right: .5em; + bottom: .5em; visibility: hidden; opacity: 0; transition: visibility .35s ease-in-out, opacity .35s ease-in-out; + z-index: 1; @nest .drawer-is-open .has-settings & { visibility: visible; diff --git a/ui/dashboard/widgets/widget.reel/widget.css b/ui/dashboard/widgets/widget.reel/widget.css index c5394f4e73..b32bca1be7 100644 --- a/ui/dashboard/widgets/widget.reel/widget.css +++ b/ui/dashboard/widgets/widget.reel/widget.css @@ -1 +1 @@ -.Widget{display:-webkit-box;display:-ms-flexbox;display:flex;height:15em;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background:#16171a;border-radius:4px;overflow:hidden;box-shadow:0 0 2px 2px rgba(43,156,216,0);-webkit-transition:box-shadow .25s ease-in-out;transition:box-shadow .25s ease-in-out}.Widget>*{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.drawer-is-open .Widget:hover{box-shadow:0 0 2px 2px #2b9cd8}.Widget-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:8px;padding:.5rem;line-height:1em;height:2.5em;background:#404040;color:#e0e5e5}.Widget-header svg{width:1.4em;height:1.4em;margin-right:.5em;color:inherit}.Widget-content{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;overflow:hidden;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.Widget-content:before{content:'';position:absolute;visibility:hidden;opacity:0;top:0;left:0;right:0;bottom:0;border-radius:4px;background:rgba(0,0,0,.75);-webkit-transition:visibility .35s ease-in-out,opacity .35s ease-in-out;transition:visibility .35s ease-in-out,opacity .35s ease-in-out;z-index:2}.drawer-is-open .has-settings .Widget-content:before{visibility:visible;opacity:1}.drawer-is-open .flip .Widget-content:before{visibility:hidden;opacity:0}.Widget-content-front{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.Widget-content-front .Scrollview-transform{-webkit-box-flex:0;-ms-flex:none;flex:none;display:block}.Widget-footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.Widget-back,.Widget-flipper,.Widget-front{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.Widget-back,.Widget-flipper,.Widget-front,.Widget.flip .Widget-back,.Widget .Widget-front{display:-webkit-box;display:-ms-flexbox;display:flex}.Widget.flip .Widget-front,.Widget .Widget-back{display:none}.Widget-back{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center}.Widget-back .Widget-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:1em;width:100%;max-width:25em}.Widget-back .Widget-settings{-webkit-box-flex:1;-ms-flex:1;flex:1}.Widget-back .Widget-header{width:100%}.Widget-back .Widget-footer *{margin-left:.5em}.Widget-info{position:absolute;z-index:10;left:1em;bottom:1em;visibility:hidden;opacity:0;-webkit-transition:visibility .35s ease-in-out,opacity .35s ease-in-out;transition:visibility .35s ease-in-out,opacity .35s ease-in-out}.drawer-is-open .has-settings .Widget-info{visibility:visible;opacity:1} \ No newline at end of file +.Widget{display:-webkit-box;display:-ms-flexbox;display:flex;height:15em;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background:#16171a;border-radius:4px;overflow:hidden;box-shadow:0 0 2px 2px rgba(43,156,216,0);-webkit-transition:box-shadow .25s ease-in-out;transition:box-shadow .25s ease-in-out}.Widget>*{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.drawer-is-open .Widget:hover{box-shadow:0 0 2px 2px #2b9cd8}.Widget-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:8px;padding:.5rem;line-height:1em;height:2.5em;background:#404040;color:#e0e5e5}.Widget-header svg{width:1.4em;height:1.4em;margin-right:.5em;color:inherit}.Widget-content{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;overflow:hidden;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.Widget-content:before{content:'';position:absolute;visibility:hidden;opacity:0;top:0;left:0;right:0;bottom:0;border-radius:4px;background:rgba(0,0,0,.5);-webkit-transition:visibility .35s ease-in-out,opacity .35s ease-in-out;transition:visibility .35s ease-in-out,opacity .35s ease-in-out;z-index:1}.drawer-is-open .Widget-content:before{visibility:visible;opacity:1}.drawer-is-open .flip .Widget-content:before{visibility:hidden;opacity:0}.Widget-content-front{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.Widget-content-front .Scrollview-transform{-webkit-box-flex:0;-ms-flex:none;flex:none;display:block}.Widget-footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.Widget-back,.Widget-flipper,.Widget-front{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.Widget-back,.Widget-flipper,.Widget-front,.Widget.flip .Widget-back,.Widget .Widget-front{display:-webkit-box;display:-ms-flexbox;display:flex}.Widget.flip .Widget-front,.Widget .Widget-back{display:none}.Widget-back{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center}.Widget-back .Widget-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:1em;width:100%;max-width:25em}.Widget-back .Widget-settings{-webkit-box-flex:1;-ms-flex:1;flex:1}.Widget-back .Widget-header{width:100%}.Widget-back .Widget-footer *{margin-left:.5em}.Widget-info{position:absolute;right:.5em;bottom:.5em;visibility:hidden;opacity:0;-webkit-transition:visibility .35s ease-in-out,opacity .35s ease-in-out;transition:visibility .35s ease-in-out,opacity .35s ease-in-out;z-index:1}.drawer-is-open .has-settings .Widget-info{visibility:visible;opacity:1} \ No newline at end of file From aafbab10a1603c34272d12262475c74392737018 Mon Sep 17 00:00:00 2001 From: Joshua Rule Dobson Date: Tue, 4 Oct 2016 17:27:36 -0400 Subject: [PATCH 4/6] adds buttons for saving dashboard layout state and property to show/hide buttons --- ui/drawer.reel/_drawer.css | 10 ++++++++++ ui/drawer.reel/drawer.css | 2 +- ui/drawer.reel/drawer.html | 23 +++++++++++++++++++++-- ui/drawer.reel/drawer.js | 12 ++++++++++++ 4 files changed, 44 insertions(+), 3 deletions(-) diff --git a/ui/drawer.reel/_drawer.css b/ui/drawer.reel/_drawer.css index 0a23ea8b81..293fd221fb 100644 --- a/ui/drawer.reel/_drawer.css +++ b/ui/drawer.reel/_drawer.css @@ -122,3 +122,13 @@ margin-right: 1em; } } + +/* Drawer Layout Button */ + +.Drawer-layoutButton { + display: none; + + @nest .layout-has-changed & { + display: inline-block; + } +} diff --git a/ui/drawer.reel/drawer.css b/ui/drawer.reel/drawer.css index d30125a4a4..5193de0eae 100644 --- a/ui/drawer.reel/drawer.css +++ b/ui/drawer.reel/drawer.css @@ -1 +1 @@ -.Drawer{background-color:#16171a;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:none;position:relative}.drawer-is-open .Drawer{display:block;bottom:0;left:0;right:0;top:0;height:14.5em;box-shadow:0 -4px 6px rgba(0,0,0,.3)}.DrawerContent{position:absolute;bottom:0;left:0;right:0;height:calc(100% - 3em)}.DrawerContent:after,.DrawerContent:before{position:absolute;content:'';width:1em;top:0;height:100%;background-image:-webkit-linear-gradient(left,#16171a,rgba(22,23,26,0));background-image:linear-gradient(90deg,#16171a,rgba(22,23,26,0))}.DrawerContent:after{right:0;background-image:-webkit-linear-gradient(left,rgba(22,23,26,0),#16171a);background-image:linear-gradient(90deg,rgba(22,23,26,0),#16171a)}.Drawer-overlay{visibility:hidden;opacity:0;position:absolute;content:'';top:0;right:0;left:0;bottom:0;background-image:-webkit-radial-gradient(rgba(224,0,58,.2),rgba(224,0,58,.8));background-image:radial-gradient(rgba(224,0,58,.2),rgba(224,0,58,.8));background-size:95vw 95vw;background-repeat:no-repeat;background-position:50%;z-index:1;-webkit-transition:opacity .35s ease-in-out,visibility .35s ease-in-out;transition:opacity .35s ease-in-out,visibility .35s ease-in-out}.acceptDrop .Drawer-overlay,.willAcceptDrop .Drawer-overlay{opacity:1;visibility:visible}.acceptDrop .Drawer-overlay,.Drawer-overlay svg{background:#e0003a}.Drawer-overlay svg{position:absolute;top:calc(50% - 2.5em);left:calc(50% - 2.5em);height:5em;width:5em;padding:1.25em;color:hsla(0,0%,100%,.9);border-radius:50%;box-shadow:0 0 3px 4px rgba(0,0,0,.2)}.Drawer>header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:3em;padding:0 16px;padding:0 1rem;background:#242628}.Drawer-close{height:2.4em;width:2.4em}.Drawer-close.is-open{-webkit-transform:translateY(0);transform:translateY(0)}.Drawer-title{font-size:1em;margin:0;color:#e6e6e6;font-weight:200}.Drawer-items{padding:1em;margin:0;display:-webkit-box;display:-ms-flexbox;display:flex}.Drawer-item{display:inline-block}.Drawer-item:not(:last-child){margin-right:1em} \ No newline at end of file +.Drawer{background-color:#16171a;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:none;position:relative}.drawer-is-open .Drawer{display:block;bottom:0;left:0;right:0;top:0;height:14.5em;box-shadow:0 -4px 6px rgba(0,0,0,.3)}.DrawerContent{position:absolute;bottom:0;left:0;right:0;height:calc(100% - 3em)}.DrawerContent:after,.DrawerContent:before{position:absolute;content:'';width:1em;top:0;height:100%;background-image:-webkit-linear-gradient(left,#16171a,rgba(22,23,26,0));background-image:linear-gradient(90deg,#16171a,rgba(22,23,26,0))}.DrawerContent:after{right:0;background-image:-webkit-linear-gradient(left,rgba(22,23,26,0),#16171a);background-image:linear-gradient(90deg,rgba(22,23,26,0),#16171a)}.Drawer-overlay{visibility:hidden;opacity:0;position:absolute;content:'';top:0;right:0;left:0;bottom:0;background-image:-webkit-radial-gradient(rgba(224,0,58,.2),rgba(224,0,58,.8));background-image:radial-gradient(rgba(224,0,58,.2),rgba(224,0,58,.8));background-size:95vw 95vw;background-repeat:no-repeat;background-position:50%;z-index:1;-webkit-transition:opacity .35s ease-in-out,visibility .35s ease-in-out;transition:opacity .35s ease-in-out,visibility .35s ease-in-out}.acceptDrop .Drawer-overlay,.willAcceptDrop .Drawer-overlay{opacity:1;visibility:visible}.acceptDrop .Drawer-overlay,.Drawer-overlay svg{background:#e0003a}.Drawer-overlay svg{position:absolute;top:calc(50% - 2.5em);left:calc(50% - 2.5em);height:5em;width:5em;padding:1.25em;color:hsla(0,0%,100%,.9);border-radius:50%;box-shadow:0 0 3px 4px rgba(0,0,0,.2)}.Drawer>header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:3em;padding:0 16px;padding:0 1rem;background:#242628}.Drawer-close{height:2.4em;width:2.4em}.Drawer-close.is-open{-webkit-transform:translateY(0);transform:translateY(0)}.Drawer-title{font-size:1em;margin:0;color:#e6e6e6;font-weight:200}.Drawer-items{padding:1em;margin:0;display:-webkit-box;display:-ms-flexbox;display:flex}.Drawer-item{display:inline-block}.Drawer-item:not(:last-child){margin-right:1em}.Drawer-layoutButton{display:none}.layout-has-changed .Drawer-layoutButton{display:inline-block} \ No newline at end of file diff --git a/ui/drawer.reel/drawer.html b/ui/drawer.reel/drawer.html index c9c84895e9..9d0706d3a7 100644 --- a/ui/drawer.reel/drawer.html +++ b/ui/drawer.reel/drawer.html @@ -11,7 +11,8 @@ }, "bindings": { "dashboardWidgets": {"<-": "@owner.currentUser.attributes.dashboardContext.widgets"}, - "sideBoardWidgets": {"<-": "@owner.currentUser.attributes.sideBoardContext.widgets"} + "sideBoardWidgets": {"<-": "@owner.currentUser.attributes.sideBoardContext.widgets"}, + "classList.has('layout-has-changed')": {"<-": "@owner.hasDashboardLayoutChanged"} } }, "horizontalScroll": { @@ -52,6 +53,20 @@ "element": {"#": "closeButton"}, "value": "Done Editing" } + }, + "restoreDefaultButton": { + "prototype": "blue-shark/ui/button.reel", + "properties": { + "element": {"#": "restoreDefaultButton"}, + "value": "Restore default layout" + } + }, + "saveAsDefaultButton": { + "prototype": "blue-shark/ui/button.reel", + "properties": { + "element": {"#": "saveAsDefaultButton"}, + "value": "Save as default layout" + } } } @@ -60,7 +75,11 @@

Drag to add widgets

- +
+ + + +
diff --git a/ui/drawer.reel/drawer.js b/ui/drawer.reel/drawer.js index 494fff54c0..75ebb2873b 100644 --- a/ui/drawer.reel/drawer.js +++ b/ui/drawer.reel/drawer.js @@ -158,6 +158,18 @@ exports.Drawer = AbstractDropZoneComponent.specialize(/** @lends Drawer# */ { this.sideBoardWidgets.splice(index, 1); } } + }, + + handleRestoreDefaultButton: { + value: function () { + console.log("restore default"); + } + }, + + handleSaveAsDefaultButton: { + value: function () { + console.log("save as default"); + } } }); From 0445b7b0d1a59190b9b51b88a0254eb3a518f7c0 Mon Sep 17 00:00:00 2001 From: Joshua Rule Dobson Date: Mon, 31 Oct 2016 11:43:51 -0400 Subject: [PATCH 5/6] fixes layout issue in sidebar --- .../widgets/widget-wrapper.reel/_widget-wrapper.css | 11 ++++------- .../widgets/widget-wrapper.reel/widget-wrapper.css | 2 +- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/ui/dashboard/widgets/widget-wrapper.reel/_widget-wrapper.css b/ui/dashboard/widgets/widget-wrapper.reel/_widget-wrapper.css index 796912631e..5f8fb55975 100644 --- a/ui/dashboard/widgets/widget-wrapper.reel/_widget-wrapper.css +++ b/ui/dashboard/widgets/widget-wrapper.reel/_widget-wrapper.css @@ -6,13 +6,6 @@ cursor: grab; } - @nest .Sideboard & { - margin-left: 0; - margin-right: 0; - margin-top: 0; - width: 100%; - max-width: 100%; - } &.isDragging { opacity: .75; @@ -42,7 +35,11 @@ } @nest .Sideboard & { + margin-left: 0; + margin-right: 0; + margin-top: 0; width: 100%; + max-width: 100%; } } diff --git a/ui/dashboard/widgets/widget-wrapper.reel/widget-wrapper.css b/ui/dashboard/widgets/widget-wrapper.reel/widget-wrapper.css index 20026aa886..0a57d34055 100644 --- a/ui/dashboard/widgets/widget-wrapper.reel/widget-wrapper.css +++ b/ui/dashboard/widgets/widget-wrapper.reel/widget-wrapper.css @@ -1 +1 @@ -.WidgetWrapper{position:relative;width:100%}.Main.drawer-is-open .WidgetWrapper{cursor:-webkit-grab;cursor:grab}.Sideboard .WidgetWrapper{margin-left:0;margin-right:0;margin-top:0;width:100%;max-width:100%}.WidgetWrapper.isDragging{opacity:.75}@media (min-width:65em){.WidgetWrapper.Widget--small{width:calc(50% - 1em);max-width:100%}}@media (min-width:90em){.WidgetWrapper.Widget--small{width:calc(33.333% - 1em);max-width:calc(50% - 1em)}}@media (min-width:65em){.WidgetWrapper.Widget--medium{width:calc(100% - 1em)}}@media (min-width:90em){.WidgetWrapper.Widget--medium{width:calc(66.666% - 1em);max-width:calc(100% - 1em)}}.Sideboard .WidgetWrapper{width:100%}.WidgetWrapper-removeButton{right:-8px;right:-.5rem;top:-8px;top:-.5rem;position:absolute;width:32px;width:2rem;height:32px;height:2rem;background:#e0003a;border-radius:50%;padding:8px;padding:.5rem;color:#fff;box-shadow:0 2px 2px 1px rgba(0,0,0,.3);visibility:hidden;-webkit-transform:scale(0);transform:scale(0);-webkit-transition:visibility .25s ease-in-out,-webkit-transform .25s ease-in-out;transition:visibility .25s ease-in-out,-webkit-transform .25s ease-in-out;transition:transform .25s ease-in-out,visibility .25s ease-in-out;transition:transform .25s ease-in-out,visibility .25s ease-in-out,-webkit-transform .25s ease-in-out}.WidgetWrapper-removeButton:hover{background:#cc0036}.Main.drawer-is-open .WidgetWrapper-removeButton{visibility:visible;-webkit-transform:scale(1);transform:scale(1)}.Widget-sizeSelector{position:absolute;display:none;bottom:8px;bottom:.5rem;left:8px;left:.5rem;font-size:.75em;box-shadow:0 0 4px 0 #000;z-index:1}.Main.drawer-is-open .Dashboard .Widget-sizeSelector{display:block} \ No newline at end of file +.WidgetWrapper{position:relative;width:100%}.Main.drawer-is-open .WidgetWrapper{cursor:-webkit-grab;cursor:grab}.WidgetWrapper.isDragging{opacity:.75}@media (min-width:65em){.WidgetWrapper.Widget--small{width:calc(50% - 1em);max-width:100%}}@media (min-width:90em){.WidgetWrapper.Widget--small{width:calc(33.333% - 1em);max-width:calc(50% - 1em)}}@media (min-width:65em){.WidgetWrapper.Widget--medium{width:calc(100% - 1em)}}@media (min-width:90em){.WidgetWrapper.Widget--medium{width:calc(66.666% - 1em);max-width:calc(100% - 1em)}}.Sideboard .WidgetWrapper{margin-left:0;margin-right:0;margin-top:0;width:100%;max-width:100%}.WidgetWrapper-removeButton{right:-8px;right:-.5rem;top:-8px;top:-.5rem;position:absolute;width:32px;width:2rem;height:32px;height:2rem;background:#e0003a;border-radius:50%;padding:8px;padding:.5rem;color:#fff;box-shadow:0 2px 2px 1px rgba(0,0,0,.3);visibility:hidden;-webkit-transform:scale(0);transform:scale(0);-webkit-transition:visibility .25s ease-in-out,-webkit-transform .25s ease-in-out;transition:visibility .25s ease-in-out,-webkit-transform .25s ease-in-out;transition:transform .25s ease-in-out,visibility .25s ease-in-out;transition:transform .25s ease-in-out,visibility .25s ease-in-out,-webkit-transform .25s ease-in-out}.WidgetWrapper-removeButton:hover{background:#cc0036}.Main.drawer-is-open .WidgetWrapper-removeButton{visibility:visible;-webkit-transform:scale(1);transform:scale(1)}.Widget-sizeSelector{position:absolute;display:none;bottom:8px;bottom:.5rem;left:8px;left:.5rem;font-size:.75em;box-shadow:0 0 4px 0 #000;z-index:1}.Main.drawer-is-open .Dashboard .Widget-sizeSelector{display:block} \ No newline at end of file From 82aeb9eacfe7a56e3975aec574cb6180155b78a2 Mon Sep 17 00:00:00 2001 From: Joshua Rule Dobson Date: Wed, 2 Nov 2016 11:47:42 -0400 Subject: [PATCH 6/6] reveals layout config buttons on drawer --- ui/drawer.reel/_drawer.css | 1 - ui/drawer.reel/drawer.css | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/ui/drawer.reel/_drawer.css b/ui/drawer.reel/_drawer.css index 293fd221fb..05a3406495 100644 --- a/ui/drawer.reel/_drawer.css +++ b/ui/drawer.reel/_drawer.css @@ -126,7 +126,6 @@ /* Drawer Layout Button */ .Drawer-layoutButton { - display: none; @nest .layout-has-changed & { display: inline-block; diff --git a/ui/drawer.reel/drawer.css b/ui/drawer.reel/drawer.css index 5193de0eae..94dcdcba2c 100644 --- a/ui/drawer.reel/drawer.css +++ b/ui/drawer.reel/drawer.css @@ -1 +1 @@ -.Drawer{background-color:#16171a;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:none;position:relative}.drawer-is-open .Drawer{display:block;bottom:0;left:0;right:0;top:0;height:14.5em;box-shadow:0 -4px 6px rgba(0,0,0,.3)}.DrawerContent{position:absolute;bottom:0;left:0;right:0;height:calc(100% - 3em)}.DrawerContent:after,.DrawerContent:before{position:absolute;content:'';width:1em;top:0;height:100%;background-image:-webkit-linear-gradient(left,#16171a,rgba(22,23,26,0));background-image:linear-gradient(90deg,#16171a,rgba(22,23,26,0))}.DrawerContent:after{right:0;background-image:-webkit-linear-gradient(left,rgba(22,23,26,0),#16171a);background-image:linear-gradient(90deg,rgba(22,23,26,0),#16171a)}.Drawer-overlay{visibility:hidden;opacity:0;position:absolute;content:'';top:0;right:0;left:0;bottom:0;background-image:-webkit-radial-gradient(rgba(224,0,58,.2),rgba(224,0,58,.8));background-image:radial-gradient(rgba(224,0,58,.2),rgba(224,0,58,.8));background-size:95vw 95vw;background-repeat:no-repeat;background-position:50%;z-index:1;-webkit-transition:opacity .35s ease-in-out,visibility .35s ease-in-out;transition:opacity .35s ease-in-out,visibility .35s ease-in-out}.acceptDrop .Drawer-overlay,.willAcceptDrop .Drawer-overlay{opacity:1;visibility:visible}.acceptDrop .Drawer-overlay,.Drawer-overlay svg{background:#e0003a}.Drawer-overlay svg{position:absolute;top:calc(50% - 2.5em);left:calc(50% - 2.5em);height:5em;width:5em;padding:1.25em;color:hsla(0,0%,100%,.9);border-radius:50%;box-shadow:0 0 3px 4px rgba(0,0,0,.2)}.Drawer>header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:3em;padding:0 16px;padding:0 1rem;background:#242628}.Drawer-close{height:2.4em;width:2.4em}.Drawer-close.is-open{-webkit-transform:translateY(0);transform:translateY(0)}.Drawer-title{font-size:1em;margin:0;color:#e6e6e6;font-weight:200}.Drawer-items{padding:1em;margin:0;display:-webkit-box;display:-ms-flexbox;display:flex}.Drawer-item{display:inline-block}.Drawer-item:not(:last-child){margin-right:1em}.Drawer-layoutButton{display:none}.layout-has-changed .Drawer-layoutButton{display:inline-block} \ No newline at end of file +.Drawer{background-color:#16171a;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:none;position:relative}.drawer-is-open .Drawer{display:block;bottom:0;left:0;right:0;top:0;height:14.5em;box-shadow:0 -4px 6px rgba(0,0,0,.3)}.DrawerContent{position:absolute;bottom:0;left:0;right:0;height:calc(100% - 3em)}.DrawerContent:after,.DrawerContent:before{position:absolute;content:'';width:1em;top:0;height:100%;background-image:-webkit-linear-gradient(left,#16171a,rgba(22,23,26,0));background-image:linear-gradient(90deg,#16171a,rgba(22,23,26,0))}.DrawerContent:after{right:0;background-image:-webkit-linear-gradient(left,rgba(22,23,26,0),#16171a);background-image:linear-gradient(90deg,rgba(22,23,26,0),#16171a)}.Drawer-overlay{visibility:hidden;opacity:0;position:absolute;content:'';top:0;right:0;left:0;bottom:0;background-image:-webkit-radial-gradient(rgba(224,0,58,.2),rgba(224,0,58,.8));background-image:radial-gradient(rgba(224,0,58,.2),rgba(224,0,58,.8));background-size:95vw 95vw;background-repeat:no-repeat;background-position:50%;z-index:1;-webkit-transition:opacity .35s ease-in-out,visibility .35s ease-in-out;transition:opacity .35s ease-in-out,visibility .35s ease-in-out}.acceptDrop .Drawer-overlay,.willAcceptDrop .Drawer-overlay{opacity:1;visibility:visible}.acceptDrop .Drawer-overlay,.Drawer-overlay svg{background:#e0003a}.Drawer-overlay svg{position:absolute;top:calc(50% - 2.5em);left:calc(50% - 2.5em);height:5em;width:5em;padding:1.25em;color:hsla(0,0%,100%,.9);border-radius:50%;box-shadow:0 0 3px 4px rgba(0,0,0,.2)}.Drawer>header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:3em;padding:0 16px;padding:0 1rem;background:#242628}.Drawer-close{height:2.4em;width:2.4em}.Drawer-close.is-open{-webkit-transform:translateY(0);transform:translateY(0)}.Drawer-title{font-size:1em;margin:0;color:#e6e6e6;font-weight:200}.Drawer-items{padding:1em;margin:0;display:-webkit-box;display:-ms-flexbox;display:flex}.Drawer-item{display:inline-block}.Drawer-item:not(:last-child){margin-right:1em}.layout-has-changed .Drawer-layoutButton{display:inline-block} \ No newline at end of file