Skip to content

Commit 9cda1e5

Browse files
stephanwleestephanwlee
committed
Make sidebar consistent across all plugins
- Width is now fixed (and is variable to vw) - All slider are styled the same - Margin and padding of content in the sidebar the same - Made few elements respond better to variable width
1 parent dd27235 commit 9cda1e5

File tree

10 files changed

+130
-89
lines changed

10 files changed

+130
-89
lines changed

‎tensorboard/components/tf_dashboard_common/dashboard-style.html‎

Lines changed: 40 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,14 @@
2424
<style include="iron-flex"></style>
2525
<style>
2626
.sidebar {
27+
box-sizing: border-box;
2728
display: flex;
2829
flex-direction: column;
2930
height: 100%;
3031
margin-right: 20px;
32+
overflow-x: hidden;
33+
padding: 5px 0;
34+
text-overflow: ellipsis;
3135
}
3236

3337
tf-runs-selector {
@@ -40,23 +44,54 @@
4044
}
4145

4246
.sidebar-section {
43-
border-top: solid 1px rgba(0, 0, 0, 0.12);
44-
padding: 15px 0px 15px 30px;
47+
border-top: solid 1px rgba(0, 0, 0, .12);
48+
padding: 15px 0 15px 30px;
4549
}
4650

47-
.sidebar-section:first-child {
51+
.sidebar-section:first-of-type {
4852
border: none;
4953
}
5054

51-
.sidebar-section:last-child {
55+
.sidebar-section:last-of-type {
5256
flex-grow: 1;
5357
display: flex;
5458
}
5559

60+
.sidebar-section paper-button {
61+
margin: 5px;
62+
}
63+
64+
.sidebar-section paper-button:first-of-type {
65+
margin-left: 0 !important;
66+
}
67+
68+
.sidebar-section paper-button:last-of-type {
69+
margin-right: 0 !important;
70+
}
71+
72+
.sidebar-section > :first-child {
73+
margin-top: 0;
74+
padding-top: 0;
75+
}
76+
77+
.sidebar-section > :last-child {
78+
margin-bottom: 0;
79+
padding-bottom: 0;
80+
}
81+
82+
.sidebar-section h3 {
83+
color: var(--paper-grey-800);
84+
display: block;
85+
font-size: 14px;
86+
font-weight: normal;
87+
margin: 10px 0 5px;
88+
pointer-events: none;
89+
}
90+
5691
paper-checkbox {
5792
--paper-checkbox-checked-color: var(--tb-ui-dark-accent);
5893
--paper-checkbox-unchecked-color: var(--tb-ui-dark-accent);
59-
font-size: 14px;
94+
font-size: 15px;
6095
margin-top: 5px;
6196
}
6297
</style>

‎tensorboard/components/tf_dashboard_common/tf-dashboard-layout.html‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -33,14 +33,18 @@
3333
</div>
3434
<style include="scrollbar-style"></style>
3535
<style>
36+
:host {
37+
display: flex;
38+
flex-direction: row;
39+
height: 100%;
40+
}
41+
3642
#sidebar {
37-
width: inherit;
43+
flex: 0 0 25%;
3844
height: 100%;
39-
overflow: ellipsis;
40-
flex-grow: 0;
41-
flex-shrink: 0;
42-
max-width: 30%;
45+
max-width: 350px;
4346
min-width: 270px;
47+
text-overflow: ellipsis;
4448
}
4549

4650
#center {
@@ -51,13 +55,7 @@
5155
}
5256

5357
.tf-graph-dashboard #center {
54-
background: white;
55-
}
56-
57-
:host {
58-
display: flex;
59-
flex-direction: row;
60-
height: 100%;
58+
background: #fff;
6159
}
6260
</style>
6361
</template>

‎tensorboard/components/tf_dashboard_common/tf-option-selector.html‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,10 @@ <h3>[[name]]</h3>
3030
</div>
3131
<style>
3232
.content-wrapper ::content > * {
33-
width: 30%;
34-
font-size: 13px;
3533
background: none;
36-
margin-top: 10px;
3734
color: var(--tb-ui-dark-accent);
35+
font-size: 13px;
36+
margin-top: 10px;
3837
}
3938

