From 67acebb93b3eb17d16e5cf94abb0d7d37916d13a Mon Sep 17 00:00:00 2001 From: marjohn56 Date: Sun, 8 Jul 2018 16:55:46 +0100 Subject: [PATCH 1/2] Sidebar Menus --- .../mvc/app/views/layouts/default.volt | 63 ++++++++++++++++++- src/www/fbegin.inc | 62 ++++++++++++++++++ 2 files changed, 124 insertions(+), 1 deletion(-) diff --git a/src/opnsense/mvc/app/views/layouts/default.volt b/src/opnsense/mvc/app/views/layouts/default.volt index 1a10e7a40..6dbb91d3d 100644 --- a/src/opnsense/mvc/app/views/layouts/default.volt +++ b/src/opnsense/mvc/app/views/layouts/default.volt @@ -219,6 +219,7 @@ +
+
+ + + + + + + From 6f333c123eb0390e870ca8a837cdbb7095fa8303 Mon Sep 17 00:00:00 2001 From: Ad Schellevis Date: Tue, 17 Jul 2018 21:58:01 +0200 Subject: [PATCH 2/2] theme, detect if sidebar is loaded and link functionality when it is, move javascript logic into it's own script file. --- .../mvc/app/views/layouts/default.volt | 64 +---------- src/opnsense/www/js/opnsense_theme.js | 104 ++++++++++++++++++ src/www/fbegin.inc | 63 +---------- src/www/head.inc | 3 + 4 files changed, 110 insertions(+), 124 deletions(-) create mode 100644 src/opnsense/www/js/opnsense_theme.js diff --git a/src/opnsense/mvc/app/views/layouts/default.volt b/src/opnsense/mvc/app/views/layouts/default.volt index e46cf11ac..9ff1ea8ce 100644 --- a/src/opnsense/mvc/app/views/layouts/default.volt +++ b/src/opnsense/mvc/app/views/layouts/default.volt @@ -191,6 +191,7 @@ + @@ -219,7 +220,7 @@ - +
    @@ -291,66 +292,5 @@ - - - - - - - diff --git a/src/opnsense/www/js/opnsense_theme.js b/src/opnsense/www/js/opnsense_theme.js new file mode 100644 index 000000000..f340e9fb2 --- /dev/null +++ b/src/opnsense/www/js/opnsense_theme.js @@ -0,0 +1,104 @@ +/** + * Copyright (C) 2018 Deciso B.V. + * Copyright (C) 2018 Team Rebellion + * + * All rights reserved. + * + * Redistribution and use in source and binary forms, with or without + * modification, are permitted provided that the following conditions are met: + * + * 1. Redistributions of source code must retain the above copyright notice, + * this list of conditions and the following disclaimer. + * + * 2. Redistributions in binary form must reproduce the above copyright + * notice, this list of conditions and the following disclaimer in the + * documentation and/or other materials provided with the distribution. + * + * THIS SOFTWARE IS PROVIDED ``AS IS'' AND ANY EXPRESS OR IMPLIED WARRANTIES, + * INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY + * AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE + * AUTHOR BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, + * OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF + * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS + * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN + * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) + * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE + * POSSIBILITY OF SUCH DAMAGE. + * + * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + * hook-in additional theme functionality + */ + +$(document).ready(function () { + // traverse loaded css files + var toggle_sidebar_loaded = false; + $.each(document.styleSheets, function(sheetIndex, sheet) { + if (sheet.href != undefined && sheet.href.endsWith('main.css')){ + $.each(sheet.cssRules || sheet.rules, function(ruleIndex, rule) { + if (rule.cssText.indexOf('toggle-sidebar') >= 0) { + toggle_sidebar_loaded = true; + } + }); + } + }); + + if (toggle_sidebar_loaded) { + /** navigation toggle **/ + $(".toggle-sidebar").click(function () { + $("#navigation").toggleClass("col-sidebar-left"); + $("main").toggleClass("col-sm-9 col-sm-push-3 col-lg-10 col-lg-push-2 col-lg-12"); + $(".toggle-sidebar").toggleClass("glyphicon-chevron-right glyphicon-chevron-left"); + if ($("#navigation").hasClass("col-sidebar-left")) { + $(".brand-logo").css("display", "none"); + $(".brand-icon").css("display", "inline-block"); + } else { + $(".brand-icon").css("display", "none"); + $(".brand-logo").css("display", "inline-block"); + $("#navigation.page-side.col-xs-12.col-sm-3.col-lg-2.hidden-xs").css("width", ""); + } + }); + /** sidebar mouseevents **/ + $("#navigation").hover(function () { + if ($("#navigation").hasClass("col-sidebar-left")) { + $("#navigation > div > nav > #mainmenu > div > div").on({ + mouseout: function() {$("#navigation.col-sidebar-left").css("width", "70px"); }, + mouseover: function() {$("#navigation.col-sidebar-left").css("width", "380px"); } + }); + $("#navigation > div > nav > #mainmenu > div > a").on({ + mouseout: function() {$("#navigation.col-sidebar-left").css("width", "70px"); }, + mouseover: function() {$("#navigation.col-sidebar-left").css("width", "380px"); } + }); + } + }); + + /** on resize - toggle sidebar / main navigation **/ + $(window).on('resize', function(){ + var win = $(this); + if (((win.height() <= 669) && $("#navigation").hasClass("col-sidebar-left"))) { + $("main").toggleClass("col-sm-9 col-sm-push-3 col-lg-10 col-lg-push-2 col-lg-12"); + $("#navigation").toggleClass("col-sidebar-left"); + $(".toggle-sidebar").toggleClass("glyphicon-chevron-right glyphicon-chevron-left"); + $(".brand-icon").css("display", "none"); + $(".brand-logo").css("display", "inline-block"); + $("#navigation.page-side.col-xs-12.col-sm-3.col-lg-2.hidden-xs").css("width", ""); + } else if ((win.width() <= 768) && $("#navigation").hasClass("col-sidebar-left")) { + $("main").toggleClass("col-sm-9 col-sm-push-3 col-lg-10 col-lg-push-2 col-lg-12"); + $("#navigation").toggleClass("col-sidebar-left"); + $(".toggle-sidebar").toggleClass("glyphicon-chevron-right glyphicon-chevron-left"); + $(".brand-logo").css("display", "none"); + $(".brand-icon").css("display", "inline-block"); + $("#navigation.page-side.col-xs-12.col-sm-3.col-lg-2.hidden-xs").css("width", ""); + } else if (((win.width() <= 768) && $("#navigation").not("col-sidebar-left")) + || ((win.width() >= 768) && $("#navigation").hasClass("col-sidebar-left"))) { + $(".brand-logo").css("display", "none"); + $(".brand-icon").css("display", "inline-block"); } + else if ((win.width() >= 768) && $("#navigation").not("col-sidebar-left")){ + $("#navigation").addClass("in"); + $(".brand-icon").css("display", "none"); + $(".brand-logo").css("display", "inline-block"); + } + }); + // only show toggle button when style is loaded + $(".toggle-sidebar").show(); + } +}); diff --git a/src/www/fbegin.inc b/src/www/fbegin.inc index 68be42e40..a94032861 100644 --- a/src/www/fbegin.inc +++ b/src/www/fbegin.inc @@ -62,7 +62,7 @@ if($need_alert_display == true) {
- +
    @@ -201,65 +201,4 @@ if($need_alert_display == true) {
- - - - - - - diff --git a/src/www/head.inc b/src/www/head.inc index 2ec58b435..3e6e60cbc 100644 --- a/src/www/head.inc +++ b/src/www/head.inc @@ -116,6 +116,9 @@ $pagetitle .= html_safe(sprintf(' | %s.%s', $config['system']['hostname'], $conf + + +