Skip to content

Commit

Permalink
Bootstrap adjustments for masthead
Browse files Browse the repository at this point in the history
  • Loading branch information
@guerler
guerler committed Apr 3, 2018
1 parent 18fbb0d commit 360e33b
Show file tree
Hide file tree
Showing 7 changed files with 83 additions and 68 deletions.
21 changes: 21 additions & 0 deletions client/galaxy/docs/galaxy-styles.md
View file
Expand Up @@ -60,6 +60,27 @@ All the crazy permutations of menu button...
</a>
```

## Masthead

As generated by layout.masthead.js

```
<nav id="masthead" class="navbar navbar-expand justify-content-center navbar-dark bg-dark">
<a class="navbar-brand">
<img class="navbar-brand-image"/>
<span class="navbar-brand-title">Title</span>
</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link">Header 1</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle">Header 2</a>
</li>
</ul>
</nav>
```

## Radio Buttons

As generated by mvc.ui.ui-options
Expand Down
10 changes: 4 additions & 6 deletions client/galaxy/scripts/layout/masthead.js
View file
Expand Up @@ -88,12 +88,10 @@ var View = Backbone.View.extend({
_template: function() {
return `
<nav id="masthead" class="navbar navbar-expand fixed-top justify-content-center navbar-dark bg-dark">
<div class="navbar-brand">
<a class="navbar-brand-link">
<img class="navbar-brand-image"/>
<span class="navbar-brand-title"/>
</a>
</div>
<a class="navbar-brand">
<img class="navbar-brand-image"/>
<span class="navbar-brand-title"/>
</a>
<ul class="navbar-nav"/>
<div class="quota-meter-container"/>
</nav>`;
Expand Down
76 changes: 35 additions & 41 deletions client/galaxy/scripts/layout/menu.js
View file
Expand Up @@ -318,22 +318,25 @@ var Tab = Backbone.View.extend({
initialize: function(options) {
this.model = options.model;
this.setElement(this._template());
this.$dropdown = this.$(".dropdown");
this.$toggle = this.$(".dropdown-toggle");
this.$link = this.$(".nav-link");
this.$menu = this.$(".dropdown-menu");
this.$note = this.$(".dropdown-note");
this.listenTo(this.model, "change", this.render, this);
},

events: {
"click .dropdown-toggle": "_toggleClick"
"click .nav-link": "_toggleClick"
},

render: function() {
$(".tooltip").remove();
this.$el.attr("id", this.model.id).css({
visibility: (this.model.get("visible") && "visible") || "hidden"
});
this.$el.removeClass()
.addClass(this.model.get("disabled") && "disabled")
.addClass(this.model.get("active") && "active")
.addClass(this.model.get("menu") && "dropdown")
.attr("id", this.model.id).css({
visibility: (this.model.get("visible") && "visible") || "hidden"
});
this.model.set("url", this._formatUrl(this.model.get("url")));
this.$note
.html(this.model.get("note") || "")
Expand All @@ -343,25 +346,18 @@ var Tab = Backbone.View.extend({
.css({
display: (this.model.get("show_note") && "block") || "none"
});
this.$toggle
this.$link
.html(this.model.get("title") || "")
.addClass("dropdown-toggle")
.addClass(this.model.get("cls"))
.addClass(this.model.get("icon") && `dropdown-icon fa ${this.model.get("icon")}`)
.addClass(this.model.get("menu") && "dropdown-toggle")
.addClass(this.model.get("toggle") && "toggle")
.attr("target", this.model.get("target"))
.attr("href", this.model.get("url"))
.attr("title", this.model.get("tooltip"))
.tooltip("dispose");
if (this.model.get("tooltip")) {
this.$toggle.tooltip({ placement: "bottom" });
}
if (!this.model.get("menu")) {
this.$dropdown
.removeClass()
.addClass("dropdown")
.addClass(this.model.get("disabled") && "disabled")
.addClass(this.model.get("active") && "active");
this.$link.tooltip({ placement: "bottom" });
}
if (this.model.get("menu") && this.model.get("show_menu")) {
this.$menu.show();
Expand All @@ -376,16 +372,16 @@ var Tab = Backbone.View.extend({
this.$menu.hide();
$("#dd-helper").hide();
}
this.$menu.empty().removeClass("dropdown-menu");
this.$menu.empty().removeClass();
if (this.model.get("menu")) {
_.each(this.model.get("menu"), menuItem => {
this.$menu.append(this._buildMenuItem(menuItem));
if (menuItem.divider) {
this.$menu.append($("<li/>").addClass("divider"));
this.$menu.append($("<div/>").addClass("dropdown-divider"));
}
});
this.$menu.addClass("dropdown-menu");
this.$toggle.append($("<b/>").addClass("caret"));
this.$link.append($("<b/>").addClass("caret"));
}
return this;
},
Expand All @@ -399,21 +395,19 @@ var Tab = Backbone.View.extend({
noscratchbook: false
});
options.url = this._formatUrl(options.url);
return $("<li/>").append(
$("<a/>")
.attr("href", options.url)
.attr("target", options.target)
.html(options.title)
.on("click", e => {
e.preventDefault();
this.model.set("show_menu", false);
if (options.onclick) {
options.onclick();
} else {
Galaxy.frame.add(options);
}
})
);
return $("<a/>").addClass("dropdown-item")
.attr("href", options.url)
.attr("target", options.target)
.html(options.title)
.on("click", e => {
e.preventDefault();
this.model.set("show_menu", false);
if (options.onclick) {
options.onclick();
} else {
Galaxy.frame.add(options);
}
});
},

buildLink: function(label, url) {
Expand Down Expand Up @@ -447,10 +441,10 @@ var Tab = Backbone.View.extend({
model.set("show_menu", true);
}
} else {
if (this.$toggle.popover) {
this.$toggle.popover("destroy");
if (this.$link.popover) {
this.$link.popover("destroy");
}
this.$toggle
this.$link
.popover({
html: true,
placement: "bottom",
Expand All @@ -461,7 +455,7 @@ var Tab = Backbone.View.extend({
})
.popover("show");
window.setTimeout(() => {
this.$toggle.popover("destroy");
this.$link.popover("destroy");
}, 5000);
}
},
Expand All @@ -474,9 +468,9 @@ var Tab = Backbone.View.extend({
/** body tempate */
_template: function() {
return `
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"/>
<ul class="dropdown-menu"/>
<li class="nav-item">
<a class="nav-link"/>
<div class="dropdown-menu"/>
<div class="dropdown-note"/>
</li>`;
}
Expand Down
27 changes: 9 additions & 18 deletions client/galaxy/style/scss/base.scss
View file
Expand Up @@ -421,23 +421,15 @@ div.unified-panel-body-background {

// Masthead
#masthead {
// position:absolute;
// top:0;
// left:0;
// width:100%;
// min-width:990px;
padding: 0;
margin-bottom: 0px;
// .nav {
// z-index: 15001;
// }
// .nav > li > a {
// cursor: pointer;
// text-decoration: none;
// &:hover {
// color: gold;
// }
// }
.nav-link {
cursor: pointer;
text-decoration: $navbar-default-link-text-decoration;
&:hover {
color: $navbar-default-link-hover-color;
}
}
.navbar-brand {
position: absolute;
left: 0;
Expand All @@ -450,15 +442,14 @@ div.unified-panel-body-background {
// Override margin and padding due to shorter navbar height
padding: 5px 20px 12px;
margin-left: -15px;
// z-index: 2000;
img {
.navbar-brand-image {
display: inline;
width: 26px;
vertical-align: top;
margin-left: 0.35em;
border: none;
}
a {
.navbar-brand-title {
color: white;
text-decoration: none;
}
Expand Down
3 changes: 3 additions & 0 deletions client/galaxy/style/scss/galaxy_bootstrap/overrides.scss
View file
Expand Up @@ -22,6 +22,9 @@ pre {

.dropdown-menu {
max-width: auto;
.dropdown-item {
text-decoration: none;
}
}

input[type="checkbox"],
Expand Down
3 changes: 2 additions & 1 deletion client/galaxy/style/scss/galaxy_bootstrap/variables.scss
View file
Expand Up @@ -258,12 +258,13 @@ $navbar-padding-vertical: (($navbar-height - $line-height-computed-px) / 2);

// Navbar links
$navbar-default-link-color: #777;
$navbar-default-link-hover-color: #333;
$navbar-default-link-hover-color: gold;
$navbar-default-link-hover-bg: transparent;
$navbar-default-link-active-color: #555;
$navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%);
$navbar-default-link-disabled-color: #ccc;
$navbar-default-link-disabled-bg: transparent;
$navbar-default-link-text-decoration: none;

// Navbar brand label
$navbar-default-brand-color: $navbar-default-link-color;
Expand Down
11 changes: 9 additions & 2 deletions static/style/blue/base.css
View file
Expand Up @@ -8759,6 +8759,8 @@ button, .action-button, .menubutton {

.dropdown-menu {
max-width: auto; }
.dropdown-menu .dropdown-item, ul.dropdown-menu li {
text-decoration: none; }

input[type="checkbox"],
input[type="radio"] {
Expand Down Expand Up @@ -12447,6 +12449,11 @@ div.unified-panel-body-background {
#masthead {
padding: 0;
margin-bottom: 0px; }
#masthead .nav-link {
cursor: pointer;
text-decoration: none; }
#masthead .nav-link:hover {
color: gold; }
#masthead .navbar-brand {
position: absolute;
left: 0;
Expand All @@ -12458,13 +12465,13 @@ div.unified-panel-body-background {
color: white;
padding: 5px 20px 12px;
margin-left: -15px; }
#masthead .navbar-brand img {
#masthead .navbar-brand .navbar-brand-image {
display: inline;
width: 26px;
vertical-align: top;
margin-left: 0.35em;
border: none; }
#masthead .navbar-brand a {
#masthead .navbar-brand .navbar-brand-title {
color: white;
text-decoration: none; }

Expand Down

0 comments on commit 360e33b

Please sign in to comment.