From af74dfce06b2771165fc69b69057b4f10b75d0fe Mon Sep 17 00:00:00 2001 From: Cameron Dawson Date: Fri, 3 Nov 2017 17:07:41 -0700 Subject: [PATCH] Bug 1408100 - Upgrade to Bootstrap 4 (Trickier customizations) These aren't all THAT tricky. But this required more than just adding a class that Bootstrap provided. All the pixel-peeping to make things look presentable. Note: This is not pixel-perfect with Bootstrap 3.x. I got it to where I think it looks good, but didn't go through extreme measures to keep everything identical. --- ui/css/logviewer.css | 12 +-- ui/css/perf.css | 106 ++++++++++++++++-- ui/css/treeherder-global.css | 10 +- ui/css/treeherder-info-panel.css | 71 +++++++++++-- ui/css/treeherder-navbar-panels.css | 2 +- ui/css/treeherder-navbar.css | 112 ++++++++------------ ui/css/treeherder-notifications.css | 7 +- ui/css/treeherder-pinboard.css | 30 +++++- ui/css/treeherder-resultsets.css | 38 ++++++- ui/js/components/auth.js | 4 +- ui/partials/main/thGlobalTopNavPanel.html | 24 +++-- ui/partials/main/thWatchedRepoNavPanel.html | 13 +-- ui/partials/perf/alertsctrl.html | 11 +- ui/plugins/pluginpanel.html | 36 +++---- 14 files changed, 322 insertions(+), 154 deletions(-) diff --git a/ui/css/logviewer.css b/ui/css/logviewer.css index f3f67d4ec96..9e92e0f6a67 100644 --- a/ui/css/logviewer.css +++ b/ui/css/logviewer.css @@ -79,12 +79,10 @@ body { } .lv-line-no { - width: 3em; -} - -.lv-line-no.label { - border-radius: 0px; - margin: 0em 0.6em 0em 0em; + width: 4em; + padding: 2px 1px 4px 5px; + border-radius: 0; + margin: 0 0.2em 0 0; } .lv-error-line { @@ -156,7 +154,7 @@ div.lv-step { background-color: #FFF; } -.lv-actionbtn span { +.lv-actionbtn span, .navbar-default li > a { color: #777; } diff --git a/ui/css/perf.css b/ui/css/perf.css index 1db8d8ac0a3..246105420f6 100644 --- a/ui/css/perf.css +++ b/ui/css/perf.css @@ -30,6 +30,10 @@ to { opacity: 0; } background: #f8f8f8; } +login { + align-self: center; +} + #graph-chooser { flex: none; width: 240px; padding: 8px; } #data-display { flex: auto; } @@ -143,6 +147,10 @@ to { opacity: 0; } font-weight: bold; } +.subtest-header th { + padding: 5px; +} + .subtest-improvement { background: green; color: white; @@ -195,7 +203,7 @@ to { opacity: 0; } .btn-group-vertical { flex: none; position: relative; - top: 310px; + top: 115px; padding: 3px; } @@ -215,7 +223,7 @@ to { opacity: 0; } .choose-test-list { margin-top: 8px; - height: 200px; + height: 85px; } .test-loading-placeholder { @@ -225,6 +233,11 @@ to { opacity: 0; } /* Compare interface stuff */ +ph-compare-table hr { + margin-top: 20px; + margin-bottom: 20px; +} + .push-information { font-size: 18px; color: #777; @@ -245,10 +258,6 @@ to { opacity: 0; } flex-flow: row; } -.centered-element { - flex: none; -} - .compare-form { align: center; display: flex; @@ -275,9 +284,12 @@ to { opacity: 0; } left: -5px; } -.compare-form .form-group .input-group-btn { - flex: none; - width: 80px; +.compare-form .input-group-btn button:hover { + background-color: darkgrey; +} + +.compare-form .input-group-btn button:focus { + box-shadow: none; } .compare-table td, th { @@ -386,10 +398,15 @@ span.compare-notsure { cursor: pointer; } +.alert-summary { + margin-bottom: 20px; +} + .alert-summary-heading { display: flex; flex-flow: row; padding: 0; + border-bottom: 1px solid transparent; } .alert-summary-header-element { @@ -399,7 +416,8 @@ span.compare-notsure { .alert-summary-title { flex: auto; - padding: 8px 4px; + padding: 9px 4px; + line-height: 19px; } .alert-summary-title .anchor { @@ -407,12 +425,33 @@ span.compare-notsure { font-weight: bold; } +.alert-summary-title .dropdown { + vertical-align: text-bottom; +} + .alert-summary-title .icon-superscript { vertical-align: super; font-size: 0.625em; margin-left: -0.2em; } +.alert-summary-title #push-dropdown { + padding: 0; +} + +.alert-summary .compare-table { + margin-bottom: 0; +} + +.alert-summary .card-body { + border-top: 1px solid #ddd; + padding: 15px; +} + +.alert-summary .card-body p { + margin: 0 0 10px; +} + .dropdown { padding: 0; vertical-align: inherit; @@ -430,9 +469,11 @@ span.compare-notsure { /* Table widths for alerts */ td.alert-checkbox { width: 30px; + padding: 8px; } td.alert-title { text-align: left; + padding: 8px; } td.alert-value { width: 140px; @@ -461,6 +502,10 @@ td.alert-confidence { text-decoration: line-through; } +.alert-selects .form-group { + margin-right: 6px; +} + .compare-table-tooltip .tooltip-inner { max-width: 280px; } @@ -497,3 +542,44 @@ td.alert-confidence { .replicate-graph .mg-category-guides line { stroke: #ffffff; } + +/* The paginator in angular1-ui-bootstrap4 always tries to put chevrons + for the prev/next buttons, but they look all messed up sizing wise. + The paginator SHOULD show the text of Next/Previous, but it's not, so this + is a work-around.*/ +li.page-item .material-icons { + font-size: 0; +} + +li.pagination-prev .material-icons::before { + content: "Previous"; + font-size: 14px; + font-style: normal; +} + +li.pagination-next .material-icons::before { + content: "Next"; + font-size: 14px; + font-style: normal; +} + +.pagination { + margin: 20px 0; +} + +/* angular1-ui-bootstrap4 doesn't have the little arrow at the bottom of + the tooltips, and they removed the element that normally was decorated + to show them. So this adds them back in as an "after" element. + */ +[uib-tooltip-popup].tooltip::after { + content: ""; + width: 0; + height: 0; + position: absolute; + margin-left: 80px; + font-size: 7px; + text-align: center !important; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 5px solid black; +} diff --git a/ui/css/treeherder-global.css b/ui/css/treeherder-global.css index a98083d06d8..5fdd0c42280 100755 --- a/ui/css/treeherder-global.css +++ b/ui/css/treeherder-global.css @@ -50,11 +50,11 @@ a { visibility: hidden; } -/* Presently Tier menu, Similar Jobs panel */ +/* Similar Jobs panel */ .checkbox { min-height: 20px; padding-left: 4px; - padding-top: 4px; + padding-top: 2px; justify-content: center; } @@ -76,14 +76,14 @@ input[type="checkbox"] { cursor: not-allowed; } -/* Spacing for menus with adjacent checkboxes */ -.checkbox-dropdown-menu { - padding-left: 8px; .dropdown-menu-right { left: auto; right: 0; } +.form-control:focus { + border: 1px solid #ced4da; + box-shadow: none; } /* Spacing for menus with adjacent icons */ diff --git a/ui/css/treeherder-info-panel.css b/ui/css/treeherder-info-panel.css index b0d28412d3b..1104bc3633f 100644 --- a/ui/css/treeherder-info-panel.css +++ b/ui/css/treeherder-info-panel.css @@ -42,10 +42,16 @@ div#info-panel .navbar-nav > ul { height: 32px; } -div#info-panel .navbar-nav > li > a, -div#info-panel .navbar-nav > li > button { - padding: 6px 15px; - line-height: 19px; +div#info-panel .navbar-nav.actionbar-nav > li > a, +div#info-panel .navbar-nav.actionbar-nav > li > button { + padding: 8px 15px; + line-height: 16px; +} + +div#info-panel .navbar-nav.tab-headers > li > a, +div#info-panel .navbar-nav.tab-headers > li > button { + padding: 8px 15px; + line-height: 30px; } div#info-panel .navbar-nav > li > button { @@ -79,11 +85,22 @@ div#info-panel .info-panel-navbar > ul.tab-headers > li { border: 1px solid transparent; color: #CED3D9; display: flex; + flex-direction: row; z-index: 100; + height: 33px; +} + +.info-panel-navbar li { + align-self: center; } .info-panel-navbar-tabs { justify-content: space-between; + flex-direction: row; +} + +.tab-headers { + flex-direction: row; } .info-panel-navbar-controls { @@ -92,6 +109,7 @@ div#info-panel .info-panel-navbar > ul.tab-headers > li { .info-panel-navbar .navbar-nav { display: flex; + flex-direction: row; } .info-panel-navbar .navbar-nav > li { @@ -101,6 +119,7 @@ div#info-panel .info-panel-navbar > ul.tab-headers > li { .info-panel-navbar .navbar-nav > li > a, .info-panel-navbar .navbar-nav > li > button { color: #9FA3A5; + padding: 7px 15px; } div#info-panel .navbar-nav > li > a:hover, @@ -130,7 +149,10 @@ div#info-panel .navbar-nav > li > button.disabled:active div#info-panel .info-panel-navbar .navbar-nav > li.active a, div#info-panel .info-panel-navbar .navbar-nav > li.active a:hover, -div#info-panel .info-panel-navbar .navbar-nav > li.active a:focus { +div#info-panel .info-panel-navbar .navbar-nav > li.active a:focus, +div#info-panel .info-panel-navbar > li.active a, +div#info-panel .info-panel-navbar > li.active a:hover, +div#info-panel .info-panel-navbar > li.active a:focus { background-color: #1A4666; color: #EEF0F2; } @@ -166,6 +188,10 @@ div#info-panel .info-panel-navbar .navbar-nav > li.active a:focus { 100% { transform: rotate(1turn); } } +.actionbar-nav { + flex-direction: row; +} + .actionbar-nav > li { /* Override padding on all icons to keep compact */ padding: 0 !important; @@ -173,9 +199,37 @@ div#info-panel .info-panel-navbar .navbar-nav > li.active a:focus { .actionbar-menu { /* We have to override non-responsive bootstrap for correct styling */ - margin-top: 1px !important; + margin-top: 23px; margin-left: 6px; - border-radius: 4px !important; + border-radius: 4px; + top: 0; + right: 0; + left: auto; +} + +#actionbar-menu-btn { + padding: 8px 13px; + margin-right: 1px; +} + +#actionbar-menu-btn:hover { + background-color: #262626; + cursor: pointer; +} + +#actionbar-menu-btn:focus { + box-shadow: none; + border: none; + outline: none; +} + +/* Remove the caret from the ellipses */ +#actionbar-menu-btn.dropdown-toggle::after { + display:none +} + +#job-details-actionbar #actionbar-menu-btn + ul > li { + padding: 0; } /* @@ -423,6 +477,7 @@ ul.failure-summary-list li .btn-xs { .btn-similar-jobs { background: #fff; cursor: default; + font-size: 12px; } .similar_jobs { @@ -626,7 +681,7 @@ th-error-line.ignored { color: darkgrey; } -th-error-line .label-ignored { +th-error-line .badge-ignored { background-color: lightgrey; } diff --git a/ui/css/treeherder-navbar-panels.css b/ui/css/treeherder-navbar-panels.css index 88cc14d2b7f..31ca653fc75 100644 --- a/ui/css/treeherder-navbar-panels.css +++ b/ui/css/treeherder-navbar-panels.css @@ -24,7 +24,7 @@ * Active Filters panel */ .active-filters-bar { - padding: 5px 25px 5px 30px; + padding: 4px 25px 4px 30px; } .active-filters-title { diff --git a/ui/css/treeherder-navbar.css b/ui/css/treeherder-navbar.css index 4ae00f864a4..431460590fd 100644 --- a/ui/css/treeherder-navbar.css +++ b/ui/css/treeherder-navbar.css @@ -10,21 +10,22 @@ #th-global-navbar-top { padding-left: 0; + padding-top: 1px; border-bottom: 1px solid black; + justify-content: space-between; + display: flex; + width: 100%; + background-color: #222; } .navbar { - min-height: 36px; - margin-bottom: 0px; - border-radius: 0px; + padding: 0; +} + +#th-global-navbar-top .dropdown-menu { + top: inherit; } -.navbar .dropdown-menu { - max-height: 600px; - min-width: 80px; - overflow: auto; - margin-top: 10px; - padding-bottom: 8px; .dropdown-menu { min-width: inherit; } @@ -54,28 +55,20 @@ label.dropdown-item { border-left: 0; } -.btn-right-navbar { - font-size: 13px; -} - /* * Right hand upper navbar */ -.navbar-right { - /* Override bootstrap 3.3.5 which doesn't work with the way we align our navbar */ - margin-right: 0px; -} - -.navbar-collapse { - /* Override bootstrap for flush right navbar menus */ - padding-right: 0; -} + .navbar-right { + display: flex; + justify-content: flex-end; + } .nav-menu-btn { margin-right: -4px; padding-left: 14px; padding-right: 14px; + font-size: 13px; } .nav-help-btn { @@ -107,6 +100,8 @@ label.dropdown-item { .nav-login-btn { padding-left: 22px; padding-right: 27px; + color: lightgrey; + cursor: pointer; } .nav-logged-in-btn { @@ -119,6 +114,11 @@ label.dropdown-item { overflow: visible; } +login { + align-items: center; + display: flex; +} + /* * Left hand lower navbar */ @@ -142,6 +142,11 @@ label.dropdown-item { .watched-repo-navbar { overflow: visible; + flex-direction: row; + justify-content: space-between; + width: 100%; + display: flex; + background-color: #354048; } .tree-closed { @@ -160,36 +165,22 @@ label.dropdown-item { color: lightgray; } -th-watched-repo { - /* Required for Chrome */ - float: left; -} - /* * Right hand lower navbar */ -.revision-collapsed { - color: grey; -} - .group-state-nav-icon { width: 7px; display: inline-block; } -.btn-collapse-resultsets { - margin-top: -1px; - margin-bottom: -1px; - font-size: 14px; -} - .btn-nav-filter { padding: 7px 2px; } #filter-chicklets .btn { font-size: 14px; + padding: 3px 2px 2px 2px; } .btn.btn-view-nav.btn-orange-filter-chicklet, @@ -426,48 +417,33 @@ fieldset[disabled] .btn-view-nav-closed.active { font-size: 10px; } -.dropdown.open > #repo-dropdown { - width: 420px; - display: inline-grid; - grid-template-columns: repeat(2, 1fr); - grid-gap: 10px; - grid-auto-rows: minmax(150px, auto); +#repo-dropdown { + min-width: 27rem; + max-height: 35rem; + overflow-x: hidden; } -#repo-dropdown > .repogroup.even { - grid-column: 1; +.dropdown-menu li { + list-style: none; } -#repo-dropdown > .repogroup.odd { - grid-column: 2; +.dropdown-header { + font-size: 12px; } -#repo-dropdown .repogroup { - margin-left: 15px; - margin-top: 5px; +.dropdown-link, .dropdown-link > a { + color: #212529cc; + padding-top: .5rem; } -#filter-dropdown { - padding: 0 10px 10px 10px; +#infra-dropdown { + min-width: 11rem; } -#filter-dropdown .dropdown-header { - padding-top: 10px; -} -#filter-dropdown .dropdown-item { - list-style: none; - cursor: pointer; - padding-top: 6px; - margin: 0 0 1px 0; - font-weight: inherit; +.checkbox-dropdown-menu .repogroup { + padding-left: 0; } -#filter-dropdown .dropdown-item:hover { +.dropdown-item:hover { background-color: #d3d3d34d; } - -#filter-dropdown .dropdown-divider { - border-top: 1px solid #a9a9a980; - padding-bottom: 5px; - margin-top: 7px; -} diff --git a/ui/css/treeherder-notifications.css b/ui/css/treeherder-notifications.css index 81289b7a797..4d109b85c9a 100644 --- a/ui/css/treeherder-notifications.css +++ b/ui/css/treeherder-notifications.css @@ -18,10 +18,11 @@ } #notification-box button.close { - position: relative; - top: -4px; - right: -8px; color: inherit; + line-height: 13px; + font-size: 18px; + padding-left: 10px; + margin-right: -7px; } /* Notification icon */ diff --git a/ui/css/treeherder-pinboard.css b/ui/css/treeherder-pinboard.css index cc870203e2b..de86e9bc3ba 100644 --- a/ui/css/treeherder-pinboard.css +++ b/ui/css/treeherder-pinboard.css @@ -1,7 +1,14 @@ -.pinboard-btn { - margin-top: -1px; - background-color: #e6eef5 !important; - color: #252c33 !important; +#job-tabs-navbar .info-panel-navbar #pinboard-btn { + margin-top: -2px; + background-color: #e6eef5; + color: #252c33; + line-height: 30px; + cursor: pointer; +} + +.pinboard-btn-text { + margin: 0 15px; + font-size: 12px; } .pin-count-group { @@ -198,6 +205,10 @@ width: 70px; } +.save-btn-group { + margin-top: -22px; +} + .save-btn { width: 81px; } @@ -206,6 +217,17 @@ width: 18px; } +.save-btn-dropdown > .caret { + margin-left: -4px; +} + +.save-btn-dropdown-menu { + right: 0; + left: -88px !important; + transform: inherit !important; + top: 22px !important; +} + .btn-group + .btn + .save-btn-dropdown { margin-left: -5px; } diff --git a/ui/css/treeherder-resultsets.css b/ui/css/treeherder-resultsets.css index ecc184dfd3a..4ecf6160831 100644 --- a/ui/css/treeherder-resultsets.css +++ b/ui/css/treeherder-resultsets.css @@ -42,7 +42,6 @@ margin-top: 2px; white-space: normal; width: 100%; - position: relative; } .result-counts { @@ -63,6 +62,13 @@ .btn-resultset { color: #666; background-color: transparent; + padding-left: 9px; + padding-right: 10px; +} + +.btn-resultset.btn:focus { + -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); + box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); } .btn-resultset:hover { @@ -82,6 +88,11 @@ fieldset[disabled] .btn-resultset:hover { color: white; } +th-action-button .btn-resultset { + padding-left: 6px; + font-size: 14px; +} + /* Encompasses unknown push,resultset,repo */ .unknown-message-body { padding-top: 10px; @@ -109,8 +120,11 @@ fieldset[disabled] .btn-resultset:hover { * Revision list */ -.revision-list { +revisions { overflow: hidden; +} + +.revision-list { white-space: nowrap; } @@ -164,6 +178,7 @@ fieldset[disabled] .btn-resultset:hover { .platform { font-size: 12px; padding: 0 5px 0 0; + line-height: 15px; width: 14.5em; min-width: 14.5em; overflow: hidden; @@ -172,8 +187,11 @@ fieldset[disabled] .btn-resultset:hover { .job-row { display: table-cell; + line-height: 15px; white-space: normal; word-break: normal; + padding-top: 0; + padding-bottom: 0; } .job-list table { @@ -187,3 +205,19 @@ fieldset[disabled] .btn-resultset:hover { .job-list table tr:nth-child(even) { background: #f8f8f8; } + +.get-next { + flex-direction: row; + font-size: 14px; + background-color: #f5f5f5; + border: 1px solid #e3e3e3; +} + +.get-next > span { + align-self: center; + padding-right: 8px; +} + +.get-next .btn { + font-size: 12px; +} diff --git a/ui/js/components/auth.js b/ui/js/components/auth.js index 2450d09319e..e416a245064 100644 --- a/ui/js/components/auth.js +++ b/ui/js/components/auth.js @@ -24,9 +24,9 @@ treeherder.component("login", { - Login/Register + ng-click="$ctrl.login()">Login/Register Logging In... diff --git a/ui/partials/main/thGlobalTopNavPanel.html b/ui/partials/main/thGlobalTopNavPanel.html index 6780aeb1e36..d9d69366ada 100644 --- a/ui/partials/main/thGlobalTopNavPanel.html +++ b/ui/partials/main/thGlobalTopNavPanel.html @@ -64,16 +64,20 @@ data-toggle="dropdown" class="btn btn-view-nav btn-right-navbar nav-menu-btn dropdown-toggle">Repos - + + + diff --git a/ui/partials/main/thWatchedRepoNavPanel.html b/ui/partials/main/thWatchedRepoNavPanel.html index c3666e9ed11..158080d6b00 100644 --- a/ui/partials/main/thWatchedRepoNavPanel.html +++ b/ui/partials/main/thWatchedRepoNavPanel.html @@ -1,6 +1,5 @@ - -
- +
+
    diff --git a/ui/plugins/pluginpanel.html b/ui/plugins/pluginpanel.html index 4ec26c791d1..b0f1d8310eb 100755 --- a/ui/plugins/pluginpanel.html +++ b/ui/plugins/pluginpanel.html @@ -68,17 +68,12 @@
  • - - + + +
    • -