Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(488)

Side by Side Diff: chrome/browser/resources/settings/controls/settings_toggle_button.html

Issue 2661533002: MD Settings: fix settings-toggle-button label text overflow. (Closed)
Patch Set: do text-elide and no-min-width in a cleaner way Created 3 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 <link rel="import" href="chrome://resources/html/polymer.html"> 1 <link rel="import" href="chrome://resources/html/polymer.html">
2 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/pap er-toggle-button.html"> 2 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/pap er-toggle-button.html">
3 <link rel="import" href="/controls/settings_boolean_control_behavior.html"> 3 <link rel="import" href="/controls/settings_boolean_control_behavior.html">
4 <link rel="import" href="/settings_shared_css.html"> 4 <link rel="import" href="/settings_shared_css.html">
5 5
6 <dom-module id="settings-toggle-button"> 6 <dom-module id="settings-toggle-button">
7 <template> 7 <template>
8 <style include="settings-shared"> 8 <style include="settings-shared">
9 :host([elide-label]),
10 :host([elide-label]) #outerRow,
11 :host([elide-label]) #outerRow > div.flex {
12 min-width: 0;
13 }
14
15 :host([elide-label]) .label {
16 @apply(--settings-text-elide);
17 }
18
9 #outerRow { 19 #outerRow {
10 align-items: center; 20 align-items: center;
11 display: flex; 21 display: flex;
12 min-height: var(--settings-row-two-line-min-height); 22 min-height: var(--settings-row-two-line-min-height);
13 width: 100%; 23 width: 100%;
14 } 24 }
15 25
16 #outerRow[noSubLabel] { 26 #outerRow[noSubLabel] {
17 min-height: var(--settings-row-min-height); 27 min-height: var(--settings-row-min-height);
18 } 28 }
19 29
20 paper-toggle-button, 30 paper-toggle-button,
21 cr-policy-pref-indicator { 31 cr-policy-pref-indicator {
22 -webkit-margin-start: var(--checkbox-spacing); 32 -webkit-margin-start: var(--checkbox-spacing);
23 } 33 }
24 34
25 ::content .more-actions { 35 ::content .more-actions {
26 -webkit-margin-end: 10px; 36 -webkit-margin-end: 10px;
27 } 37 }
28 </style> 38 </style>
29 <div id="outerRow" noSubLabel$="[[!subLabel]]"> 39 <div id="outerRow" noSubLabel$="[[!subLabel]]">
30 <div class="flex" on-tap="onLabelWrapperTap_" 40 <div class="flex" on-tap="onLabelWrapperTap_"
31 actionable$="[[!controlDisabled_(disabled, pref)]]"> 41 actionable$="[[!controlDisabled_(disabled, pref)]]">
32 <div>[[label]]</div> 42 <div class="label">[[label]]</div>
33 <div class="secondary">[[subLabel]]</div> 43 <div class="secondary label">[[subLabel]]</div>
34 </div> 44 </div>
35 <content selector=".more-actions"></content> 45 <content selector=".more-actions"></content>
36 <template is="dom-if" if="[[pref.controlledBy]]"> 46 <template is="dom-if" if="[[pref.controlledBy]]">
37 <cr-policy-pref-indicator pref="[[pref]]"></cr-policy-pref-indicator> 47 <cr-policy-pref-indicator pref="[[pref]]"></cr-policy-pref-indicator>
38 </template> 48 </template>
39 <paper-toggle-button id="control" checked="{{checked}}" 49 <paper-toggle-button id="control" checked="{{checked}}"
40 disabled="[[controlDisabled_(disabled, pref)]]"> 50 disabled="[[controlDisabled_(disabled, pref)]]">
41 </paper-toggle-button> 51 </paper-toggle-button>
42 </div> 52 </div>
43 </template> 53 </template>
44 <script src="settings_toggle_button.js"></script> 54 <script src="settings_toggle_button.js"></script>
45 </dom-module> 55 </dom-module>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698