pingu_98/MrDraw
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Free up some space in the navbar

Browse source 
* Use only icons for settings and system entries
  * Limit length of login entry to 100px
  * Limit length of instance name to 250px
  * Removed "OctoPrint" text if instance name is set

See discussion in #1741
This commit is contained in:
Gina Häußge 2017-02-22 14:51:31 +01:00
parent c3740dd59d
commit 444312d7d9
8 changed files with 60 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/octoprint/static/css/octoprint.css
View file

File diff suppressed because one or more lines are too long

7
src/octoprint/static/js/app/viewmodels/appearance.js
View file

@ -7,6 +7,13 @@ $(function() {
self.colorTransparent = parameters[0].appearance_colorTransparent;
self.brand = ko.pureComputed(function() {
if (self.name())
return self.name();
else
return gettext("OctoPrint");
});
self.fullbrand = ko.pureComputed(function() {
if (self.name())
return gettext("OctoPrint") + ": " + self.name();
else

8
src/octoprint/static/js/app/viewmodels/loginstate.js
View file

@ -27,6 +27,14 @@ $(function() {
}
});
self.userMenuTitle = ko.pureComputed(function() {
if (self.loggedIn()) {
return _.sprintf(gettext("Logged in as %(name)s"), {name: self.username()});
} else {
return gettext("Login");
}
});
self.reloadUser = function() {
if (self.currentUser() == undefined) {
return;

43
src/octoprint/static/less/octoprint.less
View file

@ -98,6 +98,12 @@ body {
// invert for dropdown
.navbar-background-color(fade(@bottom, @gradientalpha), fade(@top, @gradientalpha), @image);
}
li>a:hover {
// darken for hover
@darkenedTop: darken(@top, 5%);
@darkenedBottom: darken(@bottom, 5%);
.navbar-background-color(fade(@darkenedTop, @gradientalpha), fade(@darkenedBottom, @gradientalpha), @image);
}
}
}
@ -174,14 +180,37 @@ body {
}
}
.brand span {
background-size: 20px 20px;
background-position: left center;
padding-left: 24px;
background-repeat: no-repeat;
.brand {
padding: 10px 20px 6px;
span {
padding-left: 26px;
// background properties left standalone intentionally, otherwise we overwrite the image
background-size: 20px 20px;
background-repeat: no-repeat;
display: inline-block;
max-width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
line-height: 20px;
height: 24px;
}
}
}
#navbar_login a.dropdown-toggle span {
display: inline-block;
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
}
.octoprint-container {
margin-top: 20px;
@ -371,9 +400,7 @@ table {
#temperature-graph {
height: 350px;
width: 100%;
background-image: url("../img/graph-background.png");
background-position: center;
background-repeat: no-repeat;
background: url("../img/graph-background.png") no-repeat center;
}
.tab-content, .tab-pane {

4
src/octoprint/templates/index.jinja2
View file

@ -20,7 +20,7 @@
<div id="navbar" class="navbar navbar-static-top">
<div class="navbar-inner" data-bind="css: appearanceClasses">
<div class="container">
<a class="brand" href="#"> <span data-bind="text: appearance.brand">OctoPrint</span></a>
<a class="brand" href="javascript:void(0)" data-bind="attr: {title: appearance.fullbrand}"><span data-bind="text: appearance.brand">OctoPrint</span></a>
<div class="nav-collapse">
<!-- Navbar -->
<ul class="nav pull-right">
@ -113,7 +113,7 @@
</div>
<div class="footer">
<ul class="pull-left muted">
<li><small>{{ _('Version') }}: <span class="version">{{ display_version|e }}</span></small></li>
<li><small>{{ _('OctoPrint') }} <span class="version">{{ display_version|e }}</span></small></li>
</ul>
<ul class="pull-right">
<li><a href="http://octoprint.org" target="_blank" rel="noreferrer noopener"><i class="icon-home"></i> {{ _('Homepage') }}</a></li>

4
src/octoprint/templates/navbar/login.jinja2
View file

@ -1,5 +1,5 @@
<a href="#" class="dropdown-toggle">
<i class="icon-user"></i> <span data-bind="text: loginState.userMenuText">{{ _('Login') }}</span>
<a href="javascript:void(0)" class="dropdown-toggle">
<i class="icon-user"></i> <span data-bind="text: loginState.userMenuText, attr: {title: loginState.userMenuTitle}">{{ _('Login') }}</span>
<b class="caret"></b>
</a>
<div id="login_dropdown_loggedout" style="padding: 15px" class="dropdown-menu" data-bind="css: {hide: loginState.loggedIn(), 'dropdown-menu': !loginState.loggedIn()}">

4
src/octoprint/templates/navbar/settings.jinja2
View file

@ -1,3 +1,3 @@
<a id="navbar_show_settings" class="pull-right" href="#settings_dialog" data-bind="click: function() { $root.show(); }">
<i class="icon-wrench"></i> {{ _('Settings') }}
<a id="navbar_show_settings" title="{{ _('Settings') }}" class="pull-right" href="#settings_dialog" data-bind="click: function() { $root.show(); }">
<i class="icon-wrench"></i>
</a>

6
src/octoprint/templates/navbar/systemmenu.jinja2
View file

@ -1,5 +1,5 @@
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-bind="visible: system.systemActions().length > 0">
<i class="icon-off"></i> {{ _('System') }}
<a href="javascript:void(0)" title="{{ _('System') }}" class="dropdown-toggle" data-toggle="dropdown" data-bind="visible: system.systemActions().length > 0">
<i class="icon-off"></i>
<b class="caret"></b>
</a>
<ul class="dropdown-menu" data-bind="foreach: system.systemActions">
@ -7,6 +7,6 @@
<li class="divider"></li>
<!-- /ko -->
<!-- ko if: action != "divider" -->
<li><a href="#" data-bind="click: $root.system.triggerCommand, text: name"></a></li>
<li><a href="javascript:void(0)" data-bind="click: $root.system.triggerCommand, text: name"></a></li>
<!-- /ko -->
</ul>