Commit ccb5f29c authored by David Munro's avatar David Munro Committed by Commit Bot

crostini: UI fixes for disk resizing in settings.

* Add a margin around the slider so the label doesn't get cut off and no
  scrollbar shows up
* Align the max label correctly under the slider

Screenshot: https://drive.google.com/open?id=1-K52YfP_4ZQ-zKkIu2ErLrprJXQM7kGY

Bug: chromium:858815
Test: Manual
Change-Id: I8c5b054a1df920f832e652aaa0848cd752601159
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2115868
Commit-Queue: David Munro <davidmunro@google.com>
Auto-Submit: David Munro <davidmunro@google.com>
Reviewed-by: default avatarKyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#753073}
parent 79965411
...@@ -8,23 +8,20 @@ ...@@ -8,23 +8,20 @@
<link rel="import" href="crostini_browser_proxy.html"> <link rel="import" href="crostini_browser_proxy.html">
<link rel="import" href="../../i18n_setup.html"> <link rel="import" href="../../i18n_setup.html">
<link rel="import" href="../../settings_shared_css.html"> <link rel="import" href="../../settings_shared_css.html">
<style>
#labels {
display: flex;
flex-direction: row;
justify-content: space-between;
}
#resize-block {
align-items: stretch;
display: flex;
flex-direction: column;
}
</style>
<dom-module id="settings-crostini-disk-resize-dialog"> <dom-module id="settings-crostini-disk-resize-dialog">
<template> <template>
<style include="settings-shared"></style> <style include="settings-shared">
#disk-labels {
display: flex;
justify-content: space-between;
}
#resize-block {
align-items: stretch;
margin-inline-end: 10px;
margin-inline-start: 10px;
}
</style>
<cr-dialog id="diskResizeDialog" close-text="$i18n{close}"> <cr-dialog id="diskResizeDialog" close-text="$i18n{close}">
<div slot="title">$i18n{crostiniDiskResizeTitle}</div> <div slot="title">$i18n{crostiniDiskResizeTitle}</div>
<div slot="body"> <div slot="body">
...@@ -34,7 +31,7 @@ ...@@ -34,7 +31,7 @@
value="[[defaultDiskSizeTick_]]" ticks="[[diskSizeTicks_]]" value="[[defaultDiskSizeTick_]]" ticks="[[diskSizeTicks_]]"
disabled="[[resizing_]]"> disabled="[[resizing_]]">
</cr-slider> </cr-slider>
<div id="labels"> <div id="disk-labels">
<div id="label-begin">[[minDiskSize_]]</div> <div id="label-begin">[[minDiskSize_]]</div>
<div id="label-end">[[maxDiskSize_]]</div> <div id="label-end">[[maxDiskSize_]]</div>
</div> </div>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment