From 048aac5ac28c632fe4201259af5070cbc7ac5efa Mon Sep 17 00:00:00 2001 From: Shou Date: Mon, 30 Jan 2017 13:17:51 +0000 Subject: [PATCH] feat(gui): update main page design We match the main page design to its updated style. * Remove help icon text. * 'Change' image/drive buttons are now violet blue. * Remove step number icons and accompanying descriptions. * Flash progress button now turns into a striking orange, from blue. Changelog-Entry: Update main page design to its new style. --- .../styles/_progress-button.scss | 15 ++++-- lib/gui/css/main.css | 54 +++++++++---------- lib/gui/index.html | 2 +- lib/gui/pages/main/styles/_main.scss | 44 ++++++--------- lib/gui/pages/main/templates/main.tpl.html | 33 ++++-------- lib/gui/scss/modules/_space.scss | 4 -- lib/gui/scss/modules/_theme.scss | 1 + 7 files changed, 66 insertions(+), 87 deletions(-) diff --git a/lib/gui/components/progress-button/styles/_progress-button.scss b/lib/gui/components/progress-button/styles/_progress-button.scss index 33e8d6d0..a958d9a2 100644 --- a/lib/gui/components/progress-button/styles/_progress-button.scss +++ b/lib/gui/components/progress-button/styles/_progress-button.scss @@ -48,13 +48,17 @@ $progress-button-stripes-animation-duration: 1s; @extend .button; @extend .button-primary; + &[active="true"] { + background-color: $palette-theme-warning-background; + } + .progress-button__bar { - background-color: lighten($palette-theme-primary-background, 5%); + background-color: lighten($palette-theme-warning-background, 5%); } &.progress-button--striped { - $progress-button-stripes-background-color: desaturate($palette-theme-primary-background, 5%); - $progress-button-stripes-foreground-color: desaturate(darken($palette-theme-primary-background, 18%), 20%); + $progress-button-stripes-background-color: desaturate($palette-theme-warning-background, 5%); + $progress-button-stripes-foreground-color: desaturate(darken($palette-theme-warning-background, 18%), 20%); // Notice that we add `0.01` to certain gradient stop positions. // That workarounds a Chrome rendering issue where diagonal @@ -69,7 +73,12 @@ $progress-button-stripes-animation-duration: 1s; color-stop(0.75 + 0.01, $progress-button-stripes-background-color), to($progress-button-stripes-background-color)); + .progress-button__bar { + background-color: lighten($palette-theme-warning-background, 5%); + } + } + } // Prevent the button from being clickable diff --git a/lib/gui/css/main.css b/lib/gui/css/main.css index 9b5f85ce..3b7bbb89 100644 --- a/lib/gui/css/main.css +++ b/lib/gui/css/main.css @@ -4451,7 +4451,7 @@ a.badge:hover, a.badge:focus { height: auto; margin-left: auto; margin-right: auto; } - .thumbnail .caption, .thumbnail .page-main .icon-caption, .page-main .thumbnail .icon-caption { + .thumbnail .caption { padding: 9px; color: #333333; } @@ -6008,9 +6008,6 @@ body { .space-top-large { margin-top: 30px; } -.space-top-medium { - margin-top: 15px; } - .space-vertical-large { margin-top: 30px; margin-bottom: 30px; } @@ -6093,7 +6090,7 @@ body { * See the License for the specific language governing permissions and * limitations under the License. */ -.caption, .page-main .icon-caption { +.caption { font-weight: bold; font-size: 11px; margin-bottom: 0; } @@ -6365,11 +6362,16 @@ body { * * */ +.progress-button[active="true"] { + background-color: #ff912f; } + .progress-button .progress-button__bar { - background-color: #6ca1e0; } + background-color: #ff9e49; } .progress-button.progress-button--striped { - background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, #3b679b), color-stop(0.26, #5c93d6), color-stop(0.5, #5c93d6), color-stop(0.51, #3b679b), color-stop(0.75, #3b679b), color-stop(0.76, #5c93d6), to(#5c93d6)); } + background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, #bd6415), color-stop(0.26, #fa9134), color-stop(0.5, #fa9134), color-stop(0.51, #bd6415), color-stop(0.75, #bd6415), color-stop(0.76, #fa9134), to(#fa9134)); } + .progress-button.progress-button--striped .progress-button__bar { + background-color: #ff9e49; } .progress-button__content { position: relative; @@ -6481,21 +6483,8 @@ body { * See the License for the specific language governing permissions and * limitations under the License. */ -.page-main .icon-caption { - display: block; - margin-left: auto; - margin-right: auto; - margin-top: 10px; - color: #fff; } - .page-main .icon-caption[disabled] { - color: #787c7f; } - -.page-main .badge { - background-color: #535760; - color: #fff; } - .page-main .badge[disabled] { - background-color: #5a5d60; - color: #787c7f; } +.page-main { + margin-top: 75px; } .svg-icon[disabled] path { fill: #787c7f; } @@ -6516,16 +6505,16 @@ body { height: 2px; background-color: #fff; position: absolute; - width: 230px; - top: 95px; } + width: 124px; + top: 19px; } .page-main [disabled].step-border-left, .page-main [disabled].step-border-right { background-color: #787c7f; } .page-main .step-border-left { - left: -120px; } + left: -67px; } .page-main .step-border-right { - right: -120px; } + right: -67px; } .page-main .step-tooltip { display: block; @@ -6552,13 +6541,20 @@ body { .page-main .button.step-footer, .page-main .step-footer.progress-button { font-size: 12px; - border-bottom: 1px dashed; + color: #5793db; border-radius: 0; padding: 0; } .page-main .glyphicon, .page-main .tick { vertical-align: text-top; } +.page-main .step-name { + font-weight: bold; + color: #fff; } + +.page-main .step-size { + color: #787c7f; } + /* * Copyright 2016 resin.io * @@ -6648,10 +6644,10 @@ body { padding: 0; } .section-footer .svg-icon { margin: 0 13px; } - .section-footer .caption[os-open-external], .section-footer .page-main [os-open-external].icon-caption, .page-main .section-footer [os-open-external].icon-caption { + .section-footer .caption[os-open-external] { border-bottom: 1px dashed; padding-bottom: 2px; } - .section-footer .caption[os-open-external]:hover, .section-footer .page-main [os-open-external].icon-caption:hover, .page-main .section-footer [os-open-external].icon-caption:hover { + .section-footer .caption[os-open-external]:hover { color: #85898c; } .section-footer .footer-right { font-size: 10px; diff --git a/lib/gui/index.html b/lib/gui/index.html index 07042e19..56728a19 100644 --- a/lib/gui/index.html +++ b/lib/gui/index.html @@ -24,7 +24,7 @@
@@ -45,12 +45,6 @@ class="center-block" path="{{ main.selection.getImageLogo() || '../../../assets/image.svg' }}" ng-disabled="main.shouldImageStepBeDisabled()"> - Select Image - 2
@@ -67,17 +61,16 @@
- - - + })" + class="step-image step-name" + ng-class="{ 'text-disabled': main.shouldImageStepBeDisabled() }" + ng-bind="main.selection.getImageName() || main.selection.getImagePath() | basename | middleEllipses:20" + uib-tooltip="{{ main.selection.getImagePath() | basename }}"> + {{ main.selection.getImageSize() | gigabyte | number:1 }} GB