4039
.content-wrapper ::content :first-of-type {
@@ -43,16 +42,15 @@ <h3>[[name]]</h3>
4342

4443
.content-wrapper ::content .selected {
4544
background-color: var(--tb-ui-dark-accent);
46-
color: white!important;
45+
color: white !important;
4746
}
4847

4948
h3 {
5049
color: var(--paper-grey-800);
51-
margin: 0;
52-
font-weight: normal;
53-
font-size: 14px;
54-
margin-bottom: 5px;
5550
display: block;
51+
font-size: 14px;
52+
font-weight: normal;
53+
margin: 0 0 5px;
5654
pointer-events: none;
5755
}
5856
</style>

‎tensorboard/plugins/beholder/tf_beholder_dashboard/tf-beholder-dashboard.html‎

Lines changed: 41 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
</div>
4545
</template>
4646
<div class="sidebar-section">
47-
<div class="title">Values</div>
47+
<h3>Values</h3>
4848
<paper-radio-group
4949
id="valuesSelector"
5050
selected="{{_values}}">
@@ -73,7 +73,7 @@
7373
<template is="dom-if" if="[[_valuesNotFrame(_values)]]">
7474

7575
<div class="sidebar-section">
76-
<div class="title">Mode</div>
76+
<h3>Mode</h3>
7777
<paper-radio-group id="modeSelector" selected="{{_mode}}">
7878
<paper-radio-button name="current"
7979
disabled="[[_controls_disabled]]">
@@ -85,7 +85,7 @@
8585
</paper-radio-button>
8686
</paper-radio-group>
8787
<template is="dom-if" if="[[_varianceSelected(_mode)]]">
88-
<div class="title">Variance timesteps: {{_windowSize}}</div>
88+
<h4>Variance timesteps: {{_windowSize}}</h4>
8989
<paper-slider
9090
id="windowSlider"
9191
value="{{_windowSize}}"
@@ -100,7 +100,7 @@
100100
</div>
101101

102102
<div class="sidebar-section">
103-
<div class="title">Image scaling</div>
103+
<h3>Image scaling</h3>
104104
<paper-radio-group id="scalingSelector" selected="{{_scaling}}">
105105

106106
<paper-radio-button id="option-layer" name="layer"
@@ -141,7 +141,7 @@
141141
</template>
142142

143143
<div class="sidebar-section">
144-
<div class="title">Updates per second: {{_FPS}}</div>
144+
<h3>Updates per second: {{_FPS}}</h3>
145145
<paper-slider
146146
id="FPSSlider"
147147
value="{{_FPS}}"
@@ -155,13 +155,15 @@
155155
</div>
156156

157157
<div class="sidebar-section">
158-
<paper-button
159-
class="x-button"
160-
id="record_button"
161-
on-tap="_toggleRecord"
162-
disabled="[[_controls_disabled]]">
163-
[[_recordText]]
164-
</paper-button>
158+
<div>
159+
<paper-button
160+
class="x-button"
161+
id="record_button"
162+
on-tap="_toggleRecord"
163+
disabled="[[_controls_disabled]]">
164+
[[_recordText]]
165+
</paper-button>
166+
</div>
165167
</div>
166168

167169
<div class="sidebar-section">
@@ -235,17 +237,7 @@ <h3>No Beholder data was found.</h3>
235237

236238
.no-data-warning {
237239
max-width: 540px;
238-
margin: 80px auto 0 auto;
239-
}
240-
241-
.title {
242-
font-size: 16px;
243-
margin: 8px 5px 8px 0;
244-
color: black;
245-
}
246-
247-
.title small {
248-
font-weight: normal;
240+
margin: 80px auto 0;
249241
}
250242

251243
paper-checkbox {
@@ -254,18 +246,34 @@ <h3>No Beholder data was found.</h3>
254246
}
255247

256248
paper-radio-button {
257-
display: block;
249+
display: flex;
258250
padding: 5px;
251+
252+
--paper-radio-button-radio-container: {
253+
flex-grow: 0;
254+
flex-shrink: 0;
255+
}
256+
257+
--paper-radio-button-label: {
258+
font-size: 13px;
259+
overflow: hidden;
260+
text-overflow: ellipsis;
261+
}
259262
}
260263

261264
paper-radio-group {
262265
margin-top: 5px;
266+
width: 100%;
263267
}
264268

265269
paper-slider {
266-
margin-left: 12px;
267-
--paper-slider-knob-color: var(--tb-orange-strong);
268270
--paper-slider-active-color: var(--tb-orange-strong);
271+
--paper-slider-knob-color: var(--tb-orange-strong);
272+
--paper-slider-knob-start-border-color: var(--tb-orange-strong);
273+
--paper-slider-knob-start-color: var(--tb-orange-strong);
274+
--paper-slider-markers-color: var(--tb-orange-strong);
275+
--paper-slider-pin-color: var(--tb-orange-strong);
276+
--paper-slider-pin-start-color: var(--tb-orange-strong);
269277
flex-grow: 2;
270278
}
271279

@@ -301,8 +309,10 @@ <h3>No Beholder data was found.</h3>
301309
width: 105px;
302310
}
303311

