Skip to content
Snippets Groups Projects
Commit 5f814753 authored by Florian Gnaegi - frentix GmbH's avatar Florian Gnaegi - frentix GmbH
Browse files

OO-1068 add transit jquery library, replaced offcanvas menu with new implementation, style menu

parent 552bafbc
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 900 additions and 93 deletions
NOTICE.TXT
+ 1
− 0
View file @ 5f814753
......@@ -119,6 +119,7 @@ This produce uses softeare based on the MIT License
* jQuery JavaScript DOM library (MIT License) [http://jquery.com]
* jQuery-UI JavaScript UI library (MIT License) [http://jqueryui.com]
* jQuery.dotdotdot library (MIT License) [http://dotdotdot.frebsite.nl]
* jQuery transit library (MIT License) [http://ricostacruz.com/jquery.transit]
-----------------------------------------------------------------------
......
pom.xml
+ 1
− 0
View file @ 5f814753
......@@ -150,6 +150,7 @@
<include>${basedir}/target/jquery/jquery/openolat/jquery.oolog.min.js</include>
<include>${basedir}/target/jquery/jquery/openolat/jquery.translator.min.js</include>
<include>${basedir}/target/jquery/jquery/periodic/jquery.periodic.min.js</include>
<include>${basedir}/target/jquery/jquery/transit/jquery.transit.min.js</include>
<include>${basedir}/src/main/webapp/static/js/tinymce4/tinymce/jquery.tinymce.min.js</include>
<include>${basedir}/src/main/webapp/static/js/jquery/dotdotdot/jquery.dotdotdot.min.js</include>
</includes>
......
src/main/java/org/olat/core/commons/fullWebApp/_content/fullwebapplayout.html
+ 2
− 0
View file @ 5f814753
......@@ -74,6 +74,7 @@ function b_start(){
<script type="text/javascript" src='$r.staticLink("js/functions.js")'></script>
<script type="text/javascript" src='$r.staticLink("js/navbar.js")'></script>
<script type="text/javascript" src='$r.staticLink("js/jquery/dotdotdot/jquery.dotdotdot.js")'></script>
<script type="text/javascript" src='$r.staticLink("js/jquery/transit/jquery.transit.js")'></script>
<script type="text/javascript" src='$r.staticLink("js/ellipsis.js")'></script>
## <script type="text/javascript" src='$r.staticLink("js/js.plugins.min.js")'></script>
<script type="text/javascript" src='$r.staticLink("movie/player.js")'></script>
......@@ -98,6 +99,7 @@ function b_start(){
<script type="text/javascript" src='$r.staticLink("bootstrap/javascripts/bootstrap/tooltip.js")'></script>
<script type="text/javascript" src='$r.staticLink("bootstrap/javascripts/bootstrap/popover.js")'></script>
## Always loaded
## <link type="text/css" href='$r.staticLink("js/jquery/tagit/jquery.tagit.css")' rel="stylesheet"/>
## <link type="text/css" href='$r.staticLink("js/jquery/uilayout/layout-default-latest.css")' rel="stylesheet"/>
......
src/main/java/org/olat/gui/control/OlatTopNavController.java
+ 1
− 1
View file @ 5f814753
......@@ -270,7 +270,7 @@ public class OlatTopNavController extends BasicController implements GenericEven
} else {
linkAlt.setCustomDisplayText("");
}
linkAlt.setIconLeftCSS(iconCssClass);
linkAlt.setIconLeftCSS(iconCssClass + " o_icon-lg");
toolSetLinksName.add(linkAltName);
}
}
......
src/main/java/org/olat/gui/control/_content/menu.html
+ 1
− 1
View file @ 5f814753
## DOM replacement implemented via ID on UL element - bypass standard OO wrapper DIV
<ul id="$r.getCId()" class="dropdown-menu">
<ul id="$r.getCId()" class="dropdown-menu dropdown-menu-right ">
<li role="presentation" class="dropdown-header">$r.translate("topnav.my.menu.tools")</li>
#foreach($personalTool in $personalTools)
<li>$r.render($personalTool)</li>
......
src/main/java/org/olat/gui/control/_content/topnav.html
+ 1
− 1
View file @ 5f814753
......@@ -17,7 +17,7 @@
</li>
#end
#foreach($personalTool in $toolSet)
<li>$r.render($personalTool)</li>
<li class="o_navbar_personalTool">$r.render($personalTool)</li>
#end
#if ($r.available("groupchatcontroller"))
<li id="o_navbar_imgroupclient">
......
src/main/webapp/static/js/jquery/transit/OO_transit_version 0 → 100644
+ 13
− 0
View file @ 5f814753
3.1.1
SaSS version, get it from https://github.com/twbs/bootstrap-sass/releases
PATCHES:
- Add "panel-collapse" to about line 96 in panels.scss like this:
.panel, .panel-collapse {
> .table,
src/main/webapp/static/js/jquery/transit/jquery.transit.js 0 → 100644
+ 730
− 0
View file @ 5f814753
This diff is collapsed.
src/main/webapp/static/js/js.plugins.min.js
+ 10
− 2
View file @ 5f814753
This diff is collapsed.
src/main/webapp/static/js/navbar.js
+ 22
− 6
View file @ 5f814753
......@@ -39,8 +39,11 @@
tabsDirty : false,
toolsW : 0,
toolsOffCanvas : false,
toolsDirty : false
toolsDirty : false,
offCanvasWidth : 0
};
// get site of menu from css
this.state.offCanvasWidth = parseInt($('#o_offcanvas_right').css('width').replace(/[^\d.]/g,''));
this.initListners();
this.calculateWidth();
......@@ -94,6 +97,8 @@
this.state.tabsDirty = false;
this.state.toolsDirty = false;
this.state.busy = false;
// close offcanvas when clicking a link
this.hideRight();
}
}
......@@ -226,15 +231,26 @@
}
Navbar.prototype.showRight = function() {
if (!this.state.rightVisible) {
$('body').addClass('o_offcanvas_right_visible');
this.state.rightVisible = true;
if (!this.state.rightVisible) {
var that = this;
var box = $('#o_offcanvas_right');
box.show().transition({ x: -that.state.offCanvasWidth}, function() {
$('body').addClass('o_offcanvas_right_visible');
that.state.rightVisible = true;
} );
}
}
Navbar.prototype.hideRight = function() {
if (this.state.rightVisible) {
$('body').removeClass('o_offcanvas_right_visible');
this.state.rightVisible = false;
var that = this;
var box = $('#o_offcanvas_right');
box.transition({ x: that.state.offCanvasWidth}, function() {
box.hide();
$('body').removeClass('o_offcanvas_right_visible');
that.state.rightVisible = false;
} );
}
}
Navbar.prototype.toggleRight = function() {
......
src/main/webapp/static/themes/light/_config.scss
+ 9
− 0
View file @ 5f814753
......@@ -27,6 +27,15 @@ $o-page-width-max : 1324px !default;
$navbar-margin-bottom : 0 !default; /* no space between nav and content */
$navbar-collapse-max-height: 100% !default;
$o-offcanvas-width : 250px !default;
$o-offcanvas-padding-horizontal: $navbar-padding-horizontal !default;
$o-offcanvas-padding-vertical: $navbar-padding-vertical !default;
$o-offcanvas-border : $navbar-inverse-border !default;
$o-offcanvas-bg : $navbar-inverse-bg !default;
$o-offcanvas-link-hover-bg : $navbar-inverse-link-hover-bg;
$o-offcanvas-color: $navbar-inverse-color;
$o-offcanvas-link-hover-color : $navbar-inverse-link-hover-color;
/* Background color of the main content area. */
$o-main-outer-bg : #fff !default;
$o-main-inner-bg : #fff !default;
......
src/main/webapp/static/themes/light/modules/_navbar.scss
+ 78
− 40
View file @ 5f814753
#o_navbar_wrapper {
// @extend .o_navbar-inverse;
z-index: 4;
#o_navbar_container {
position: relative;
......@@ -13,59 +12,98 @@
content: "\221E";
}
}
}
}
.o_navbar_tabs {
li a {
padding-right: $grid-gutter-width;
.o_navbar {
.o_navbar_tabs {
li a {
padding-right: $grid-gutter-width;
}
.o_navbar_tab_close {
position: absolute;
top: floor($grid-gutter-width / 2);
right:0.5em;
padding: 0;
width: 1em; height: 1em;
i {
&:before { color: #A87E7E; }
}
&:hover {
i:before { color: #CC0000; }
}
}
}
#o_navbar_tools {
#o_navbar_langchooser {
color: $navbar-default-color;
padding: floor($grid-gutter-width / 2);
form span + div {
display: inline;
}
}
#o_navbar_help a i {
/* help icon */
margin-right: 0.4em;
}
#o_navbar_my_menu {
.dropdown-toggle {
padding-left: floor($grid-gutter-width / 2) + 30px;
}
.o_navbar_tab_close {
img {
position: absolute;
top: floor($grid-gutter-width / 2);
right:0.5em;
padding: 0;
width: 1em; height: 1em;
i {
&:before { color: #A87E7E; }
}
&:hover {
i:before { color: #CC0000; }
}
left: floor($grid-gutter-width / 4);
top: floor(30px - $line-height-computed);
height: 30px;
width: 30px;
@extend .img-circle;
}
}
#o_navbar_tools {
#o_navbar_langchooser {
color: $navbar-default-color;
padding: floor($grid-gutter-width / 2);
form span + div {
display: inline;
}
&.o_navbar-offcanvas {
.o_navbar_tab_close {
top: 10px;
}
.o_navbar_personalTool {
display: none;
}
#o_navbar_my_menu,
#o_navbar_search_opener {
a {
color: $o-offcanvas-color;
&:hover,
&:focus {
color: $o-offcanvas-link-hover-color;
background-color: $o-offcanvas-link-hover-bg;
}
}
#o_navbar_help a i {
/* help icon */
margin-right: 0.4em;
/* override dropdown styles */
.dropdown-toggle {
display: none;
}
#o_navbar_my_menu {
.dropdown-toggle {
padding-left: floor($grid-gutter-width / 2) + 30px;
}
img {
position: absolute;
left: floor($grid-gutter-width / 4);
top: floor(30px - $line-height-computed);
height: 30px;
width: 30px;
@extend .img-circle;
}
.dropdown-menu {
box-shadow: none;
position: relative;
top: 0;
left: 0;
display: block;
float: none;
background-color: $o-offcanvas-bg;
color: $o-offcanvas-color;
font-size: $font-size-base;
.divider {
background: none;
}
}
}
}
}
}
//
// Navbars
// --------------------------------------------------
......
src/main/webapp/static/themes/light/modules/_offcanvas.scss
+ 26
− 37
View file @ 5f814753
$o-offcanvas-width : 250px !default;
$o-offcanvas-padding-horizontal: $navbar-padding-horizontal !default;
$o-offcanvas-padding-vertical: $navbar-padding-vertical !default;
$o-offcanvas-bg : $navbar-inverse-bg !default;
$o-offcanvas-border : $navbar-inverse-border !default;
$o-offcanvas-color: $navbar-inverse-color;
body {
overflow-x: hidden;
......@@ -13,6 +7,8 @@ body {
.o_container_offcanvas {
position: relative;
max-width: $o-page-width-max;
/* transition for media queries changes */
-webkit-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
......@@ -20,30 +16,6 @@ body {
transition: all .25s ease-in-out;
}
#o_offcanvas_right {
position: absolute;
top: 0;
right: -$o-offcanvas-width;
width: $o-offcanvas-width;
padding : $o-offcanvas-padding-horizontal $o-offcanvas-padding-vertical;
background-color: $o-offcanvas-bg;
color: $o-offcanvas-color;
border: 1px solid $o-offcanvas-border;
// Prevent floats from breaking the navbar
@include clearfix();
min-height: 100%;
z-index: 10;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
-m-transition: all .25s ease-out;
transition: all .25s ease-out;
}
/* make page a bid smaller when max width is almost reached. */
@media screen and (min-width: $o-page-width-max) and (max-width: $o-page-width-max + $o-offcanvas-width) {
body.o_offcanvas_right_visible {
......@@ -62,15 +34,32 @@ body {
}
}
/* trigger transition of offcanvas menu */
body.o_offcanvas_right_visible {
#o_offcanvas_right {
right: 0;
@include box-shadow(0px 0px 4px 3px rgba(0,0,0,.25));
}
}
/*
Offcanvas is an absolute container positioned box outside the viewport.
In closed state the element is hidden. To make the offcanvas appear
translations are performed using JavaScript. See navbar.js
Navbar.showRight(), Navbar.hideRight() and Navbar.toggleRight()
*/
#o_offcanvas_right {
position: absolute;
top: 0;
right: -$o-offcanvas-width;
width: $o-offcanvas-width;
padding : $o-offcanvas-padding-horizontal $o-offcanvas-padding-vertical;
background-color: $o-offcanvas-bg;
color: $o-offcanvas-color;
border: 1px solid $o-offcanvas-border;
@include box-shadow(0px 0px 4px 3px rgba(0,0,0,.25));
// Prevent floats from breaking the navbar
@include clearfix();
min-height: 100%;
z-index: 10;
display: none;
}
......
src/main/webapp/static/themes/light/theme.css
+ 5
− 5
View file @ 5f814753
source diff could not be displayed: it is too large. Options to address this: view the blob.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment