The main purpose of this change is to simplify the interface and avoid
unnecessary text.
Fixes: https://github.com/resin-io/etcher/issues/742
Change-Type: minor
Changelog-Entry: Use info icon instead of "SHOW FULL FILE NAME" in first step.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
As a way to simplify the design and make more use of available
components rather than creating specialised ones, we replaced the
`.alert-ribbon` component, which consisted of an orange alert appearing
at the top of the screen for when a validation failed, the drive ran out
of space, or other issues, with a modal.
This change allowed us to remove the "warning"-related colors from the
theme palette.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
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>
The `.button` component is not the responsible of knowing the
`min-width` it should occupy in the actual pages.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
We have some global CSS rules that affect `.alert` living in
`_bootstrap.scss`, however `.alert` is only being used by our
`.alert-ribbon` component, so it makes sense to move those rules over
there.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
Move `.badge` coloring to the main page's style file, since the style we
currently hardcode on the component itself is very tied to the
particular context the badge is being instantiated in.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
`.label-danger` is defined by Bootstrap, and its coloring re-uses what
was defined in `$brand-danger`, which is currently unset.
To prevent the module from going out of sync with our new CSS palette,
we explicitly declare the colorings in the component file.
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>
This PR integrates SCSS Lint, a tool that will help us keep SCSS tidier.
I've included a sensible configuration at `.scss-lint.yml`, and
documentation on how to install it on `CONTRIBUTING.md`.
The tool will run automatically as part of `npm run lint`.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
There are many SCSS rules in `lib/gui/scss/main.scss` that only apply to
the main page. In order to keep things tidy, those styles were moved to
`lib/gui/pages/main/styles/_main.scss`.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
Currently, we intentionally prevent a drive from being auto-selected if
there was no selected image for UX purposes, however this way of
thinking has been challenged, and we didn't find a real UX problem by
doing this.
As a minor design improvement, we gray out the drive name in the main
window when an image hasn't been selected yet.
Change-Type: minor
Changelog-Entry: Perform drive auto-selection even when there is no selected image.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
This setting makes Etcher not filter non-removable drives, allowing you to
arbitrarily write to your system drives.
This is a dangerous option, therefore we present it in a separate section of
the settings page, and show an informative confirmation dialog.
Change-Type: minor
Changelog-Entry: Add an "unsafe" option to bypass drive protection.
Fixes: https://github.com/resin-io/etcher/issues/480
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
The progress button exhibits spiky diagonals when used it with the
"striped" modifier. This can be seen better when drastically reducing the animation
speed.
Turns out its a Webkit rendering bug. I've stumbled into dozens of
"workarounds" on the internet (mainly Stack Overflow), however none of
them fixed the issue.
After some crazy amount of experimentation, the issue is gone if we add
1% to certain stop positions. Weird stuff.
Fixes: https://github.com/resin-io/etcher/issues/472
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>
This PR introduces two changes to mitigate this problem and overall
provide a better UX:
- Show ellipses in the middle of the image name in the first step if
needed.
- Add a tooltip below the image selection label in the first step to
show a little modal displaying the full path to the image.
Fixes: https://github.com/resin-io/etcher/issues/418
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
This is a huge improvement over our current approach, which was simply
to cross out the drive without further explanation.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
We want to re-use the `label` component without big paddings in other
areas of the application, therefore we move the custom padding to a
separate label modifier.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
This is by no means a complete CSS refactoring. There still a lot to be
done. This encompasses mostly:
- Move "Finish page" specific styles to that module.
- Remove unused CSS rules.
- Move generic Bootstrap rules to `_bootstrap.scss`.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
* Show speed during check
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
* Display ETA during flash and check
Fixes: https://github.com/resin-io/etcher/issues/256
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
Currently we disable pointer events on the "Flash" button once a flash
is in progress to prevent the user from clicking it, but we didn't
consider that if the user kept focus on the button, he can press the
"space" bar for the same effect.
Fixes: https://github.com/resin-io/etcher/issues/431
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
* Make .selectImage() dialog return an object with a `path` property
This allows to return more than one value for the selected image,
like image size and other metadata for example.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
* Return image size from .selectImage() dialog
This property will be useful to perform some sanity checks, like
ensuring the selected drive is large enough to contain the image.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
* Store both the image path and the image size in the selection model
In order to simplify accessing such properties in an encapsulated
manner, `SelectionStateModel.getImage()` was replaced with the following
functions:
- `SelectionStateModel.getImagePath()`.
- `SelectionStateModel.getImageSize()`.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
* Increase SelectionStateModel setter validation
The model not providing any kind of validation was the source of some
bugs I encountered while implementing the previous commits that would
not have happened otherwise.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
* Prevent selection of drives that are not large enough
- The drive selector modal was modified such that drives that are not
large enough are crossed out, and the user is not able to click them.
- In the case of drive auto-selection, not large enough drives won't
attempt to get autoselected.
This commit introduces:
- The `SelectionStateModel.isDriveLargeEnough()` function.
Fixes: https://github.com/resin-io/etcher/issues/344
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>
The current "Close" button makes it confusing to the user to know if
he's accepting his changes, or just discarding them.
The "Close" button in the top right corner was replaced with a standard
cross icon, and there is a new "Continue" block button fixed in the
bottom of the modal.
Fixes: https://github.com/resin-io/etcher/issues/294
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
* Implement ManifestBind directive
This directive is useful to bind the contents of an element to a
property in the `package.json` manifest.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
* Add application version to footer
Fixes: https://github.com/resin-io/etcher/issues/292
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
* Inherit current scope in osOpenExternal directive
This directive attempts to create a new isolated scope, which leads the
errors when using this directive on top of another directive in the same
element.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
* Implement SVGIcon Angular directive
This directive replaces part of `hero-icon`, the old Polymer component.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
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
pushed to the bottom.
The `!important` flag is needed since UI Bootstrap inlines
the styles programatically to the element.
Fixes: https://github.com/resin-io/etcher/issues/257
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
* Extend ProgressButton to support a striped progress bar
This feature will be used to implement the burn validation step.
* Implement alert-ribbon CSS component
This component will be used to inform an error situation to the user
during the burn/check processes.
* Add "Enable write validation on success" setting
* Implement write validation support
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
Fixes: https://github.com/resin-io/etcher/issues/45
On Electron, the user can click and press over a button,
then move the mouse away from the button and release,
and the button will erroneusly keep the `:focus` state style.
The current workaround consists of:
- Iterate through all the Bootstrap button styles.
- Set the default 'background', `color` and `border-color` to match the
style of the normal state.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
This modal provides a more advanced way to select a drive. It prevents
certain issues the dropdown was having, like the contents overflowing
when there were many connected drives.
Fixes: https://github.com/resin-io/etcher/issues/202
