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

refactor(GUI): unify modal styles (#678)

Browse Source 
Despite all modals sharing the same design and layout, each of theme is
being styled separately, when most of the CSS rules can be moved and
generified to `_modal.scss` and re-used by all of them.

This PR also moves `lib/gui/scss/components/_modal.scss` to the "Modal"
Angular's module.

Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
This commit is contained in:
Juan Cruz Viotti 2016-09-02 12:28:33 -04:00 committed by GitHub
parent cefff7b934
commit a8884f4da9
10 changed files with 145 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

205
build/css/main.css
View File

@ -5973,9 +5973,6 @@ body {
position: initial;
margin-right: 2px; }
.modal-backdrop.in {
opacity: 0; }
[uib-tooltip] {
cursor: default; }
@ -6212,90 +6209,6 @@ body {
background-color: #d9534f;
border-color: #d9534f; }
/*
* Copyright 2016 Resin.io
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.modal-content {
background-color: #fff;
display: flex;
flex-direction: column;
margin: 0 auto;
height: auto; }
.modal-header {
display: flex;
align-items: baseline;
text-transform: uppercase;
font-size: 11px;
color: #b3b3b3;
padding: 11px 20px;
flex-grow: 0; }
.modal-title {
font-size: inherit;
flex-grow: 1; }
.modal-body {
flex-grow: 1;
color: #666;
padding: 0 20px;
max-height: 250px;
overflow: auto; }
.modal-body .list-group-item {
display: flex;
align-items: center;
border-left: 0;
border-right: 0;
border-radius: 0;
border-color: #ededed;
padding: 12px 0; }
.modal-body .list-group-item > .tick {
font-size: 11px; }
.modal-body .list-group-item :first-child {
flex-grow: 1; }
.modal-body .list-group-item:first-child {
border-top: 0; }
.modal-body .list-group-item[disabled] .list-group-item-heading {
color: #b3b3b3; }
.modal-body .list-group-item-heading {
font-size: 13px; }
.modal-body .list-group-item-text {
line-height: 1;
font-size: 11px;
color: #b3b3b3; }
.modal-open {
padding-right: 0 !important; }
.modal-footer {
flex-grow: 0;
border: 0; }
.modal {
display: flex !important;
justify-content: center;
align-items: center; }
.modal .button[disabled], .modal [disabled].progress-button {
background-color: #d5d5d5;
color: #787c7f; }
.modal-dialog {
margin: 0;
position: initial;
max-width: 50%; }
/*
* Copyright 2016 Resin.io
*
@ -6358,24 +6271,110 @@ body {
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.update-notifier-modal-body {
padding: 30px 35px;
overflow: hidden; }
.modal-content {
background-color: #fff;
display: flex;
flex-direction: column;
margin: 0 auto;
height: auto; }
.modal-update-notifier .modal-body {
padding: 20px;
padding-bottom: 0; }
.modal-header {
display: flex;
align-items: baseline;
text-transform: uppercase;
font-size: 11px;
color: #b3b3b3;
padding: 11px 20px;
flex-grow: 0; }
.modal-title {
font-size: inherit;
flex-grow: 1; }
.modal-body {
flex-grow: 1;
color: #666;
padding: 0;
max-height: 250px;
overflow: auto; }
.modal-body .list-group {
padding: 0 20px; }
.modal-body .list-group-item {
display: flex;
align-items: center;
border-left: 0;
border-right: 0;
border-radius: 0;
border-color: #ededed;
padding: 12px 0; }
.modal-body .list-group-item > .tick {
font-size: 11px; }
.modal-body .list-group-item :first-child {
flex-grow: 1; }
.modal-body .list-group-item:first-child {
border-top: 0; }
.modal-body .list-group-item[disabled] .list-group-item-heading {
color: #b3b3b3; }
.modal-body .list-group-item-heading {
font-size: 13px; }
.modal-body .list-group-item-text {
line-height: 1;
font-size: 11px;
color: #b3b3b3; }
.modal-text {
padding: 20px; }
.modal-text > p:last-child {
margin-bottom: 0; }
.modal-menu {
display: flex; }
.modal-menu > .button, .modal-menu > .progress-button {
flex-basis: 50%; }
.modal-open {
padding-right: 0 !important; }
.modal-backdrop.in {
opacity: 0; }
.modal-footer {
flex-grow: 0;
border: 0; }
.modal {
display: flex !important;
justify-content: center;
align-items: center; }
.modal .button[disabled], .modal [disabled].progress-button {
background-color: #d5d5d5;
color: #787c7f; }
.modal-dialog {
margin: 0;
position: initial;
max-width: 50%; }
/*
* Copyright 2016 Resin.io
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.modal-update-notifier .modal-footer .checkbox {
color: #b3b3b3;
font-size: 11px;
margin-bottom: 0; }
.modal-update-notifier .modal-menu {
display: flex; }
.modal-update-notifier .modal-menu > .button, .modal-update-notifier .modal-menu > .progress-button {
flex-basis: 50%; }
/*
* Copyright 2016 Resin.io
*
@ -6488,8 +6487,6 @@ body {
margin: 15px;
color: #666;
background-color: #f2f2f2;
padding: 8px;
overflow: hidden;
word-wrap: break-word; }
/*
@ -6614,14 +6611,6 @@ body {
.modal-settings-dangerous-modal .modal-title .glyphicon, .modal-settings-dangerous-modal .modal-title .tick {
color: #d9534f; }
.modal-settings-dangerous-modal .modal-body {
padding: 20px; }
.modal-settings-dangerous-modal .modal-footer {
display: flex; }
.modal-settings-dangerous-modal .modal-footer > .button, .modal-settings-dangerous-modal .modal-footer > .progress-button {
flex-basis: 50%; }
/*
* Copyright 2016 Resin.io
*

28
lib/gui/scss/components/_modal.scss → lib/gui/components/modal/styles/_modal.scss
View File

@ -40,10 +40,14 @@
.modal-body {
flex-grow: 1;
color: $palette-theme-light-foreground;
padding: 0 20px;
padding: 0;
max-height: 250px;
overflow: auto;
.list-group {
padding: 0 20px;
}
.list-group-item {
display: flex;
align-items: center;
@ -81,6 +85,22 @@
}
}
.modal-text {
padding: 20px;
> p:last-child {
margin-bottom: 0;
}
}
.modal-menu {
display: flex;
> .button {
flex-basis: 50%;
}
}
// UI Bootstrap adds the `.modal-open` class to the <body>
// element and sets its right padding to the width of the
// window, causing the window content to overflow and get
@ -91,6 +111,11 @@
padding-right: 0 !important;
}
// Disable modal opacity
.modal-backdrop.in {
opacity: 0;
}
.modal-footer {
flex-grow: 0;
border: 0;
@ -115,4 +140,3 @@
position: initial;
max-width: 50%;
}

2
lib/gui/components/tooltip-modal/styles/_tooltip-modal.scss
View File

@ -19,7 +19,5 @@
margin: 15px;
color: $palette-theme-light-foreground;
background-color: darken($palette-theme-light-background, 5%);
padding: 8px;
overflow: hidden;
word-wrap: break-word;
}

4
lib/gui/components/tooltip-modal/templates/tooltip-modal.tpl.html
View File

@ -3,4 +3,6 @@
<button class="close" ng-click="modal.closeModal()">&times;</button>
</div>
<div class="modal-body">{{ ::modal.data.message }}</div>
<div class="modal-body">
<div class="modal-text">{{ ::modal.data.message }}</div>
</div>

30
lib/gui/components/update-notifier/styles/_update-notifier.scss
View File

@ -14,31 +14,9 @@
* limitations under the License.
*/
.update-notifier-modal-body {
padding: 30px 35px;
overflow: hidden;
}
.modal-update-notifier {
.modal-body {
padding: 20px;
padding-bottom: 0;
}
.modal-footer .checkbox {
color: $palette-theme-light-soft-foreground;
font-size: 11px;
margin-bottom: 0;
}
.modal-menu {
display: flex;
& > .button {
flex-basis: 50%;
}
}
.modal-update-notifier .modal-footer .checkbox {
color: $palette-theme-light-soft-foreground;
font-size: 11px;
margin-bottom: 0;
}

4
lib/gui/components/update-notifier/templates/update-notifier-modal.tpl.html
View File

@ -3,7 +3,9 @@
</div>
<div class="modal-body">
<p>A new version of Etcher is available for download</p>
<div class="modal-text">
<p>A new version of Etcher is available for download</p>
</div>
</div>
<div class="modal-footer">

19
lib/gui/pages/settings/styles/_settings.scss
View File

@ -32,21 +32,6 @@
margin-bottom: 15px;
}
.modal-settings-dangerous-modal {
.modal-title .glyphicon {
color: $palette-theme-danger-background;
}
.modal-body {
padding: 20px;
}
.modal-footer {
display: flex;
& > .button {
flex-basis: 50%;
}
}
.modal-settings-dangerous-modal .modal-title .glyphicon {
color: $palette-theme-danger-background;
}

14
lib/gui/pages/settings/templates/settings-dangerous-modal.tpl.html
View File

@ -6,13 +6,17 @@
</div>
<div class="modal-body">
<p>Are you sure you want to turn this on? {{ modal.message }}</p>
<div class="modal-text">
<p>Are you sure you want to turn this on? {{ modal.message }}</p>
</div>
</div>
<div class="modal-footer">
<button class="button button-danger"
ng-click="modal.accept()">YES, CONTINUE</button>
<div class="modal-menu">
<button class="button button-danger"
ng-click="modal.accept()">YES, CONTINUE</button>
<button class="button button-default"
ng-click="modal.reject()">CANCEL</button>
<button class="button button-default"
ng-click="modal.reject()">CANCEL</button>
</div>
</div>

2
lib/gui/scss/main.scss
View File

@ -31,8 +31,8 @@ $link-color: #ddd;
@import "./components/caption";
@import "./components/button";
@import "./components/tick";
@import "./components/modal";
@import "./components/alert-ribbon";
@import "../components/modal/styles/modal";
@import "../components/update-notifier/styles/update-notifier";
@import "../components/progress-button/styles/progress-button";
@import "../components/drive-selector/styles/drive-selector";

5
lib/gui/scss/modules/_bootstrap.scss
View File

@ -32,11 +32,6 @@ body {
margin-right: 2px;
}
// Disable modal opacity
.modal-backdrop.in {
opacity: 0;
}
[uib-tooltip] {
cursor: default;
}