tryton-do/tryton
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Increase the space available on main navbar for tablist

Browse Source 
- use icon instead of text for logout
- move favorites in the global search
- merge brand and toggle menu
- allow to toggle menu on lg
- reduce expander size

issue7325
issue5554
review44921002
This commit is contained in:
Cédric Krier
2018-05-12 01:04:50 +02:00
parent 70134eff16
commit 67044270f1
9 changed files with 150 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG
+2
View File
@@ -1,3 +1,5 @@
* Increase the space available for tab list
* Allow to toggle menu on large screen
* Manage URL and history
Version 4.8.0 - 2018-04-23
index.html
+16 -20
View File
@@ -26,7 +26,6 @@ this repository contains the full copyright notices and license terms. -->
<link rel="stylesheet" href="bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="bower_components/c3/c3.min.css">
<link rel="stylesheet" href="bower_components/fullcalendar/dist/fullcalendar.min.css">
<link rel="stylesheet" href="offcanvas.css">
<script type="text/javascript" src="dist/tryton-sao.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/tryton-sao.min.css"
@@ -48,20 +47,14 @@ this repository contains the full copyright notices and license terms. -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Tryton</a>
<p class="pull-left visible-xs visible-sm navbar-text">
<button type="button" class="btn btn-primary btn-xs"
data-toggle="offcanvas">
Toggle menu
</button>
</p>
<a class="navbar-brand" href="#" data-toggle="offcanvas">
<span class="glyphicon glyphicon-menu-hamburger"></span>
Tryton
</a>
</div>
<div class="collapse navbar-collapse" id="main_navbar">
<ul class="nav navbar-nav">
<li id="user-preferences"></li>
<li id="user-favorites"></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="user-preferences"></li>
<li id="user-logout"></li>
</ul>
<ul id="tablist" class="nav navbar-nav nav-tabs nav-tabs-justified" role="tablist">
@@ -69,12 +62,12 @@ this repository contains the full copyright notices and license terms. -->
</div>
</div>
</nav>
<div id="main" class="container-fluid">
<div id="main" class="container-fluid" style="padding: 0px;">
<div class="row row-offcanvas row-offcanvas-left active"
style="height: calc(100vh - 50px - 1px - 20px);">
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="menu" role="navigation"
style="height: calc(100vh - 50px - 1px - 20px); margin: 0px;">
<div class="col-xs-6 col-sm-3 col-lg-2 sidebar-offcanvas" id="menu" role="navigation"
style="overflow-y: auto; height: 100%;"></div>
<div class="col-xs-12 col-md-9" style="overflow-y: auto; height: 100%;">
<div class="col-xs-12 col-md-9 col-lg-10 main-offcanvas" style="overflow-y: auto; height: 100%;">
<div id="tabs" role="tabpanel">
<div id="tabcontent" class="tab-content">
</div>
@@ -88,10 +81,13 @@ this repository contains the full copyright notices and license terms. -->
jQuery('.row-offcanvas').toggleClass('active');
});
jQuery('#tabs').on('ready', function() {
if (jQuery('#tablist').children().length) {
jQuery('.row-offcanvas').removeClass('active');
} else {
jQuery('.row-offcanvas').addClass('active');
var mq = window.matchMedia('(max-width: 991px)');
if (mq.matches) {
if (jQuery('#tablist').children().length) {
jQuery('.row-offcanvas').removeClass('active');
} else {
jQuery('.row-offcanvas').addClass('active');
}
}
});
Sao.login();
offcanvas.css
-68
View File
@@ -1,68 +0,0 @@
/*
* Off Canvas
* --------------------------------------------------
*/
@media screen and (max-width: 991px) {
.row-offcanvas {
position: relative;
-webkit-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas-right {
right: 0;
}
.row-offcanvas-left {
left: 0;
}
.row-offcanvas-right
.sidebar-offcanvas {
right: calc(-50% + 7px);
}
.row-offcanvas-left
.sidebar-offcanvas {
left: calc(-50% + 7.5px);
}
.row-offcanvas-right.active {
right: calc(50% + 7.5px);
}
.row-offcanvas-left.active {
left: calc(50% + 7.5px);
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 50%;
}
}
@media screen and (max-width: 479px) {
.row-offcanvas-right
.sidebar-offcanvas {
right: calc(-100% + 15px);
}
.row-offcanvas-left
.sidebar-offcanvas {
left: calc(-100% + 15px);
}
.row-offcanvas-right.active {
right: calc(100% + 15px);
}
.row-offcanvas-left.active {
left: calc(100% + 15px);
}
.sidebar-offcanvas {
width: 100%;
}
}
package.json
-1
View File
@@ -26,7 +26,6 @@
"images",
"index.html",
"locale",
"offcanvas.css",
"package.json",
"src",
"tests"
src/offcanvas.less
+76
View File
@@ -0,0 +1,76 @@
/*
* Off Canvas
* --------------------------------------------------
*/
@import "variables";
@offcanvas-md: @screen-md-max;
body {
overflow-x: hidden;
}
.row-offcanvas {
position: relative;
-webkit-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas-right {
right: 0;
}
.row-offcanvas-left {
left: 0;
}
.row-offcanvas:not(.active) .main-offcanvas {
width: 100%;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
}
.make-offcanvas(@size) {
.row-offcanvas-right
.sidebar-offcanvas {
right: -@size;
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -@size;
}
.row-offcanvas-right.active {
right: @size;
}
.row-offcanvas-left.active {
left: @size;
}
.sidebar-offcanvas {
width: @size;
}
}
@media (min-width: @screen-lg-min) {
.make-offcanvas(16.6666%);
}
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.make-offcanvas(25%);
}
@media (min-width: @screen-xs-min) and (max-width: @screen-sm-max) {
.make-offcanvas(50%);
}
@media (max-width: (calc(@screen-xs-min - 1))) {
.make-offcanvas(100%);
}
src/sao.js
+39 -14
View File
@@ -531,8 +531,9 @@ var Sao = {};
'method': 'model.' + name + '.get',
};
var menu = jQuery('<ul/>', {
'class': 'dropdown-menu',
'aria-expanded': 'false'
'class': 'dropdown-menu dropdown-menu-right',
'aria-expanded': 'false',
'aria-labelledby': 'user-favorites',
});
jQuery('#user-favorites').append(menu);
Sao.rpc(args, session).then(function(fav) {
@@ -588,15 +589,20 @@ var Sao = {};
jQuery('#user-favorites').children().remove();
jQuery('#user-logout').children().remove();
jQuery('#user-preferences').append(jQuery('<a/>', {
'href': '#'
}).click(Sao.preferences).append(preferences.status_bar));
jQuery('#user-logout').append(jQuery('<a/>', {
'href': '#'
}).click(Sao.logout).append(Sao.i18n.gettext('Logout')));
jQuery('#user-favorites').append(jQuery('<a/>', {
'href': '#',
'data-toggle': 'dropdown'
}).click(Sao.favorites_menu).append(Sao.i18n.gettext('Favorites')));
'title': preferences.status_bar,
}).click(Sao.preferences).append(preferences.status_bar));
var title = Sao.i18n.gettext("Logout");
jQuery('#user-logout').append(jQuery('<a/>', {
'href': '#',
'title': title,
'aria-label': title,
}).click(Sao.logout).append(jQuery('<span/>', {
'class': 'glyphicon glyphicon-log-out hidden-xs',
'aria-hidden': true,
})).append(jQuery('<span/>', {
'class': 'visible-xs',
}).text(title)));
};
Sao.main_menu_row_activate = function() {
@@ -769,16 +775,35 @@ var Sao = {};
Sao.GlobalSearch = Sao.class_(Object, {
init: function() {
this.el = jQuery('<div/>', {
'class': 'global-search-container'
'class': 'global-search-container',
});
var group = jQuery('<div/>', {
'class': 'input-group',
}).appendTo(this.el);
this.search_entry = jQuery('<input>', {
'id': 'global-search-entry',
'class': 'form-control mousetrap',
'placeholder': Sao.i18n.gettext('Search...')
});
this.el.append(this.search_entry);
}).appendTo(group);
jQuery('<div/>', {
'id': 'user-favorites',
'class': 'input-group-btn',
}).append(jQuery('<button/>', {
'class': 'btn btn-default dropdown-toggle',
'data-toggle': 'dropdown',
'aria-haspopup': true,
'aria-expanded': false,
'title': Sao.i18n.gettext("Favorites"),
'aria-label': Sao.i18n.gettext("Favorites"),
}).click(Sao.favorites_menu).append(jQuery('<span/>', {
'class': 'glyphicon glyphicon-bookmark',
'aria-hidden': true,
}))).appendTo(group);
var completion = new Sao.common.InputCompletion(
this.search_entry,
this.el,
this.update.bind(this),
this.match_selected.bind(this),
this.format.bind(this));
src/sao.less
+13 -1
View File
@@ -21,7 +21,7 @@
#menu {
border-right: 2px solid @table-border-color;
}
@media screen and (max-width: 991px) {
@media screen and (max-width: @screen-sm-max) {
#menu {
border-right: none;
}
@@ -30,6 +30,13 @@
}
}
#user-preferences > a {
max-width: 20em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tab-form, .tab-board {
& nav.toolbar.affix {
top: @navbar-height + 1px;
@@ -192,6 +199,11 @@ img.icon {
}
& .expander {
cursor: pointer;
& > .glyphicon {
float: left;
margin-right: 5px;
width: 1em;
}
}
& label {
font-weight: normal;
src/session.js
+4 -1
View File
@@ -119,7 +119,10 @@
dialog.button = jQuery('<button/>', {
'class': 'btn btn-primary',
'type': 'submit'
}).append(Sao.i18n.gettext('Login')).appendTo(dialog.footer);
}).append(jQuery('<span/>', {
'class': 'glyphicon glyphicon-log-in',
'aria-hidden': true,
})).append(' ' + Sao.i18n.gettext("Login")).appendTo(dialog.footer);
return dialog;
};
src/view/tree.js
-1
View File
@@ -898,7 +898,6 @@
});
this.expander.html('&nbsp;');
this.expander.css('margin-left', (depth - 1) + 'em');
this.expander.css('float', 'left');
this.expander.on('click keypress',
Sao.common.click_press(this.toggle_row.bind(this)));
row.append(jQuery('<td/>', {