diff --git a/gui/app/pods/auth/forgot/template.hbs b/gui/app/pods/auth/forgot/template.hbs index 08f0c9fe..2fbd196b 100644 --- a/gui/app/pods/auth/forgot/template.hbs +++ b/gui/app/pods/auth/forgot/template.hbs @@ -2,7 +2,7 @@
{{forgot-password forgot=(action 'forgot')}} diff --git a/gui/app/pods/auth/login/template.hbs b/gui/app/pods/auth/login/template.hbs index 674ccb3f..035a5534 100644 --- a/gui/app/pods/auth/login/template.hbs +++ b/gui/app/pods/auth/login/template.hbs @@ -3,7 +3,7 @@
diff --git a/gui/app/pods/auth/reset/template.hbs b/gui/app/pods/auth/reset/template.hbs index aa3c63c7..4a9a3869 100644 --- a/gui/app/pods/auth/reset/template.hbs +++ b/gui/app/pods/auth/reset/template.hbs @@ -2,7 +2,7 @@
{{password-reset reset=(action 'reset')}}
diff --git a/gui/app/pods/folders/template.hbs b/gui/app/pods/folders/template.hbs index f997a131..2b063aa3 100644 --- a/gui/app/pods/folders/template.hbs +++ b/gui/app/pods/folders/template.hbs @@ -1,20 +1,14 @@ -{{#layout/top-bar selectItem="spaces"}} -{{/layout/top-bar}} +{{#layout/master-sidebar selectedItem="spaces"}} +{{/layout/master-sidebar}} -{{#layout/middle-zone}} - {{#layout/middle-zone-content}} - {{spaces/space-list spaces=model}} - {{/layout/middle-zone-content}} +{{#layout/master-content}} - {{#layout/middle-zone-sidebar}} - - {{/layout/middle-zone-sidebar}} +

{{appMeta.title}}

+

{{appMeta.message}}

+ {{#if session.isEditor}} + + {{/if}} + {{spaces/space-list spaces=model}}
-{{/layout/middle-zone}} -{{#layout/bottom-bar}} -{{/layout/bottom-bar}} \ No newline at end of file +{{/layout/master-content}} diff --git a/gui/app/pods/theming/template.hbs b/gui/app/pods/theming/template.hbs index f6b9d8ac..affe4dbb 100644 --- a/gui/app/pods/theming/template.hbs +++ b/gui/app/pods/theming/template.hbs @@ -6,10 +6,90 @@

Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.

{{/layout/master-sidebar}} {{#layout/master-content}} - - - - + +
+ +
+ +
+ +
+
+
+ +
+ +
+ +
+ +
+
+
+ +
+ +
+ +
+ +
+
+
+
+ + + + + +
+
+
+
+ + + + + +
+
+
+
+ + + + + +
+
+
+
+ + + + + +
+
+
+
+ + + + + +
+
+
+
+ + + + + +
+
+

Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.

Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.

Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.

diff --git a/gui/app/styles/core/ui/all.scss b/gui/app/styles/core/ui/all.scss index 46602392..a6871730 100644 --- a/gui/app/styles/core/ui/all.scss +++ b/gui/app/styles/core/ui/all.scss @@ -1 +1,11 @@ +@mixin button-shadow-light() { + box-shadow: 1px 1px 3px 0px map-get($gray-shades, 400); +} +@mixin button-shadow() { + box-shadow: 1px 1px 3px 0px map-get($gray-shades, 600); +} + @import "ui-tooltip"; +@import "ui-popup"; +@import "ui-button"; +@import "ui-toolbar"; diff --git a/gui/app/styles/core/ui/ui-button.scss b/gui/app/styles/core/ui/ui-button.scss new file mode 100644 index 00000000..0f555d6d --- /dev/null +++ b/gui/app/styles/core/ui/ui-button.scss @@ -0,0 +1,140 @@ +%dmz-button { + display: inline-block; + white-space: nowrap; + vertical-align: middle; + text-align: center; + padding: 0.375rem 0.75rem; + font-weight: 500; + font-size: 1rem; + line-height: 1.5; + border: 1px solid transparent; + @extend .no-select; + @include button-shadow(); + @include border-radius(2px); + text-transform: uppercase; + + > .dicon { + font-size: 0.7rem; + padding: 0 5px 0 0; + font-weight: 700; + } +} + +// Button spacer utilities +.dmz-button-gap-right { + margin: 0 5px 0 0; + display: inline-block; +} +.dmz-button-gap-left { + margin: 0 0 0 5px; + display: inline-block; +} +.dmz-button-gap-x { + margin: 0 5px; + display: inline-block; +} +.dmz-button-gap-top { + margin: 5px 0 0 0; + display: inline-block; +} +.dmz-button-gap-bottom { + margin: 0 0 5px 0; + display: inline-block; +} +.dmz-button-gap-y { + margin: 5px 0; + display: inline-block; +} +.dmz-button-gap-x-y { + margin: 5px; + display: inline-block; +} + +// Colored buttons +.dmz-button-green { + @extend %dmz-button; + background-color: map-get($green-shades, 600); + color: $color-white; + @include button-shadow(); + + &:hover { + background-color: map-get($green-shades, 700); + } +} +.dmz-button-green-light { + @extend %dmz-button; + background-color: map-get($green-shades, 200); + color: map-get($green-shades, 700); + border: 1px solid map-get($green-shades, 300); + @include button-shadow-light(); + + &:hover { + background-color: map-get($green-shades, 300); + } +} + +.dmz-button-yellow { + @extend %dmz-button; + background-color: map-get($yellow-shades, 600); + color: $color-white; + @include button-shadow(); + + &:hover { + background-color: map-get($yellow-shades, 700); + } +} +.dmz-button-yellow-light { + @extend %dmz-button; + background-color: map-get($yellow-shades, 200); + color: map-get($yellow-shades, 700); + border: 1px solid map-get($yellow-shades, 300); + @include button-shadow-light(); + + &:hover { + background-color: map-get($yellow-shades, 300); + } +} + +.dmz-button-red { + @extend %dmz-button; + background-color: map-get($red-shades, 600); + color: $color-white; + @include button-shadow(); + + &:hover { + background-color: map-get($red-shades, 700); + } +} +.dmz-button-red-light { + @extend %dmz-button; + background-color: map-get($red-shades, 100); + color: map-get($red-shades, 700); + border: 1px solid map-get($red-shades, 200); + @include button-shadow-light(); + + &:hover { + background-color: map-get($red-shades, 300); + } +} + +.dmz-button-gray { + @extend %dmz-button; + background-color: map-get($gray-shades, 600); + color: $color-white; + @include button-shadow(); + + &:hover { + background-color: map-get($gray-shades, 700); + } +} +.dmz-button-gray-light { + @extend %dmz-button; + background-color: map-get($gray-shades, 200); + color: map-get($gray-shades, 700); + border: 1px solid map-get($gray-shades, 300); + @include button-shadow-light(); + + &:hover { + background-color: map-get($gray-shades, 300); + } +} diff --git a/gui/app/styles/core/ui/ui-popup.scss b/gui/app/styles/core/ui/ui-popup.scss new file mode 100644 index 00000000..61b771bc --- /dev/null +++ b/gui/app/styles/core/ui/ui-popup.scss @@ -0,0 +1,84 @@ +// https://github.com/kybishop/ember-attacher + +.ember-attacher-popper { + background-color: $color-white; + font-size: 1rem; + box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + @include border-radius(3px); + + > p { + margin: 4px; + padding: 0; + } + + > .menu { + margin: 0; + padding: 0; + min-width: 140px; + + > .item { + color: map-get($gray-shades, 800); + background-color: transparent; + display: block; + list-style-type: none; + margin: 0; + border: 0; + white-space: nowrap; + text-align: left; + padding: 0.5rem 1.5rem; + font-size: 1rem; + + &:hover { + color: $color-black; + background-color: map-get($gray-shades, 100); + } + } + + > .header { + color: map-get($gray-shades, 800); + background-color: map-get($gray-shades, 300); + font-size: 1rem; + font-weight: 600; + + &:hover { + color: map-get($gray-shades, 800); + background-color: map-get($gray-shades, 300); + } + } + + > .divider { + margin: 0; + padding: 0; + height: 1px; + border-top: 1px solid map-get($gray-shades, 200); + } + + .red { + color: map-get($red-shades, 600); + + &:hover { + color: map-get($red-shades, 800); + } + } + + .green { + color: map-get($green-shades, 600); + + &:hover { + color: map-get($green-shades, 800); + } + } + + .yellow { + color: map-get($yellow-shades, 600); + + &:hover { + color: map-get($yellow-shades, 800); + } + } + + .bold { + font-weight: 600; + } + } +} diff --git a/gui/app/styles/core/ui/ui-toolbar.scss b/gui/app/styles/core/ui/ui-toolbar.scss new file mode 100644 index 00000000..7382b8b4 --- /dev/null +++ b/gui/app/styles/core/ui/ui-toolbar.scss @@ -0,0 +1,88 @@ +%dmz-toolbar { + display: inline-block; + text-align: center; + white-space: nowrap; + vertical-align: middle; + border: 1px solid transparent; + height: 30px; + padding: 5px 10px; + line-height: 24px; + @extend .no-select; + @include border-radius(6px); + + > .dicon { + font-size: 16px; + font-weight: 500; + color: map-get($gray-shades, 600); + padding: 0 0.25rem; + cursor: pointer; + + &:hover { + color: map-get($gray-shades, 700); + } + } + + > .red { + color: map-get($red-shades, 500); + + &:hover { + color: map-get($red-shades, 600); + } + } + + > .yellow { + color: map-get($yellow-shades, 600); + + &:hover { + color: map-get($yellow-shades, 700); + } + } + + > .green { + color: map-get($green-shades, 500); + + &:hover { + color: map-get($green-shades, 600); + } + } +} + +.dmz-toolbar-dark-small { + @extend %dmz-toolbar; + background-color: map-get($gray-shades, 200); +} + +.dmz-toolbar-dark-large { + @extend %dmz-toolbar; + background-color: map-get($gray-shades, 200); + height: 36px; + padding: 5px 10px; + line-height: 33px; + + > .dicon { + font-size: 20px; + font-weight: 500; + } +} + +.dmz-toolbar-small { + @extend %dmz-toolbar; + background-color: transparent; +} + +.dmz-toolbar-large { + @extend .dmz-toolbar-dark-large; + background-color: transparent; +} + +.dmz-toolbar-raised-small { + @extend %dmz-toolbar; + background-color: map-get($gray-shades, 100); + @include button-shadow-light(); +} + +.dmz-toolbar-raised-large { + @extend .dmz-toolbar-dark-large; + background-color: map-get($gray-shades, 100); + @include button-shadow-light(); +} diff --git a/gui/app/styles/core/ui/ui-tooltip.scss b/gui/app/styles/core/ui/ui-tooltip.scss index 00afe4f2..decb6677 100644 --- a/gui/app/styles/core/ui/ui-tooltip.scss +++ b/gui/app/styles/core/ui/ui-tooltip.scss @@ -4,86 +4,3 @@ font-size: 0.9rem; padding: 0.5rem 0.75rem; } - -.ember-attacher-popper { - background-color: $color-white; - font-size: 1rem; - box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16), 0 1px 5px 0 rgba(0, 0, 0, 0.12); - @include border-radius(3px); - - > p { - margin: 4px; - padding: 0; - } - - > .menu { - margin: 0; - padding: 0; - min-width: 140px; - - > .item { - color: map-get($gray-shades, 800); - background-color: transparent; - display: block; - list-style-type: none; - margin: 0; - border: 0; - white-space: nowrap; - text-align: left; - padding: 0.5rem 1.5rem; - font-size: 1rem; - - &:hover { - color: $color-black; - background-color: map-get($gray-shades, 100); - } - } - - > .header { - color: map-get($gray-shades, 800); - background-color: map-get($gray-shades, 300); - font-size: 1rem; - font-weight: 600; - - &:hover { - color: map-get($gray-shades, 800); - background-color: map-get($gray-shades, 300); - } - } - - > .divider { - margin: 0; - padding: 0; - height: 1px; - border-top: 1px solid map-get($gray-shades, 200); - } - - .red { - color: map-get($red-shades, 600); - - &:hover { - color: map-get($red-shades, 800); - } - } - - .green { - color: map-get($green-shades, 600); - - &:hover { - color: map-get($green-shades, 800); - } - } - - .yellow { - color: map-get($yellow-shades, 600); - - &:hover { - color: map-get($yellow-shades, 800); - } - } - - .bold { - font-weight: 600; - } - } -} diff --git a/gui/app/styles/core/view/auth.scss b/gui/app/styles/core/view/auth.scss index ecdc2edf..95b904ad 100644 --- a/gui/app/styles/core/view/auth.scss +++ b/gui/app/styles/core/view/auth.scss @@ -28,7 +28,7 @@ > .url { margin: 20px 0; - color: map-get($gray-shades, 600); + color: map-get($gray-shades, 700); font-weight: 0.9rem; } }