Skip to content

Commit

Permalink
Bug 1408100 - Upgrade to Bootstrap 4 (Basic changes)
Browse files Browse the repository at this point in the history 
This adds the upgrade to Bootstrap 4, and some basic changes.
These changes are more simplistic things like:

* Classes that were renamed
* Adding classes that are now needed (dropdown-item, etc)
* Change an item from a button to a span
* Changing order of items (modal header close button, etc)
* CSS class syntax changes

This hopefully reduces some noise from the next commit.
The next commit will have more of the "tweaking" changes
or areas that required more robust changes to make them work.
  • Loading branch information
Cameron Dawson committed Nov 7, 2017
1 parent 7a98d28 commit 801e6d3
Show file tree
Hide file tree
Showing 46 changed files with 371 additions and 318 deletions.
3 changes: 2 additions & 1 deletion neutrino-custom/base.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ module.exports = neutrino => {
// Include files from node_modules in the separate, more-cacheable vendor chunk:
const jsDeps = [
'angular', 'angular-cookies', 'angular-local-storage', 'angular-resource',
'angular-route', 'angular-sanitize', 'angular-toarrayfilter', 'angular-ui-bootstrap',
'angular-route', 'angular-sanitize', 'angular-toarrayfilter', 'angular1-ui-bootstrap4',
'angular-ui-router', 'bootstrap/dist/js/bootstrap', 'hawk', 'jquery', 'jquery.scrollto',
'js-yaml', 'mousetrap', 'react', 'react-dom', 'taskcluster-client', 'numeral', 'metrics-graphics'];
jsDeps.map(dep =>
Expand Down Expand Up @@ -166,6 +166,7 @@ module.exports = neutrino => {
jQuery: require.resolve('jquery'),
'window.$': require.resolve('jquery'),
'window.jQuery': require.resolve('jquery'),
Popper: ['popper.js', 'default'],
React: require.resolve('react'),
_: require.resolve('lodash'),
treeherder: require.resolve(path.join(UI, 'js/treeherder.js')),
Expand Down
5 changes: 3 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@
"angular-route": "1.5.11",
"angular-sanitize": "1.5.11",
"angular-toarrayfilter": "1.0.2",
"angular-ui-bootstrap": "1.3.3",
"angular-ui-router": "0.4.3",
"bootstrap": "3.3.7",
"angular1-ui-bootstrap4": "2.4.22",
"bootstrap": "4.0.0-beta.2",
"deepmerge": "1.5.2",
"font-awesome": "4.7.0",
"hawk": "6.0.2",
Expand All @@ -39,6 +39,7 @@
"neutrino-preset-react": "4.2.3",
"ngreact": "0.5.0",
"numeral": "2.0.6",
"popper.js": "1.12.6",
"raw-loader": "0.5.1",
"react": "15.3.2",
"react-dom": "15.3.2",
Expand Down
2 changes: 1 addition & 1 deletion tests/ui/unit/init.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ require('angular-toarrayfilter');
require('mousetrap');
require('js-yaml');
require('ngreact');
require('angular-ui-bootstrap');
require('angular1-ui-bootstrap4');
require('angular-marked');
require('../../../ui/vendor/resizer.js');

Expand Down
14 changes: 14 additions & 0 deletions ui/css/logviewer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,20 @@ body {
padding-bottom: 8px;
}

.navbar-default {
background-color: #f8f8f8;
border-color: #e7e7e7;
padding: 0;
}

.navbar-row {
flex-direction: row;
}

.navbar-row li {
align-self: center;
}

.navbar-nav > li > a {
padding: 10px 15px;
font-size: 12px;
Expand Down
2 changes: 1 addition & 1 deletion ui/css/perf.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -261,7 +261,7 @@ to { opacity: 0; }
flex: none;
}

.compare-form .form-group .panel {
.compare-form .form-group .card {
flex: none;
width: 360px;
height: 250px;
Expand Down
13 changes: 12 additions & 1 deletion ui/css/treeherder-global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ a {
overflow-x: hidden;
}

.pagination, .carousel, .panel-title a {
.pagination, .panel-title a {
cursor: pointer;
}

Expand Down Expand Up @@ -79,6 +79,11 @@ input[type="checkbox"] {
/* Spacing for menus with adjacent checkboxes */
.checkbox-dropdown-menu {
padding-left: 8px;
.dropdown-menu-right {
left: auto;
right: 0;
}

}

/* Spacing for menus with adjacent icons */
Expand Down Expand Up @@ -252,6 +257,12 @@ input[type="checkbox"] {
font-size: 12px;
}

.btn-sm {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
}

.btn-light-bordered {
border: 1px solid darkgrey;
background-color: white;
Expand Down
112 changes: 56 additions & 56 deletions ui/css/treeherder-job-buttons.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -210,10 +210,10 @@
.btn-orange.disabled:focus,
.btn-orange.disabled:active,
.btn-orange.disabled.active,
.btn-orange[disabled]:hover,
.btn-orange[disabled]:focus,
.btn-orange[disabled]:active,
.btn-orange[disabled].active,
.btn-orange:disabled:hover,
.btn-orange:disabled:focus,
.btn-orange:disabled:active,
.btn-orange:disabled.active,
fieldset[disabled] .btn-orange:hover,
fieldset[disabled] .btn-orange:focus,
fieldset[disabled] .btn-orange:active,
Expand Down Expand Up @@ -242,10 +242,10 @@ fieldset[disabled] .btn-orange.active {
.btn-orange-classified.disabled:focus,
.btn-orange-classified.disabled:active,
.btn-orange-classified.disabled.active,
.btn-orange-classified[disabled]:hover,
.btn-orange-classified[disabled]:focus,
.btn-orange-classified[disabled]:active,
.btn-orange-classified[disabled].active,
.btn-orange-classified:disabled:hover,
.btn-orange-classified:disabled:focus,
.btn-orange-classified:disabled:active,
.btn-orange-classified:disabled.active,
fieldset[disabled] .btn-orange-classified:hover,
fieldset[disabled] .btn-orange-classified:focus,
fieldset[disabled] .btn-orange-classified:active,
Expand All @@ -272,10 +272,10 @@ fieldset[disabled] .btn-orange-classified.active {
.btn-red.disabled:focus,
.btn-red.disabled:active,
.btn-red.disabled.active,
.btn-red[disabled]:hover,
.btn-red[disabled]:focus,
.btn-red[disabled]:active,
.btn-red[disabled].active,
.btn-red:disabled:hover,
.btn-red:disabled:focus,
.btn-red:disabled:active,
.btn-red:disabled.active,
fieldset[disabled] .btn-red:hover,
fieldset[disabled] .btn-red:focus,
fieldset[disabled] .btn-red:active,
Expand All @@ -302,10 +302,10 @@ fieldset[disabled] .btn-red.active {
.btn-red-classified.disabled:focus,
.btn-red-classified.disabled:active,
.btn-red-classified.disabled.active,
.btn-red-classified[disabled]:hover,
.btn-red-classified[disabled]:focus,
.btn-red-classified[disabled]:active,
.btn-red-classified[disabled].active,
.btn-red-classified:disabled:hover,
.btn-red-classified:disabled:focus,
.btn-red-classified:disabled:active,
.btn-red-classified:disabled.active,
fieldset[disabled] .btn-red-classified:hover,
fieldset[disabled] .btn-red-classified:focus,
fieldset[disabled] .btn-red-classified:active,
Expand Down Expand Up @@ -339,10 +339,10 @@ fieldset[disabled] .btn-red-classified.active {
.btn-dkblue.disabled:focus,
.btn-dkblue.disabled:active,
.btn-dkblue.disabled.active,
.btn-dkblue[disabled]:hover,
.btn-dkblue[disabled]:focus,
.btn-dkblue[disabled]:active,
.btn-dkblue[disabled].active,
.btn-dkblue:disabled:hover,
.btn-dkblue:disabled:focus,
.btn-dkblue:disabled:active,
.btn-dkblue:disabled.active,
fieldset[disabled] .btn-dkblue:hover,
fieldset[disabled] .btn-dkblue:focus,
fieldset[disabled] .btn-dkblue:active,
Expand Down Expand Up @@ -374,10 +374,10 @@ fieldset[disabled] .btn-dkblue.active {
.btn-green.disabled:focus,
.btn-green.disabled:active,
.btn-green.disabled.active,
.btn-green[disabled]:hover,
.btn-green[disabled]:focus,
.btn-green[disabled]:active,
.btn-green[disabled].active,
.btn-green:disabled:hover,
.btn-green:disabled:focus,
.btn-green:disabled:active,
.btn-green:disabled.active,
fieldset[disabled] .btn-green:hover,
fieldset[disabled] .btn-green:focus,
fieldset[disabled] .btn-green:active,
Expand All @@ -403,10 +403,10 @@ fieldset[disabled] .btn-green.active {
.btn-purple.disabled:focus,
.btn-purple.disabled:active,
.btn-purple.disabled.active,
.btn-purple[disabled]:hover,
.btn-purple[disabled]:focus,
.btn-purple[disabled]:active,
.btn-purple[disabled].active,
.btn-purple:disabled:hover,
.btn-purple:disabled:focus,
.btn-purple:disabled:active,
.btn-purple:disabled.active,
fieldset[disabled] .btn-purple:hover,
fieldset[disabled] .btn-purple:focus,
fieldset[disabled] .btn-purple:active,
Expand Down Expand Up @@ -434,10 +434,10 @@ fieldset[disabled] .btn-purple.active {
.btn-purple-classified.disabled:focus,
.btn-purple-classified.disabled:active,
.btn-purple-classified.disabled.active,
.btn-purple-classified[disabled]:hover,
.btn-purple-classified[disabled]:focus,
.btn-purple-classified[disabled]:active,
.btn-purple-classified[disabled].active,
.btn-purple-classified:disabled:hover,
.btn-purple-classified:disabled:focus,
.btn-purple-classified:disabled:active,
.btn-purple-classified:disabled.active,
fieldset[disabled] .btn-purple-classified:hover,
fieldset[disabled] .btn-purple-classified:focus,
fieldset[disabled] .btn-purple-classified:active,
Expand Down Expand Up @@ -470,10 +470,10 @@ fieldset[disabled] .btn-purple-classified.active {
.btn-ltblue.disabled:focus,
.btn-ltblue.disabled:active,
.btn-ltblue.disabled.active,
.btn-ltblue[disabled]:hover,
.btn-ltblue[disabled]:focus,
.btn-ltblue[disabled]:active,
.btn-ltblue[disabled].active,
.btn-ltblue:disabled:hover,
.btn-ltblue:disabled:focus,
.btn-ltblue:disabled:active,
.btn-ltblue:disabled.active,
fieldset[disabled] .btn-ltblue:hover,
fieldset[disabled] .btn-ltblue:focus,
fieldset[disabled] .btn-ltblue:active,
Expand Down Expand Up @@ -504,10 +504,10 @@ fieldset[disabled] .btn-ltblue.active {
.btn-ltgray.disabled:focus,
.btn-ltgray.disabled:active,
.btn-ltgray.disabled.active,
.btn-ltgray[disabled]:hover,
.btn-ltgray[disabled]:focus,
.btn-ltgray[disabled]:active,
.btn-ltgray[disabled].active,
.btn-ltgray:disabled:hover,
.btn-ltgray:disabled:focus,
.btn-ltgray:disabled:active,
.btn-ltgray:disabled.active,
fieldset[disabled] .btn-ltgray:hover,
fieldset[disabled] .btn-ltgray:focus,
fieldset[disabled] .btn-ltgray:active,
Expand Down Expand Up @@ -538,10 +538,10 @@ fieldset[disabled] .btn-ltgray.active {
.btn-mdgray.disabled:focus,
.btn-mdgray.disabled:active,
.btn-mdgray.disabled.active,
.btn-mdgray[disabled]:hover,
.btn-mdgray[disabled]:focus,
.btn-mdgray[disabled]:active,
.btn-mdgray[disabled].active,
.btn-mdgray:disabled:hover,
.btn-mdgray:disabled:focus,
.btn-mdgray:disabled:active,
.btn-mdgray:disabled.active,
fieldset[disabled] .btn-mdgray:hover,
fieldset[disabled] .btn-mdgray:focus,
fieldset[disabled] .btn-mdgray:active,
Expand Down Expand Up @@ -572,10 +572,10 @@ fieldset[disabled] .btn-mdgray.active {
.btn-dkgray.disabled:focus,
.btn-dkgray.disabled:active,
.btn-dkgray.disabled.active,
.btn-dkgray[disabled]:hover,
.btn-dkgray[disabled]:focus,
.btn-dkgray[disabled]:active,
.btn-dkgray[disabled].active,
.btn-dkgray:disabled:hover,
.btn-dkgray:disabled:focus,
.btn-dkgray:disabled:active,
.btn-dkgray:disabled.active,
fieldset[disabled] .btn-dkgray:hover,
fieldset[disabled] .btn-dkgray:focus,
fieldset[disabled] .btn-dkgray:active,
Expand Down Expand Up @@ -612,10 +612,10 @@ fieldset[disabled] .btn-dkgray.active {
.btn-yellow.disabled:focus,
.btn-yellow.disabled:active,
.btn-yellow.disabled.active,
.btn-yellow[disabled]:hover,
.btn-yellow[disabled]:focus,
.btn-yellow[disabled]:active,
.btn-yellow[disabled].active,
.btn-yellow:disabled:hover,
.btn-yellow:disabled:focus,
.btn-yellow:disabled:active,
.btn-yellow:disabled.active,
fieldset[disabled] .btn-yellow:hover,
fieldset[disabled] .btn-yellow:focus,
fieldset[disabled] .btn-yellow:active,
Expand Down Expand Up @@ -647,10 +647,10 @@ fieldset[disabled] .btn-yellow.active {
.btn-pink.disabled:focus,
.btn-pink.disabled:active,
.btn-pink.disabled.active,
.btn-pink[disabled]:hover,
.btn-pink[disabled]:focus,
.btn-pink[disabled]:active,
.btn-pink[disabled].active,
.btn-pink:disabled:hover,
.btn-pink:disabled:focus,
.btn-pink:disabled:active,
.btn-pink:disabled.active,
fieldset[disabled] .btn-pink:hover,
fieldset[disabled] .btn-pink:focus,
fieldset[disabled] .btn-pink:active,
Expand Down
46 changes: 34 additions & 12 deletions ui/css/treeherder-navbar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,28 @@
overflow: auto;
margin-top: 10px;
padding-bottom: 8px;
.dropdown-menu {
min-width: inherit;
}

.dropdown-menu > li > a {
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
color: #262626;
text-decoration: none;
}

label.dropdown-item {
margin-bottom: 0;
}

.dropdown-item input[type="checkbox"] {
margin-right: 5px;
}

#th-logo {
Expand Down Expand Up @@ -281,10 +303,10 @@ th-watched-repo {
.btn-unclassified-failures.disabled:focus,
.btn-unclassified-failures.disabled:active,
.btn-unclassified-failures.disabled.active,
.btn-unclassified-failures[disabled]:hover,
.btn-unclassified-failures[disabled]:focus,
.btn-unclassified-failures[disabled]:active,
.btn-unclassified-failures[disabled].active,
.btn-unclassified-failures:disabled:hover,
.btn-unclassified-failures:disabled:focus,
.btn-unclassified-failures:disabled:active,
.btn-unclassified-failures:disabled.active,
fieldset[disabled] .btn-unclassified-failures:hover,
fieldset[disabled] .btn-unclassified-failures:focus,
fieldset[disabled] .btn-unclassified-failures:active,
Expand Down Expand Up @@ -319,10 +341,10 @@ fieldset[disabled] .btn-unclassified-failures.active {
.btn-view-nav.disabled:focus,
.btn-view-nav.disabled:active,
.btn-view-nav.disabled.active,
.btn-view-nav[disabled]:hover,
.btn-view-nav[disabled]:focus,
.btn-view-nav[disabled]:active,
.btn-view-nav[disabled].active,
.btn-view-nav:disabled:hover,
.btn-view-nav:disabled:focus,
.btn-view-nav:disabled:active,
.btn-view-nav:disabled.active,
fieldset[disabled] .btn-view-nav:hover,
fieldset[disabled] .btn-view-nav:focus,
fieldset[disabled] .btn-view-nav:active,
Expand Down Expand Up @@ -352,10 +374,10 @@ fieldset[disabled] .btn-view-nav.active {
.btn-view-nav-closed.disabled:focus,
.btn-view-nav-closed.disabled:active,
.btn-view-nav-closed.disabled.active,
.btn-view-nav-closed[disabled]:hover,
.btn-view-nav-closed[disabled]:focus,
.btn-view-nav-closed[disabled]:active,
.btn-view-nav-closed[disabled].active,
.btn-view-nav-closed:disabled:hover,
.btn-view-nav-closed:disabled:focus,
.btn-view-nav-closed:disabled:active,
.btn-view-nav-closed:disabled.active,
fieldset[disabled] .btn-view-nav-closed:hover,
fieldset[disabled] .btn-view-nav-closed:focus,
fieldset[disabled] .btn-view-nav-closed:active,
Expand Down
Loading

0 comments on commit 801e6d3

Please sign in to comment.