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
