jeans/etcher
jeans/etcher
1
0
Fork 0
mirror of https://github.com/balena-io/etcher.git synced 2025-07-21 10:16:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(GUI): use design background and drive size ordering (#2341)

Browse Source 
We use the new design background color, and order the drive step size in
accordance with the new design as well.

Related: https://github.com/resin-io/etcher/issues/2310
Change-Type: patch
Changelog-Entry: Use new design background color and drive step size
ordering.
This commit is contained in:
Benedict Aas 2018-05-15 14:23:33 +01:00 committed by GitHub
parent f6ce603e45
commit 35729fc36b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 22 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
lib/gui/app/pages/main/styles/_main.scss
View File

@ -15,7 +15,7 @@
*/
.page-main {
margin-top: 50px;
margin-top: 50px;
}
svg-icon > img[disabled] {
@ -115,7 +115,8 @@ svg-icon > img[disabled] {
margin-top: 1px;
}
.page-main div.step-fill {
.page-main div.step-fill,
.page-main span.step-fill {
margin-top: 25px;
}
@ -140,13 +141,11 @@ svg-icon > img[disabled] {
align-items: center;
height: 39px;
width: 100%;
margin-right: 4.5px;
font-weight: bold;
color: $palette-theme-primary-foreground;
}
.page-main .step-size {
margin-right: 4.5px;
color: $palette-theme-dark-disabled-foreground;
margin-top: 10px;
}

21
lib/gui/app/pages/main/templates/main.tpl.html
View File

@ -72,19 +72,22 @@
<!-- middleEllipsis errors on undefined, therefore fallback to empty string -->
{{ drive.getDrivesTitle() | middleEllipsis:20 }}
</span>
<span
ng-if="main.selection.getSelectedDevices().length <= 1"
class="step-drive step-size">
{{ drive.getDrivesSubtitle() }}
</span>
<span class="step-drive step-warning glyphicon glyphicon-exclamation-sign"
uib-tooltip="{{ main.constraints.getListDriveImageCompatibilityStatuses(main.selection.getSelectedDrives(), main.selection.getImage())[0].message }}"
ng-show="main.constraints.hasListDriveImageCompatibilityStatus(main.selection.getSelectedDrives(), main.selection.getImage())"></span>
<button class="button button-link step-footer"
tabindex="{{ main.selection.hasDrive() ? 2 : -1 }}"
ng-hide="main.state.isFlashing() || !drive.shouldShowDrivesButton()"
ng-click="drive.reselectDrive()">Change</button>
<span
ng-if="main.selection.getSelectedDevices().length <= 1"
ng-class="{
'step-fill': !drive.shouldShowDrivesButton()
}"
class="step-drive step-size">
{{ drive.getDrivesSubtitle() }}
</span>
</div>
<button class="button button-link step-footer"
tabindex="{{ main.selection.hasDrive() ? 2 : -1 }}"
ng-hide="main.state.isFlashing() || !drive.shouldShowDrivesButton()"
ng-click="drive.reselectDrive()">Change</button>
</div>
<div ng-if="main.selection.getSelectedDevices().length > 1"
ng-class="{

2
lib/gui/app/scss/modules/_theme.scss
View File

@ -15,7 +15,7 @@
*/
$palette-theme-dark-foreground: #fff;
$palette-theme-dark-background: #535760;
$palette-theme-dark-background: #4d5057;
$palette-theme-light-foreground: #666;
$palette-theme-light-background: #fff;
$palette-theme-dark-soft-foreground: #ddd;

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

@ -5964,10 +5964,10 @@ button.close {
* limitations under the License.
*/
html {
background-color: #535760; }
background-color: #4d5057; }
body {
background-color: #535760; }
background-color: #4d5057; }
.checkbox input[type="checkbox"] {
position: initial;
@ -6045,7 +6045,7 @@ body {
padding: 8px 25px; }
.label-inset {
background-color: #3b3e45;
background-color: #35373c;
color: #919191; }
.label-danger {
@ -6581,7 +6581,8 @@ svg-icon > img[disabled] {
.page-main .step-drive.glyphicon, .page-main .step-drive.tick {
margin-top: 1px; }
.page-main div.step-fill {
.page-main div.step-fill,
.page-main span.step-fill {
margin-top: 25px; }
.page-main .step-drive.step-list::-webkit-scrollbar {
@ -6600,12 +6601,10 @@ svg-icon > img[disabled] {
align-items: center;
height: 39px;
width: 100%;
margin-right: 4.5px;
font-weight: bold;
color: #fff; }
.page-main .step-size {
margin-right: 4.5px;
color: #787c7f;
margin-top: 10px; }
@ -6749,7 +6748,7 @@ svg-icon > img[disabled] {
position: absolute;
top: 125px;
left: 0;
background-color: #535760;
background-color: #4d5057;
color: #fff;
font-weight: 300; }
.page-finish .fallback-banner .caption {