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 is a big PR that extracts out a sensible set of SCSS color
variables that can be used to customise Etcher's look.
To achieve such goal, the following changes were introduced:
- Create a separate `lib/gui/scss/modules/_theme.scss` to conveniently
hold all SCSS color variables.
- Decouple button styles from Bootstrap's `.btn`.
- Stop configuring Bootstrap colors as a whole using the SCSS variables
it exposes and instead declare them directly in the modules that make
use of them.
- Normalize all modal layouts into one. We had like 3 different modal
layouts, each with their own title/body colors, etc. To simplify the
color palette, we make use of a single modal layout everywhere.
- Remove `.progress-button--primary`. `.progress-button` is now
"primary" by default.
- Be precise about `tick` foreground colors.
- Rename `.label-default` to `.label-inset`.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
When the user clicks on the backdrop of a modal, the modal promise gets
rejected, therefore triggering our application error handler.
UI Bootstrap provides a way to disable the backdrop completely, but
doesn't provide a way to allow a backdrop click to simply close the
modal rather than rejecting it, as if an issue happened.
To mitigate this issue, and still preserve the backdrop functionality,
we created `ModalService`, which abstracts the messy details of calling
`$uibModal`, and has custom logic to ignore "backdrop click" errors.
Change-Type: patch
Changelog-Entry: Fix "backdrop click" uncaught errors on modals.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
The code that performs an HTTP request to the S3 bucket where released
are stored and determines which is the latest available version was
extracted to a separate module called `etcher-latest-version`, mainly
for the website to be able to re-use this functionality.
See: https://github.com/resin-io-modules/etcher-latest-version
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
JSCS has merged with ESLint. This is the perfect excuse to move to
ESLint and unify both JSHint and JSCS hints under ESLint.
This PR also deprecates `gulp lint` in favour of `npm run lint`.
See: https://medium.com/@markelog/jscs-end-of-the-line-bc9bf0b3fdb2#.zbuwvxa5y
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
Since the addition of Redux and ImmutableJS data structures, we store
the application settings in the Redux store.
This means that checkboxes on templates can no longer bind to the
setting properties directly.
This was fixed in the setting page, but we missed one of them in the
update notifier model.
```html
ng-model="modal.settings.get('sleepUpdateCheck')"
```
Won't lead any meaningful return, and in fact, throws an uncaught
exception.
Changelog-Entry: Fix uncaught exception when showing the update notifier modal.
Change-Type: patch
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
* refactor: getter/setter interface for SettingsModel
This PR introduces a getter/setter interface for `SettingsModel`, which
replaces the old way of managing setting values by simply assigning
properties to an object.
This is the first step towards moving the settings functionality to the
Redux store.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
* refactor: store settings in redux store
The state data structure now contains a property called `settings`,
which is a map containing all setting values.
The list of supported settings can be calculated by retrieving the keys
from the `settings` object, which means that if we support a setting, we
must include a default.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
* feat: store settings in localStorage
This functionality was deleted by acb0de2 when moving the settings
object to the redux store, promising that the feature will be added back
in a future commit.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
ES6 fat arrows provide reasonable `this` behaviour, which protects us
from some subtle accidental bugs, and erradicates `const self = this`
from the codebase.
Far arrows were not applied in Mocha code and AngularJS
controllers/services constructors since these frameworks rely on
`.bind()` on those functions.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
Currently, the modal style style used in this component was declared in
`components/_modal.scss`, however since this srule is very specific to
the update notifier component, its better declared in
`update-notifier/styles`.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
Auto-update functionality is not ready for usage. As a workaround to
prevent users staying with older versions, we now check for updates at
startup, and if the user is not running the latest version, we present a
modal informing the user of the availiblity of a new version, and
provide a call to action to open the Etcher website in his web browser.
Extra features:
- The user can skip the update, and tell the program to delay the
notification for 7 days.
Misc changes:
- Center modal with flexbox, to allow more flexibility on the modal height.
interacting with the S3 server.
- Implement `ManifestBindService`, which now serves as a backend for the
`manifest-bind` directive to allow the directive's functionality to be
re-used by other services.
- Namespace checkbox styles that are specific to the settings page.
Fixes: https://github.com/resin-io/etcher/issues/396
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
