jeans/etcher
jeans/etcher
1
0
Fork 0
mirror of https://github.com/balena-io/etcher.git synced 2025-04-24 07:17:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(gui): update main page design

Browse Source 
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.
This commit is contained in:
Shou 2017-01-30 13:17:51 +00:00 committed by Juan Cruz Viotti
parent c7d4ac6518
commit 048aac5ac2
7 changed files with 66 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
lib/gui/components/progress-button/styles/_progress-button.scss
View File

@ -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

54
lib/gui/css/main.css
View File

@ -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 {
* <span class="progress-button__bar" style="width: 50%;"></span>
* </button>
*/
.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;

2
lib/gui/index.html
View File

@ -24,7 +24,7 @@
<body ng-app="Etcher">
<header class="section-header" ng-controller="HeaderController as header">
<button class="button button-link" ng-click="header.openHelpPage()">
<span class="glyphicon glyphicon-question-sign"></span> Need Help?
<span class="glyphicon glyphicon-question-sign"></span>
</button>
<button class="button button-link" ui-sref="settings" hide-if-state="settings">

44
lib/gui/pages/main/styles/_main.scss
View File

@ -14,29 +14,8 @@
* limitations under the License.
*/
.page-main .icon-caption {
@extend .caption;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
color: $palette-theme-dark-foreground;
&[disabled] {
color: $palette-theme-dark-disabled-foreground;
}
}
.page-main .badge {
background-color: $palette-theme-dark-background;
color: $palette-theme-dark-foreground;
&[disabled] {
background-color: darken($palette-theme-dark-disabled-foreground, 12%);
color: $palette-theme-dark-disabled-foreground;
}
.page-main {
margin-top: 75px;
}
.svg-icon[disabled] path {
@ -63,8 +42,8 @@
height: 2px;
background-color: $palette-theme-dark-foreground;
position: absolute;
width: 230px;
top: 95px;
width: 124px;
top: 19px;
&[disabled] {
background-color: $palette-theme-dark-disabled-foreground;
@ -73,12 +52,12 @@
.page-main .step-border-left {
@extend %step-border;
left: -120px;
left: -67px;
}
.page-main .step-border-right {
@extend %step-border;
right: -120px;
right: -67px;
}
.page-main .step-tooltip {
@ -110,7 +89,7 @@
.page-main .button.step-footer {
font-size: 12px;
border-bottom: 1px dashed;
color: $palette-theme-primary-background;
border-radius: 0;
padding: 0;
}
@ -118,3 +97,12 @@
.page-main .glyphicon {
vertical-align: text-top;
}
.page-main .step-name {
font-weight: bold;
color: $palette-theme-primary-foreground;
}
.page-main .step-size {
color: $palette-theme-dark-disabled-foreground;
}

33
lib/gui/pages/main/templates/main.tpl.html
View File

@ -5,9 +5,6 @@
<svg-icon class="center-block"
path="../../../assets/drive.svg"
ng-disabled="main.shouldDriveStepBeDisabled()"></svg-icon>
<span class="icon-caption">Select Drive</span>
<span class="badge space-top-medium">1</span>
<div class="space-vertical-large">
<div ng-hide="main.selection.hasDrive()">
@ -27,7 +24,10 @@
<div class="step-selection-text"
ng-class="{
'text-disabled': main.shouldDriveStepBeDisabled()
}">{{ main.selection.getDrive().name }} - {{ main.selection.getDrive().size | gigabyte | number:1 }} GB</div>
}">
<span class="step-drive step-name">{{ main.selection.getDrive().name }}</span>
<span class="step-drive step-size">{{ main.selection.getDrive().size | gigabyte | number:1 }} GB</span>
</div>
<button class="button button-link step-footer"
ng-click="drive.reselectDrive()"
ng-hide="main.state.isFlashing()">Change</button>
@ -45,12 +45,6 @@
class="center-block"
path="{{ main.selection.getImageLogo() || '../../../assets/image.svg' }}"
ng-disabled="main.shouldImageStepBeDisabled()"></svg-icon>
<span
class="icon-caption"
ng-disabled="main.shouldImageStepBeDisabled()">Select Image</span>
<span
class="badge space-top-medium"
ng-disabled="main.shouldImageStepBeDisabled()">2</span>
<div class="space-vertical-large">
<div ng-hide="main.selection.hasImage()">
@ -67,17 +61,16 @@
</div>
<div ng-if="main.selection.hasImage()">
<div class="step-selection-text">
<span ng-click="main.external.open(main.selection.getImageUrl())"
ng-class="{ 'text-disabled': main.shouldImageStepBeDisabled() }"
ng-bind="main.selection.getImageName() || main.selection.getImagePath() | basename | middleEllipses:20"
uib-tooltip="{{ main.selection.getImagePath() | basename }}"></span>
<span class="glyphicon glyphicon-info-sign"
ng-class="{ 'text-disabled': main.shouldImageStepBeDisabled() }"
<span
ng-click="main.tooltipModal.show({
title: 'Image File Name',
message: main.selection.getImagePath()
})"></span>
})"
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 }}"></span>
<span class="step-image step-size">{{ main.selection.getImageSize() | gigabyte | number:1 }} GB</span>
</div>
<button class="button button-link step-footer"
@ -93,10 +86,6 @@
<svg-icon class="center-block"
path="../../../assets/flash.svg"
ng-disabled="main.shouldFlashStepBeDisabled()"></svg-icon>
<span class="icon-caption"
ng-disabled="main.shouldFlashStepBeDisabled()">Flash Image</span>
<span class="badge space-top-medium" ng-disabled="main.shouldFlashStepBeDisabled()">3</span>
<div class="space-vertical-large">
<progress-button class="button-brick"

4
lib/gui/scss/modules/_space.scss
View File

@ -37,10 +37,6 @@ $spacing-tiny: 5px;
margin-top: $spacing-large;
}
.space-top-medium {
margin-top: $spacing-medium;
}
.space-vertical-large {
margin-top: $spacing-large;
margin-bottom: $spacing-large;

1
lib/gui/scss/modules/_theme.scss
View File

@ -29,6 +29,7 @@ $palette-theme-default-background: #ececec;
$palette-theme-default-foreground: #b3b3b3;
$palette-theme-primary-background: #5793db;
$palette-theme-primary-foreground: #fff;
$palette-theme-warning-background: #ff912f;
$palette-theme-danger-background: #d9534f;
$palette-theme-danger-foreground: #fff;
$palette-theme-success-background: #5fb835;