[perf] Tighten up buttons.
Also handle how that flows down to all the child elements.
Change-Id: Ic4cc10ca793ec86c71c77576209736d83a99b26c
Reviewed-on: https://skia-review.googlesource.com/c/buildbot/+/302218
Reviewed-by: Joe Gregorio <jcgregorio@google.com>
diff --git a/perf/modules/alerts-page-sk/alerts-page-sk.scss b/perf/modules/alerts-page-sk/alerts-page-sk.scss
index af0b499..18ced82 100644
--- a/perf/modules/alerts-page-sk/alerts-page-sk.scss
+++ b/perf/modules/alerts-page-sk/alerts-page-sk.scss
@@ -37,6 +37,17 @@
td > paramset-sk div {
display: block;
}
+
+ .dialogButtons {
+ display: flex;
+ justify-content: flex-end;
+ margin: 8px;
+ }
+
+ .dialogButtons button {
+ font-size: 110%;
+ margin: 8px;
+ }
}
alerts-page-sk > {
diff --git a/perf/modules/alerts-page-sk/alerts-page-sk.ts b/perf/modules/alerts-page-sk/alerts-page-sk.ts
index c00f988..97548a4 100644
--- a/perf/modules/alerts-page-sk/alerts-page-sk.ts
+++ b/perf/modules/alerts-page-sk/alerts-page-sk.ts
@@ -38,7 +38,7 @@
.paramset=${ele.paramset}
.config=${ele.cfg}
></alert-config-sk>
- <div class="buttons">
+ <div class="dialogButtons">
<button @click=${ele.cancel}>Cancel</button>
<button @click=${ele.accept}>Accept</button>
</div>
diff --git a/perf/modules/calendar-input-sk/calendar-input-sk.scss b/perf/modules/calendar-input-sk/calendar-input-sk.scss
index ef92128..7f8059b 100644
--- a/perf/modules/calendar-input-sk/calendar-input-sk.scss
+++ b/perf/modules/calendar-input-sk/calendar-input-sk.scss
@@ -10,7 +10,7 @@
display: inline-block;
}
- > button {
+ button.calendar {
margin: 0;
min-width: 0;
padding: 0;
diff --git a/perf/modules/calendar-input-sk/calendar-input-sk.ts b/perf/modules/calendar-input-sk/calendar-input-sk.ts
index 17a921b..326cef8 100644
--- a/perf/modules/calendar-input-sk/calendar-input-sk.ts
+++ b/perf/modules/calendar-input-sk/calendar-input-sk.ts
@@ -33,6 +33,7 @@
</span>
</label>
<button
+ class="calendar"
@click=${ele.openHandler}
title="Open calendar dialog to choose the date."
>
@@ -42,8 +43,7 @@
<calendar-sk
@change=${ele.calendarChangeHandler}
.displayDate=${ele.displayDate}
- >
- </calendar-sk>
+ ></calendar-sk>
<button @click=${ele.dialogCancelHandler}>Cancel</button>
</dialog>
`;
diff --git a/perf/modules/calendar-sk/calendar-sk.scss b/perf/modules/calendar-sk/calendar-sk.scss
index 3fc019a..f9606aa 100644
--- a/perf/modules/calendar-sk/calendar-sk.scss
+++ b/perf/modules/calendar-sk/calendar-sk.scss
@@ -32,7 +32,7 @@
opacity: 0.6;
}
- button {
+ table.calendar button {
cursor: pointer;
margin: 0;
padding: 0em;
@@ -40,6 +40,7 @@
min-height: 0;
height: 20px;
width: 20px;
+ margin: 0;
text-transform: none;
display: flex;
align-items: center;
diff --git a/perf/modules/calendar-sk/calendar-sk.ts b/perf/modules/calendar-sk/calendar-sk.ts
index c54343f..73a5678 100644
--- a/perf/modules/calendar-sk/calendar-sk.ts
+++ b/perf/modules/calendar-sk/calendar-sk.ts
@@ -82,7 +82,7 @@
export class CalendarSk extends ElementSk {
private static template = (ele: CalendarSk) => html`
- <table>
+ <table class="calendar">
<tr>
<th>
<button
@@ -155,14 +155,16 @@
if (date < 1 || date > daysInMonth) {
return html``;
}
- return html`<button
- @click=${ele.dateClick}
- data-date=${date}
- tabindex=${selected ? 0 : -1}
- aria-selected=${selected}
- >
- ${date}
- </button>`;
+ return html`
+ <button
+ @click=${ele.dateClick}
+ data-date=${date}
+ tabindex=${selected ? 0 : -1}
+ aria-selected=${selected}
+ >
+ ${date}
+ </button>
+ `;
};
private static rowTemplate = (ele: CalendarSk, weekIndex: number) => {
@@ -177,21 +179,30 @@
const daysInMonth = getNumberOfDaysInMonth(year, monthIndex);
const selectedDate = ele._displayDate.getDate();
const currentDate = new CalendarDate(ele._displayDate);
- return html`<tr>
- ${sevenDaysInAWeek.map((i) => {
- const date = 7 * weekIndex + i + 1 - firstDayOfTheMonthIndex;
- currentDate.date = date;
- const selected = selectedDate === date;
- return html`<td
- class="
+ return html`
+ <tr>
+ ${sevenDaysInAWeek.map((i) => {
+ const date = 7 * weekIndex + i + 1 - firstDayOfTheMonthIndex;
+ currentDate.date = date;
+ const selected = selectedDate === date;
+ return html`
+ <td
+ class="
${currentDate.equal(today) ? 'today' : ''}
${selected ? 'selected' : ''}
"
- >
- ${CalendarSk.buttonForDateTemplate(ele, date, daysInMonth, selected)}
- </td>`;
- })}
- </tr>`;
+ >
+ ${CalendarSk.buttonForDateTemplate(
+ ele,
+ date,
+ daysInMonth,
+ selected
+ )}
+ </td>
+ `;
+ })}
+ </tr>
+ `;
};
private _displayDate: Date = new Date();
@@ -263,16 +274,20 @@
const longFormatter = new Intl.DateTimeFormat(this._locale, {
weekday: 'long',
});
- this._weekDayHeader = html`<tr class="weekdayHeader">
- ${sevenDaysInAWeek.map(
- (i) =>
- html`<td>
- <span abbr="${longFormatter.format(new Date(2020, 2, i + 1))}">
- ${narrowFormatter.format(new Date(2020, 2, i + 1))}
- </span>
- </td>`
- )}
- </tr>`;
+ this._weekDayHeader = html`
+ <tr class="weekdayHeader">
+ ${sevenDaysInAWeek.map(
+ (i) =>
+ html`
+ <td>
+ <span abbr="${longFormatter.format(new Date(2020, 2, i + 1))}">
+ ${narrowFormatter.format(new Date(2020, 2, i + 1))}
+ </span>
+ </td>
+ `
+ )}
+ </tr>
+ `;
}
private dateClick(e: MouseEvent) {
diff --git a/perf/modules/cluster-summary2-sk/cluster-summary2-sk.scss b/perf/modules/cluster-summary2-sk/cluster-summary2-sk.scss
index 8ce372f..10d8562 100644
--- a/perf/modules/cluster-summary2-sk/cluster-summary2-sk.scss
+++ b/perf/modules/cluster-summary2-sk/cluster-summary2-sk.scss
@@ -57,6 +57,9 @@
border: solid var(--light-gray) 1px;
display: flex;
flex-flow: wrap column;
+ triage2-sk {
+ margin: 8px;
+ }
}
#status.disabled .disabledMessage {
diff --git a/perf/modules/domain-picker-sk/domain-picker-sk.scss b/perf/modules/domain-picker-sk/domain-picker-sk.scss
index 84c8db5..a69c741 100644
--- a/perf/modules/domain-picker-sk/domain-picker-sk.scss
+++ b/perf/modules/domain-picker-sk/domain-picker-sk.scss
@@ -16,6 +16,7 @@
.ranges > label {
display: block;
+ margin: 4px;
}
.ranges > label > span.prefix {
diff --git a/perf/modules/themes/themes.scss b/perf/modules/themes/themes.scss
index 9570d02..4aa02e9 100644
--- a/perf/modules/themes/themes.scss
+++ b/perf/modules/themes/themes.scss
@@ -14,12 +14,19 @@
--secondary: var(--green-500);
--primary-variant: var(--light-blue-600);
+ input {
+ border: solid 1px var(--on-surface);
+ color: solid 1px var(--on-surface);
+ background: solid 1px var(--surface);
+ display: inline-block;
+ }
+
button {
min-width: auto;
text-align: center;
text-transform: none;
outline: none;
- padding: 2px;
+ padding: 4px;
margin: 2px;
height: auto;
}
diff --git a/perf/modules/triage2-sk/triage2-sk.scss b/perf/modules/triage2-sk/triage2-sk.scss
index 80451d1..d7dd0c0 100644
--- a/perf/modules/triage2-sk/triage2-sk.scss
+++ b/perf/modules/triage2-sk/triage2-sk.scss
@@ -44,6 +44,7 @@
.positive {
fill: var(--green-700);
+ padding: 4px;
}
.negative {
