Further modify file-list CSS
Change-Id: I3dc96446ea307f4d6ae5bf60c00c290aa59e290e
diff --git a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
index f6966683..e4eea51 100644
--- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
+++ b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
@@ -200,13 +200,6 @@
.showOnEdit {
display: none;
}
- .patchInfo {
- border: 1px solid #ddd;
- margin: 1em var(--default-horizontal-margin);
- }
- #fileList {
- padding: 0 calc(var(--default-horizontal-margin) / 2) .5em;
- }
.scrollable {
overflow: auto;
}
@@ -226,6 +219,9 @@
min-width: 0;
}
}
+ .patchInfo {
+ margin-top: 1em;
+ }
/* NOTE: If you update this breakpoint, also update the
BREAKPOINT_RELATED_SMALL in the JS */
@media screen and (max-width: 50em) {
diff --git a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.html b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.html
index b9c1328..2befcb2 100644
--- a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.html
+++ b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.html
@@ -44,8 +44,9 @@
display: initial;
}
.patchInfo-header {
- background-color: #f6f6f6;
- border-bottom: 1px solid #ebebeb;
+ background-color: #fafafa;
+ border-bottom: 1px solid #ddd;
+ border-top: 1px solid #ddd;
display: flex;
height: 3.2em;
padding: 0 calc(var(--default-horizontal-margin) / 2);
@@ -56,9 +57,16 @@
margin: 0 .25em;
width: 100%;
}
+ .patchInfo-left {
+ align-items: center;
+ display: flex;
+ }
.latestPatchContainer {
display: none;
}
+ .latestPatchContainer a {
+ text-decoration: none;
+ }
gr-editable-label.descriptionLabel {
max-width: 100%;
}
@@ -79,6 +87,13 @@
.editLoaded .showOnEdit {
display: initial;
}
+ .patchInfo-header-wrapper .container {
+ align-items: center;
+ display: flex;
+ }
+ #modeSelect {
+ margin-left: .1em;
+ }
.fileList-header {
align-items: center;
display: flex;
@@ -95,7 +110,13 @@
justify-content: flex-end;
}
.separator {
- margin: 0 .25em;
+ background-color: rgba(0, 0, 0, .3);
+ height: 1.5em;
+ margin: 0 .4em;
+ width: 1px;
+ }
+ .separator.transparent {
+ background-color: transparent;
}
.expandInline {
padding-right: .25em;
@@ -118,7 +139,7 @@
</style>
<div class$="patchInfo-header [[_computeEditLoadedClass(editLoaded)]] [[_computePatchInfoClass(patchNum, allPatchSets)]]">
<div class="patchInfo-header-wrapper">
- <div>
+ <div class="patchInfo-left">
<span class="label">Files</span>
<gr-patch-range-select
id="rangeSelect"
@@ -130,23 +151,23 @@
revisions="[[change.revisions]]"
on-patch-range-change="_handlePatchChange">
</gr-patch-range-select>
- /
+ <span class="separator"></span>
<gr-commit-info
change="[[change]]"
server-config="[[serverConfig]]"
commit-info="[[commitInfo]]"></gr-commit-info>
- <span class="latestPatchContainer">
- /
+ <span class="container latestPatchContainer">
+ <span class="separator"></span>
<a href$="[[changeUrl]]">Go to latest patch set</a>
</span>
- <span class="downloadContainer desktop">
- /
+ <span class="container downloadContainer desktop">
+ <span class="separator"></span>
<gr-button link
class="download"
on-tap="_handleDownloadTap">Download</gr-button>
</span>
- <span class="descriptionContainer hideOnEdit">
- /
+ <span class="container descriptionContainer hideOnEdit">
+ <span class="separator"></span>
<gr-editable-label
id="descriptionLabel"
class="descriptionLabel"
@@ -176,7 +197,7 @@
id="expandBtn"
link
on-tap="_expandAllDiffs">Show diffs</gr-button>
- <span class="separator">/</span>
+ <span class="separator"></span>
<gr-button
id="collapseBtn"
link
@@ -188,7 +209,7 @@
Bulk actions disabled because there are too many files.
</div>
</template>
- <span class="separator">/</span>
+ <span class="separator"></span>
<gr-select
id="modeSelect"
bind-value="{{diffViewMode}}">
diff --git a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
index c450fee..1a164b6 100644
--- a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
+++ b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
@@ -39,10 +39,10 @@
}
.row {
align-items: center;
- border-top: 1px solid #eee;
+ border-top: 1px solid #ddd;
display: flex;
height: 2.25em;
- padding: 0 .25em;
+ padding: 0 calc(var(--default-horizontal-margin) / 2 + .25em);
}
:host(.loading) .row {
opacity: .5;
diff --git a/polygerrit-ui/app/elements/change/gr-message/gr-message.html b/polygerrit-ui/app/elements/change/gr-message/gr-message.html
index c0e55ef..845bdaf 100644
--- a/polygerrit-ui/app/elements/change/gr-message/gr-message.html
+++ b/polygerrit-ui/app/elements/change/gr-message/gr-message.html
@@ -28,7 +28,7 @@
<template>
<style include="shared-styles">
:host {
- border-top: 1px solid #ddd;
+ border-bottom: 1px solid #ddd;
display: block;
position: relative;
cursor: pointer;
diff --git a/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.html b/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.html
index 2eed88b..b2beb47 100644
--- a/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.html
+++ b/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.html
@@ -28,9 +28,13 @@
display: block;
}
.header {
+ align-items: center;
+ background-color: #fafafa;
+ border-bottom: 1px solid #ddd;
+ border-top: 1px solid #ddd;
display: flex;
+ height: 3.2em;
justify-content: space-between;
- margin-bottom: .35em;
}
.header,
#messageControlsContainer {
@@ -45,25 +49,40 @@
}
#messageControlsContainer {
align-items: center;
- background-color: #fef;
+ border-bottom: 1px solid #ddd;
display: flex;
+ height: 2.25em;
justify-content: center;
}
#messageControlsContainer gr-button {
- padding: 0.4em;
+ padding: 0.4em 0;
+ }
+ .separator {
+ background-color: rgba(0, 0, 0, .3);
+ height: 1.5em;
+ margin: 0 .4em;
+ width: 1px;
+ }
+ .separator.transparent {
+ background-color: transparent;
+ }
+ .container {
+ align-items: center;
+ display: flex;
}
</style>
<div class="header">
<h3>Messages</h3>
- <div class="messageListControls">
+ <div class="messageListControls container">
<gr-button id="collapse-messages" link
on-tap="_handleExpandCollapseTap">
[[_computeExpandCollapseMessage(_expanded)]]
</gr-button>
<span
id="automatedMessageToggleContainer"
+ class="container"
hidden$="[[!_hasAutomatedMessages(messages)]]">
- /
+ <span class="transparent separator"></span>
<gr-button id="automatedMessageToggle" link
on-tap="_handleAutomatedMessageToggleTap">
[[_computeAutomatedToggleText(_hideAutomated)]]
@@ -78,8 +97,9 @@
[[_computeNumMessagesText(_visibleMessages, _processedMessages, _hideAutomated, _visibleMessages.length)]]
</gr-button>
<span
+ class="container"
hidden$="[[_computeIncrementHidden(_visibleMessages, _processedMessages, _hideAutomated, _visibleMessages.length)]]">
- /
+ <span class="transparent separator"></span>
<gr-button id="incrementMessagesBtn" link
on-tap="_handleIncrementShownMessages">
[[_computeIncrementText(_visibleMessages, _processedMessages, _hideAutomated, _visibleMessages.length)]]
diff --git a/polygerrit-ui/app/elements/diff/gr-patch-range-select/gr-patch-range-select.html b/polygerrit-ui/app/elements/diff/gr-patch-range-select/gr-patch-range-select.html
index 4f90502..08e6c2c 100644
--- a/polygerrit-ui/app/elements/diff/gr-patch-range-select/gr-patch-range-select.html
+++ b/polygerrit-ui/app/elements/diff/gr-patch-range-select/gr-patch-range-select.html
@@ -30,6 +30,9 @@
select {
max-width: 15em;
}
+ .arrow {
+ margin: 0 .5em;
+ }
@media screen and (max-width: 50em) {
.filesWeblinks {
display: none;
@@ -49,7 +52,7 @@
href$="[[weblink.url]]">[[weblink.name]]</a>
</template>
</span>
- →
+ <span class="arrow">→</span>
<span class="patchRange">
<gr-dropdown-list
id="patchNumDropdown"
diff --git a/polygerrit-ui/app/elements/shared/gr-button/gr-button.html b/polygerrit-ui/app/elements/shared/gr-button/gr-button.html
index f63d7923..03cc983 100644
--- a/polygerrit-ui/app/elements/shared/gr-button/gr-button.html
+++ b/polygerrit-ui/app/elements/shared/gr-button/gr-button.html
@@ -88,14 +88,15 @@
}
:host:not([down-arrow]) .downArrow {display: none; }
:host([down-arrow]) .downArrow {
+ border-top: .36em solid var(--gr-button-arrow-color, #ccc);
border-left: .36em solid transparent;
border-right: .36em solid transparent;
- border-top: .36em solid #ccc;
+ margin-bottom: .05em;
margin-left: .5em;
transition: border-top-color 200ms;
}
- :host([down-arrow]):hover .downArrow {
- border-top-color: #666;
+ :host([down-arrow]) paper-button:hover .downArrow {
+ border-top-color: var(--gr-button-arrow-hover-color, #666);
}
:host([loading]) paper-button,
:host([disabled]) paper-button {
diff --git a/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html b/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html
index 8a3de33..91c2def 100644
--- a/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html
+++ b/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html
@@ -37,12 +37,6 @@
-webkit-user-select: text;
user-select: text;
}
- .downArrow {
- display: inline-block;
- font-size: .6em;
- user-select: none;
- vertical-align: middle;
- }
.dropdown-trigger {
cursor: pointer;
padding: 0;
@@ -52,7 +46,8 @@
box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
max-height: 70vh;
margin-top: 1.5em;
- width: 266px;
+ min-width: 266px;
+ max-width: 300px;
}
paper-listbox {
--paper-listbox: {
@@ -77,14 +72,15 @@
background-color: #f2f2f2;
}
}
+ gr-button {
+ --gr-button-arrow-color: var(--color-link);
+ --gr-button-arrow-hover-color: var(--color-link-hover);
+ }
paper-item:not(:last-of-type) {
border-bottom: 1px solid #ddd;
}
#trigger {
- color: black;
- font: inherit;
padding: .3em 0;
- text-decoration: none;
}
.bottomContent {
color: rgba(0,0,0,.54);
@@ -130,15 +126,13 @@
}
</style>
<gr-button
+ down-arrow
link
id="trigger"
class="dropdown-trigger"
on-tap="_showDropdownTapHandler"
slot="dropdown-trigger">
<span>[[text]]</span>
- <span
- class="downArrow"
- on-tap="_showDropdownTapHandler">▼</span>
</gr-button>
<iron-dropdown
id="dropdown"