304-
.sidebar {
305-
max-width: 350px;
312+
h4 {
313+
font-size: 14px;
314+
font-weight: normal;
315+
margin: 5px 0;
306316
}
307317

308318
p.disclaimer {
@@ -315,6 +325,9 @@ <h3>No Beholder data was found.</h3>
315325
font-weight: bold;
316326
}
317327

328+
.sidebar {
329+
font-size: 14px;
330+
}
318331
</style>
319332
</template>
320333
<script>
@@ -333,8 +346,6 @@ <h3>No Beholder data was found.</h3>
333346
value: () => new tf_backend.RequestManager(10, 0),
334347
},
335348

336-
////
337-
338349
_values: {
339350
type: String,
340351
value: 'trainable_variables',

‎tensorboard/plugins/custom_scalar/tf_custom_scalar_dashboard/tf-custom-scalar-dashboard.html‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ <h3>The custom scalars dashboard is inactive.</h3>
108108
from tensorboard.plugins.custom_scalar import layout_pb2
109109
...
110110
# This action does not have to be performed at every step, so the action is not
111-
# taken care of by an op in the graph. We only need to specify the layout once.
111+
# taken care of by an op in the graph. We only need to specify the layout once.
112112
# We only need to specify the layout once (instead of per step).
113113
layout_summary = summary_lib.custom_scalar_pb(layout_pb2.Layout(
114114
category=[
@@ -129,7 +129,7 @@ <h3>The custom scalars dashboard is inactive.</h3>
129129
lower='baz_lower/baz/scalar_summary',
130130
upper='baz_upper/baz/scalar_summary'),
131131
],
132-
)),
132+
)),
133133
]),
134134
layout_pb2.Category(
135135
title='trig functions',
@@ -211,21 +211,16 @@ <h3>The custom scalars dashboard is inactive.</h3>
211211
box-sizing: border-box;
212212
}
213213
#tooltip-sorting {
214+
align-items: center;
214215
display: flex;
215216
font-size: 14px;
216-
margin-top: 5px;
217-
}
218-
#tooltip-sorting-label {
219-
margin-top: 13px;
217+
margin-top: 15px;
220218
}
221219
#tooltip-sorting paper-dropdown-menu {
222220
margin-left: 10px;
223221
--paper-input-container-focus-color: var(--tb-orange-strong);
224222
width: 105px;
225223
}
226-
#x-type-selector paper-button {
227-
margin: 5px 3px;
228-
}
229224
.line-item {
230225
display: block;
231226
padding-top: 5px;

‎tensorboard/plugins/histogram/tf_histogram_dashboard/tf-histogram-dashboard.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
id="histogramModeSelector"
4747
name="Histogram mode"
4848
selected-id="{{_histogramMode}}"
49-
>
49+
>
5050
<paper-button id="overlay">overlay</paper-button>
5151
<paper-button id="offset">offset</paper-button>
5252
</tf-option-selector>

‎tensorboard/plugins/image/tf_image_dashboard/tf-image-dashboard.html‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -178,9 +178,13 @@ <h3>No image data was found.</h3>
178178
margin: 80px auto 0 auto;
179179
}
180180
paper-slider {
181-
--paper-slider-knob-start-color: var(--google-blue-700);
182-
--paper-slider-knob-start-border-color: var(--google-blue-700);
183-
--paper-slider-pin-start-color: var(--google-blue-700);
181+
--paper-slider-active-color: var(--tb-orange-strong);
182+
--paper-slider-knob-color: var(--tb-orange-strong);
183+
--paper-slider-knob-start-border-color: var(--tb-orange-strong);
184+
--paper-slider-knob-start-color: var(--tb-orange-strong);
185+
--paper-slider-markers-color: var(--tb-orange-strong);
186+
--paper-slider-pin-color: var(--tb-orange-strong);
187+
--paper-slider-pin-start-color: var(--tb-orange-strong);
184188
}
185189
</style>
186190
</template>

0 commit comments

Comments
 (0)