From 17a72c630f81d92944386dfabecfc680aff548bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Schr=C3=B6der?= Date: Thu, 23 Apr 2015 16:41:56 +0200 Subject: [PATCH] .. --- luciexpress/htdocs/js/app.js | 32 +- luciexpress/htdocs/js/navigation.js | 21 - .../htdocs/plugins/core/pages/bootstrap.html | 3093 +++++++++++++++++ .../htdocs/plugins/core/pages/bootstrap.js | 1 + luciexpress/htdocs/plugins/core/plugin.json | 3 + .../plugins/core/widgets/luci.footer.html | 4 + .../plugins/core/widgets/luci.footer.js | 21 +- .../widgets/luci.layout.with_sidebar.html | 3 +- .../plugins/core/widgets/luci.navbar.js | 34 +- .../plugins/core/widgets/luci.top_bar.html | 41 +- .../plugins/router/pages/settings.uci.html | 4 +- .../htdocs/plugins/vodaphone/plugin.json | 3 +- .../vodaphone/widgets/vodaphone.navbar.js | 30 +- .../vodaphone/widgets/vodaphone.top_bar.html | 27 + .../vodaphone/widgets/vodaphone.top_bar.js | 41 + .../htdocs/themes/default/css/theme.css | 37 +- luciexpress/htdocs/themes/default/index.html | 27 +- .../htdocs/themes/inteno-red/css/theme.css | 31 + .../htdocs/themes/inteno-red/index.html | 1 + .../htdocs/themes/vodaphone/css/theme.css | 23 +- 20 files changed, 3326 insertions(+), 151 deletions(-) create mode 100644 luciexpress/htdocs/plugins/core/pages/bootstrap.html create mode 100644 luciexpress/htdocs/plugins/core/pages/bootstrap.js create mode 100644 luciexpress/htdocs/plugins/vodaphone/widgets/vodaphone.top_bar.html create mode 100644 luciexpress/htdocs/plugins/vodaphone/widgets/vodaphone.top_bar.js create mode 100644 luciexpress/htdocs/themes/inteno-red/index.html diff --git a/luciexpress/htdocs/js/app.js b/luciexpress/htdocs/js/app.js index ca7eeb700..ab846d90a 100644 --- a/luciexpress/htdocs/js/app.js +++ b/luciexpress/htdocs/js/app.js @@ -159,27 +159,21 @@ angular.module("luci").controller("BodyCtrl", function ($scope, $templateCache, }]; $config.mode = $localStorage.getItem("mode") || "basic"; - $config.theme = $localStorage.getItem("theme") || "vodaphone"; // TODO: change to default inteno + $config.theme = $localStorage.getItem("theme") || $config.theme || "default"; - $scope.theme_index = "themes/"+$config.theme+"/index.html"; - - /*setTimeout(function(){ - $("#guiMode").selectpicker('val', $config.mode || "basic"); - }, 100); */ - /*$("#guiMode").on("change", function(){ - var selected = $(this).find("option:selected").val(); - console.log(selected); - if(selected == "logout") { - $session.logout().always(function(){ - $window.location.href="/"; - }); - } else { - $config.mode = selected; - $state.reload(); - } - localStorage.setItem("mode", selected); - }); */ + if($config.theme in $config.themes){ + var th = $config.themes[$config.theme]; + $scope.theme_index = th+"/index.html"; + var theme = $(''); + theme.appendTo('head'); + } else { + alert("Could not load theme "+$config.theme+"!"); + var th = $config.themes["default"]; + $scope.theme_index = th+"/index.html"; + var theme = $(''); + theme.appendTo('head'); + } }); diff --git a/luciexpress/htdocs/js/navigation.js b/luciexpress/htdocs/js/navigation.js index 188535a26..b5333a043 100644 --- a/luciexpress/htdocs/js/navigation.js +++ b/luciexpress/htdocs/js/navigation.js @@ -87,27 +87,6 @@ angular.module("luci") if(!item.path) return; item = this.insertLeaf(item.path, item); - - // now also register with the routing service - //if(item.page){ - /* (function(item){ - var lazyPromise = null; - $stateProvider.state(item.path.replace(".", "_"), { - url: "/"+item.path, - views: { - "content": { - templateUrl: item.page || "/pages/default.html" - } - }, - onEnter: function($window){ - // TODO: all these redirects seem to load page multiple times. - if(item.redirect) $window.location.href = "#!"+item.redirect; - }, - luci_config: item - }); - })(item); */ - //} - //alert(JSON.stringify(data)); return data; }; this.$get = function() { diff --git a/luciexpress/htdocs/plugins/core/pages/bootstrap.html b/luciexpress/htdocs/plugins/core/pages/bootstrap.html new file mode 100644 index 000000000..8bf1c70cf --- /dev/null +++ b/luciexpress/htdocs/plugins/core/pages/bootstrap.html @@ -0,0 +1,3093 @@ + + Make sure that this layout matches: http://anvoz.github.io/bootstrap-tldr/ +

CSS

+ +

Typography

+ +
+
+

h1 small

+
+ +
+
+ .h2 small +
+
+ +
+

h3 small

+
+ +
+
+ .h4 small +
+
+ +
+
h5 small
+
+ +
+
+ .h6 small +
+
+
+ +
+
+ + .lead
+ + b (bold)
+ strong +
+ +
+ + small
+ .small +
+ +
+ + em
+ i (italic) +
+ +
+ + del
+ + s + (strikethrough)
+ + ins
+ + u (underline) +
+ +
+ + code
+ + var
+ + samp +
+ +
+ + mark
+ + kbd +
+

+ + +
+
+

.text-left

+
+ +
+

.text-center

+
+ +
+

.text-right

+
+ +
+
+ .text-justify +
+
+

+ + +
+ .text-lowercase .text-uppercase .text-capitalize +

+ + +
+ abbr .initialism +

+ + +
+
+ address strong
+ address
+ first.last@example.com +
+
+ +
+
+
+

blockquote p

+ +
+ footer cite +
+
+
+ +
+
+

blockquote.blockquote-reverse p

+ +
+ Someone famous in Source + Title +
+
+
+
+ +
+ + +
+

ul

+ +
    +
  • li
    • + +
  • List item + +
      +
    • ul li
      • + +
    • List item
      • +
    +
    • + +
  • List item
    • +
+
+ +
+

ol

+ +
    +
  1. List item
    2. + +
  2. List item + +
      +
    1. List item
      2. + +
    2. List item
      3. +
    +
    3. + +
  3. List item
    4. +
+
+ +
+

ul.list-unstyled

+ +
    +
  • List item
    • + +
  • List item + +
      +
    • List item
      • + +
    • List item
      • +
    +
    • + +
  • List item
    • +
+
+ +
+

ul.list-inline

+ +
    +
  • List item
    • + +
  • List item
    • + +
  • List item
    • +
+
+
+ +
+ + +
+

dl

+ +
+
dt
+ +
dd
+ +
Term
+ +
Description
+ Description
+
+
+ +
+

dl.dl-horizontal

+ +
+
Term
+ +
Description
+ +
Long term will be truncated
+ +
Description
+ Description
+
+
+
+ +

Tables

+ +
+

table.table

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
thead tr ththHeaderHeader
tbody tr tdtdDataData
DataDataDataData
+
+ +
+ + +
+

.table-striped

+ + + + + + + + + + + + + + + + + + + + + + + +
HeaderHeader
DataData
DataData
+
+ +
+

.table-bordered

+ + + + + + + + + + + + + + + + + + + + + + + +
HeaderHeader
DataData
DataData
+
+
+ +
+ + +
+

.table-hover

+ + + + + + + + + + + + + + + + + + + + + + + +
HeaderHeader
DataData
DataData
+
+ +
+

.table-condensed

+ + + + + + + + + + + + + + + + + + + + + + + +
HeaderHeader
DataData
DataData
+
+
+ +
+

div.table-responsive table.table

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
HeaderHeaderHeaderHeaderHeader
td.activetd.successtd.infotd.warningtd.danger
tr.active tdApplies the hover color to a particular + row or cell
tr.success tdIndicates a successful or positive + action
tr.info tdIndicates a neutral informative change + or action
tr.warning tdIndicates a warning that might need + attention
tr.danger tdIndicates a dangerous or potentially + negative action
+
+
+ +

Forms

+ +
+

form

+ +
+ + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + .help-block: Wrap labels and controls in + .form-group for optimum spacing. +
+ +
+ +
+
+
+ +
+

form.form-inline

+ +
+
+ +
+ +
+ +
+
+

+ + +
+

form.form-horizontal

+ +
+
+ + +
+ +
+
+ +
+ + +
+ +
+
+ +
+ + +
+ +
+
+ +
+ + +
+
+ +
+
+
+ +
+
+ + +
+
+ +
+ + +
+
+ +
+
+
+ +
+
+ +
+
+ +
+ + +
+
+ +
+ +
+
+ +

+ select.form-control[multiple]

+
+
+ +
+ + +
+

p.form-control-static

+
+
+ +
+ + +
+ +
+
+ +
+
+ +
+
+
+
+ +
+

Validation styles on form controls

+ +
+ + +
+ + +
+ +
+
+ +
+ + +
+ + +
+
+ +
+ + +
+ +
+
+ +
+ + +
+ + +
+
+ +
+ + +
+ +
+
+ +
+ + +
+ +
+
+
+
+ +

Buttons

+ +

+ +

+ + +

+ +

a + +

+ +

+ a.active + + a.disabled

+ +

Images

+ +
+
+

.img-rounded

.img-rounded
+ +
+

.img-circle

.img-circle
+ +
+

.img-thumbnail

.img-thumbnail
+ +
+

.img-responsive

.img-responsive
+
+ +

Helper classes

+ +

.text-muted + .text-primary .text-success .text-info .text-warning .text-danger

+ +

.bg-primary + .bg-success .bg-info .bg-warning + .bg-danger

+ +

button.close →

+ +

.caret

+ + +
+

.clearfix

+ +
+
+ .pull-left +
+ +
+ .pull-right +
+
+

+ +

+ .center-block: Set an element to display: block + and center via margin.

+ +

+ .show and .hidden: Showing and hiding + content.
+ .invisible: Toggle only the visibility of an element.

+ +

+ .sr-only: Hide an element to all devices except screen + readers.

+ +

+ .text-hide: Replace an element's text content with a + background image.

+ +

Components

+ +

Glyphicons

+ +

Glyphicons classes: + glyphicon glyphicon-*

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

.dropdown ul.dropdown-menu

+ +
+ + + +
+
+ +

Button groups

+ +
+

.btn-group

+ +
+ + + +
+

+ +
+

.btn-toolbar .btn-group

+ +
+ + +
+ +
+ +
+ +
+ +
+ +
+
+

+ +
+ + +
+ + + +
+ + + +
+
  + + + +
+ + +
+ + + +
+
+

+ +
+

.btn-group.btn-group-justified

+ +
+ #1 #2 #3 +
+

+ +
+

.btn-group.dropup

+ +
+ + + +
+ +
+ + + +
+
+ +

Input groups

+ +
+

.input-group

+ +
+
+ .input-group-addon + +
+
+ +
+
+ +
+
+
+ +
+

.input-group-lg

+ +
+
+ Addon + Addon +
+
+
+ +
+

.input-group-sm

+ +
+
+ Addon + Addon +
+
+
+ + + +
+

ul.nav.nav-tabs

+ + +
+ +
+
+ +

ul.nav.nav-pills

+ + +
+ +
+
+ +

ul.nav.nav-pills.nav-stacked

+ + +
+ +
+
+ +

ul.nav.nav-tabs.nav-justified

+ + +
+ +
+
+ +

ul.nav.nav-pills.nav-justified

+ + +
+ + + +
+

.navbar.navbar-default .container-fluid

+ + +
+ +
+

.navbar.navbar-inverse .container-fluid

+ + +
+ +
+

Complex navbar with navbar-left, + navbar-right and navbar-collapse.

+ + +
+ + + +
+

ol.breadcrumb

+ +
    +
  1. + li a +
    2. + +
  2. + Link #2 +
    3. + +
  3. li.active
    4. +
+
+ +

Pagination

+ +
+
+ ul.pagination +
+ + +
+ +
+
+ ul.pagination.pagination-lg +
+ +
    +
  • + « +
    • + +
  • + #1 +
    • + +
  • + #2 +
    • + +
  • + #3 +
    • + +
  • + » +
    • +
+
+ +
+
+ ul.pagination.pagination-sm +
+ +
    +
  • + « +
    • + +
  • + #1 +
    • + +
  • + #2 +
    • + +
  • + #3 +
    • + +
  • + » +
    • +
+
+ +
+
+ ul.pager +
+ + + + +
+ +

Labels

+ +

.label.label-default .label.label-primary .label.label-success .label.label-info .label.label-warning .label.label-danger

+ +

Jumbotron

+ +
+

.jumbotron

+ +
+

Heading

+ +

Paragraph

+ +

Button

+
+
+ +

Page header

+ +
+
+

.page-header h3 small

+
+
+ +

Thumbnails

+ + +
+
+

.thumbnail

+ +
+ thumbnail + +
+

.caption h3

+ +

Paragraph

+ +

Button

+
+
+
+ +
+

.thumbnail

+ +
+ thumbnail + +
+

Caption

+ +

Paragraph

+ +

Button

+
+
+
+ +
+

.thumbnail

+ +
+ thumbnail + +
+

Caption

+ +

Paragraph

+ +

Button

+
+
+
+ +
+

.thumbnail

+ +
+ thumbnail + +
+

Caption

+ +

Paragraph

+ +

Button

+
+
+
+
+ +

Alerts

+ +
+ + +
+ .alert.alert-dismissible +
+
+ +
+
+
+ .alert.alert-success a.alert-link +
+
+ +
+
+ .alert.alert-info a.alert-link +
+
+ +
+
+ .alert.alert-warning a.alert-link +
+
+ +
+
+ .alert.alert-danger a.alert-link +
+
+
+ +

Progress bars

+ +
+

.progress

+ +
+
+ .progress-bar +
+
+ +
+
+ .progress-bar.progress-bar-success +
+
+ +
+
+ .progress-bar.progress-bar-info +
+
+ +
+
+ .progress-bar.progress-bar-warning +
+
+ +
+
+ .progress-bar.progress-bar-danger +
+
+
+ +
+

.progress .progress-bar.progress-bar-striped

+ +
+
+
+ +
+ +
+ +
+ +
+
+
+ +
+

.progress.active + .progress-bar.progress-bar-striped

+ +
+
+
+ +
+ +
+ +
+ +
+
+
+ +

Media object

+ +
+ .media + +
+ .media-object + +
+

.media-body + h4.media-heading

← a.media-left img.media-object +
+
+

+ +
+ .media + +
+ + + +
+

.media-body + h4.media-heading

← a.media-left.media-middle + img.media-object + +
+ .media-object + +
+

.media .media-body + h4.media-heading

← a.media-left + img.media-object +
+
+
+
+

+ +
+ ul.media-list + +
    +
  • + + + +
    +

    li.media .media-body + h4.media-heading

    ← a.media-left.media-bottom + img.media-object + +
    + .media-object + +
    +

    .media .media-body + h4.media-heading

    ← a.media-left + img.media-object +
    +
    +
    +
    • + +
  • +
    +

    li.media .media-body + h4.media-heading

    a.media-right img.media-object → +
    .media-object +
    • +
+
+ +

List group

+ +
+

ul.list-group

+ +
    +
  • li.list-group-item
    • + +
  • List item #2 .badge
    • + +
  • List item #3
    • +
+
+ +
+
+

div.list-group

+ +
+ a.list-group-item + a.list-group-item.list-group-item-success a.list-group-item.list-group-item-info a.list-group-item.list-group-item-warning a.list-group-item.list-group-item-danger +
+
+ +
+

div.list-group

+ +
+ a.list-group-item.active a.list-group-item.list-group-item-success.active + a.list-group-item.list-group-item-info.active a.list-group-item.list-group-item-warning.active + a.list-group-item.list-group-item-danger.active +
+
+
+ +
+

div.list-group

+ +
+ +

h4.list-group-item-heading

+ +

p.list-group-item-text

 + +

List group item heading

+ +

Paragraph

 +
+
+ +

Panels

+ +
+

.panel.panel-default

+ +
+
+ .panel-heading +
+ +
+

.panel-heading h3.panel-title

+
+ +
+ .panel-body +
+ +
+ .panel-footer +
+
+
+ +
+

.panel.panel-primary

+ +
+
+ .panel-heading +
+ +
+ .panel-body +
+
+
+ +
+
+

.panel.panel-success

+ +
+
+ .panel-heading +
+ +
+ .panel-body +
+
+
+ +
+

.panel.panel-info

+ +
+
+ .panel-heading +
+ +
+ .panel-body +
+
+
+
+ +
+
+

.panel.panel-warning (with table)

+ +
+
+ .panel-heading +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
HeaderHeaderHeader
DataDataData
DataDataData
+
+
+ +
+

.panel.panel-danger (with list group)

+ +
+
+ .panel-heading +
+ +
    +
  • List item
    • + +
  • List item
    • + +
  • List item
    • +
+
+
+
+ +

Wells

+ +
+
+
+ .well.well-lg +
+
+ +
+
+ .well +
+
+ +
+
+ .well.well-sm +
+
+
+ +

Javascript

+ +

Modals

+ +

Via data attributes: + data-toggle="modal" data-target="#modal" + Launch + modal

+ +

Via Javascript: $('#modal').modal() + Launch modal

+ +
+ Large + modal Small modal +
+ +
+ + +
+
+

.modal .modal-dialog .modal-content

+ +
+
+ + +

.modal-header + h4.modal-title

+
+ +
+ .modal-body +
+ +
+ .modal-footer +
+
+
+
+
+ +

Options: backdrop: true|false|'static' keyboard: + true|false show: true|false remote: + false|path

+ +

Methods: .modal('toggle') .modal('show') + .modal('hide')

+ +

Events: show.bs.modal shown.bs.modal + hide.bs.modal hidden.bs.modal + loaded.bs.modal

+ + + + + + + +

Dropdowns

+ +

Via data attributes: data-toggle="dropdown"

+ +
+
+ Dropdown + trigger + + +
+
+ +


+ Via Javascript: + $('.dropdown-toggle').dropdown()(data-toggle="dropdown" + still required)

+ +

Methods: .dropdown('toggle')

+ +

Events: show.bs.dropdown shown.bs.dropdown + hide.bs.dropdown hidden.bs.dropdown

+ +

Tabs

+ +

Via data attributes: data-toggle="tab"

+ +
+ + +
+
+

Content #1: .table-content .tab-pane.active

+
+ +
+

Content #2: .table-content .tab-pane

+
+
+
+ +

Via Javascript: $(this).tab('show')

+ +
+ + +
+
+

Content #1: .table-content .tab-pane.fade.in.active

+
+ +
+

Content #2: .table-content .tab-pane.fade

+
+
+
+ +

Events: show.bs.tab shown.bs.tab

+ +

Tooltips

+ +

Usage: $('[data-toggle="tooltip"]').tooltip()

+ +
+ +
+ +
+ + +
+
+ You must initialize them yourself +
+ +
+
+
+ +

Options: animation: true|false html: + false|true selector: false|string
+ title: ''|function container: false|string
+ placement: top|location|auto|function
+ trigger: hover focus|click|manual
+ delay: 0|{show:500, hide:100}

+ +

Methods: .tooltip('show') .tooltip('hide') + .tooltip('toggle') .tooltip('destroy')

+ +

Events: show.bs.tooltip shown.bs.tooltip + hide.bs.tooltip hidden.bs.tooltip

+ +

Popovers

+ +

Usage: $('[data-toggle="popover"]').popover()

+ +
+ +
+ +
+ + +
+
+ +

Popover

+ +
+

You must initialize them yourself

+
+
+
+ +


+ Options: animation: true|false html: false|true + selector: false|string
+ title: ''|function content: ''|function + container: false|string
+ placement: right|location|auto|function
+ trigger: click|hover|focus|manual
+ delay: 0|{show:500, hide:100}

+ +

Methods: .popover('show') .popover('hide') + .popover('toggle') .popover('destroy')

+ +

Events: show.bs.popover shown.bs.popover + hide.bs.popover hidden.bs.popover

+ +

Alerts

+ +

Via data attributes (close button): + data-dismiss="alert"

+ +
+
+ .alert.alert-danger.fade.in +
+
+ +

Via Javascript: $('.alert').alert()

+ +

Methods: .alert('close')

+ +

Events: close.bs.alert closed.bs.alert

+ +

Buttons

+ +

Stateful button: data-loading-text="Loading..." + data-complete-text="Completed"

+ +
+ +

+ +
+ Single toggle: +

+ +
+ Checkbox: data-toggle="buttons" + +
+ + + +
+

+ +
+ Radio: data-toggle="buttons" + +
+ + +
+

+ +

Methods: .button('toggle') .button('loading') + .button('reset') .button(string)

+ +

Collapse

+ +

Via data attributes: data-toggle="collapse"

+ +
+

#accordion.panel-group

+ +
+
+
+

data-toggle="collapse" + data-parent="#accordion" href="#collapse-1"

+
+ +
+
+ #collapse-1.collapse.in +
+
+
+ +
+
+

data-toggle="collapse" + data-parent="#accordion" href="#collapse-2"

+
+ +
+
+ #collapse-2.collapse +
+
+
+
+
+ +

Via Javascript: $(".collapse").collapse()

+ +

Options: parent: false|selector toggle: + true|false

+ +

Methods: .collapse('toggle') .collapse('show') + .collapse('hide')

+ +

Events: show.bs.collapse shown.bs.collapse + hide.bs.collapse hidden.bs.collapse

+ + + +

Via data attributes: data-target="#carousel" + data-slide data-slide-to + data-ride

+ +

Via Javascript: $('.carousel').carousel()

+ +
+

.carousel.slide

+ + +

+ +

Options: interval: 5000 pause: hover + wrap: true|false

+ +

Methods: .carousel('cycle') .carousel('pause') + .carousel(number) .carousel('prev') + .carousel('next')

+ +

Events: slide.bs.carousel slid.bs.carousel

+ diff --git a/luciexpress/htdocs/plugins/core/pages/bootstrap.js b/luciexpress/htdocs/plugins/core/pages/bootstrap.js new file mode 100644 index 000000000..1033811a0 --- /dev/null +++ b/luciexpress/htdocs/plugins/core/pages/bootstrap.js @@ -0,0 +1 @@ +// bootstrap example page diff --git a/luciexpress/htdocs/plugins/core/plugin.json b/luciexpress/htdocs/plugins/core/plugin.json index a958ff913..cd50c3d53 100644 --- a/luciexpress/htdocs/plugins/core/plugin.json +++ b/luciexpress/htdocs/plugins/core/plugin.json @@ -17,6 +17,9 @@ }, "login": { "view": "pages/login" + }, + "bootstrap": { + "view": "pages/bootstrap" } } } diff --git a/luciexpress/htdocs/plugins/core/widgets/luci.footer.html b/luciexpress/htdocs/plugins/core/widgets/luci.footer.html index 1b2f27d12..c8ac3fbf8 100644 --- a/luciexpress/htdocs/plugins/core/widgets/luci.footer.html +++ b/luciexpress/htdocs/plugins/core/widgets/luci.footer.html @@ -4,9 +4,13 @@ {{lang.title}}{{$last ? '' : ' | '}} + | Theme: Default + Vodaphone + Inteno
WAN IP Address: {{wanip}} | Firmware version: {{firmwareVersion}}
+ diff --git a/luciexpress/htdocs/plugins/core/widgets/luci.footer.js b/luciexpress/htdocs/plugins/core/widgets/luci.footer.js index 8e8a65b35..2f8362174 100644 --- a/luciexpress/htdocs/plugins/core/widgets/luci.footer.js +++ b/luciexpress/htdocs/plugins/core/widgets/luci.footer.js @@ -32,7 +32,7 @@ $juci.module("core") controller: "luciFooterController" }; }) -.controller("luciFooterController", function($scope, $rpc, $languages, gettextCatalog){ +.controller("luciFooterController", function($scope, $rpc, $config, $languages, gettextCatalog){ // TODO: move this into a higher level controller maybe? $scope.languages = $languages.getLanguages(); $scope.isActiveLanguage = function(lang){ @@ -50,4 +50,23 @@ $juci.module("core") $scope.$apply(); }); }); + + // TODO: remove the theme switches when done developing + $(function(){ + var themes = $config.themes; + $config.theme = localStorage.getItem("theme") || "default"; + var bootstrap = $(''); + var theme = $(''); + bootstrap.appendTo('head'); + theme.appendTo('head'); + $('.theme-link').click(function(){ + var themename = $(this).attr('data-theme'); + var themeurl = themes[themename]; + $config.theme = themename; + localStorage.setItem("theme", themename); + bootstrap.attr('href',themeurl+"/css/bootstrap.min.css"); + theme.attr('href',themeurl+"/css/theme.css"); + window.location.reload(); + }); + }); }); diff --git a/luciexpress/htdocs/plugins/core/widgets/luci.layout.with_sidebar.html b/luciexpress/htdocs/plugins/core/widgets/luci.layout.with_sidebar.html index df51819c5..8c342fa06 100644 --- a/luciexpress/htdocs/plugins/core/widgets/luci.layout.with_sidebar.html +++ b/luciexpress/htdocs/plugins/core/widgets/luci.layout.with_sidebar.html @@ -1,6 +1,6 @@
-
+
@@ -13,7 +13,6 @@
-
diff --git a/luciexpress/htdocs/plugins/core/widgets/luci.navbar.js b/luciexpress/htdocs/plugins/core/widgets/luci.navbar.js index ab14d13cf..c88b1bc03 100644 --- a/luciexpress/htdocs/plugins/core/widgets/luci.navbar.js +++ b/luciexpress/htdocs/plugins/core/widgets/luci.navbar.js @@ -22,8 +22,21 @@ $juci.module("core") -.directive("luciNavbar", function(){ +.directive("luciNavbar", function($location, $rootScope){ var plugin_root = $juci.module("core").plugin_root; + function activate(){ + var path = $location.path().replace(/^\/+|\/+$/g, ''); + var subtree = path.split(".")[0]; + + setTimeout(function(){ + $("ul.nav li a").parent().removeClass("open"); + $("ul.nav li a[href='#!"+subtree+"']").addClass("open"); + $("ul.nav li a[href='#!"+subtree+"']").parent().addClass("open"); + }, 0); + }; + $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){ + activate(); + }); return { restrict: 'E', templateUrl: plugin_root+"/widgets/luci.navbar.html", @@ -32,13 +45,13 @@ $juci.module("core") }) .controller("NavigationCtrl", function($scope, $location, $navigation, $rootScope, $config, $rpc){ $scope.tree = $navigation.tree(); - $scope.hasChildren = function(menu){ return menu.children_list > 0; } $scope.isActive = function (viewLocation) { return viewLocation === $location.path(); }; + $(function(){ var themes = $config.themes; $config.theme = localStorage.getItem("theme") || "default"; @@ -55,21 +68,4 @@ $juci.module("core") theme.attr('href',themeurl+"/css/theme.css"); }); }); - - function activate(){ - var path = $location.path().replace(/^\/+|\/+$/g, ''); - var subtree = path.split(".")[0]; - $scope.tree = $navigation.tree(); - - setTimeout(function(){ - - $("ul.nav li a").parent().removeClass("open"); - $("ul.nav li a[href='#!"+subtree+"']").addClass("open"); - $("ul.nav li a[href='#!"+subtree+"']").parent().addClass("open"); - }, 0); - }; - $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){ - activate(); - }); - activate(); }); diff --git a/luciexpress/htdocs/plugins/core/widgets/luci.top_bar.html b/luciexpress/htdocs/plugins/core/widgets/luci.top_bar.html index 172ac673e..66cbc8d55 100644 --- a/luciexpress/htdocs/plugins/core/widgets/luci.top_bar.html +++ b/luciexpress/htdocs/plugins/core/widgets/luci.top_bar.html @@ -1,26 +1,21 @@ -
-
-
- - - -
-
- - {{$select.selected.label}} - -
{{mode.label}}
- - -
+ +
+
+
+
{{ model }}
+
+ + {{$select.selected.label}} + +
{{mode.label}}
+ +
diff --git a/luciexpress/htdocs/plugins/router/pages/settings.uci.html b/luciexpress/htdocs/plugins/router/pages/settings.uci.html index f1a98abfd..5c10b05b9 100644 --- a/luciexpress/htdocs/plugins/router/pages/settings.uci.html +++ b/luciexpress/htdocs/plugins/router/pages/settings.uci.html @@ -29,11 +29,11 @@
-
+
{{k}}
- +
diff --git a/luciexpress/htdocs/plugins/vodaphone/plugin.json b/luciexpress/htdocs/plugins/vodaphone/plugin.json index 69ac9b427..60275ec5e 100644 --- a/luciexpress/htdocs/plugins/vodaphone/plugin.json +++ b/luciexpress/htdocs/plugins/vodaphone/plugin.json @@ -1,5 +1,6 @@ { "scripts": [ - "widgets/vodaphone.navbar" + "widgets/vodaphone.navbar", + "widgets/vodaphone.top_bar" ] } diff --git a/luciexpress/htdocs/plugins/vodaphone/widgets/vodaphone.navbar.js b/luciexpress/htdocs/plugins/vodaphone/widgets/vodaphone.navbar.js index a632b1445..62c6a6332 100644 --- a/luciexpress/htdocs/plugins/vodaphone/widgets/vodaphone.navbar.js +++ b/luciexpress/htdocs/plugins/vodaphone/widgets/vodaphone.navbar.js @@ -21,33 +21,21 @@ */ $juci.module("vodaphone") -.directive("luciNavbar", function($http, $compile, $templateCache){ +.directive("luciNavbar", function($http, $compile, $templateCache, $config){ var plugin_root = $juci.module("vodaphone").plugin_root; + var target_tpl = "plugins/core/widgets/luci.navbar.html"; return { priority: 100, // give it higher priority than built-in ng-click //templateUrl: plugin_root+"/widgets/vodaphone.navbar.html", replace: true, - /*compile: function(tElement, tAtrrs) { - templateLoader = $http.get(plugin_root + "/widgets/vodaphone.navbar.html", {cache: $templateCache}) - .success(function(html) { - $templateCache.put("plugins/core/widgets/luci.navbar.html", html); - tElement.html(html); - }); - - return function (scope, element, attrs) { - templateLoader.then(function (templateText) { - //alert(tElement.html()); - element.html($compile(tElement.html())(scope)); - }); - }; - }, */ link: function(scope, element, attrs){ - var promise = $http.get(plugin_root + "/widgets/vodaphone.navbar.html", {cache: $templateCache}).success(function(html) { - $templateCache.put("plugins/core/widgets/luci.navbar.html", html); - element.html(html); - }).then(function (response) { - element.replaceWith($compile(element.html())(scope)); - }); + if($config.theme == "vodaphone" && !$templateCache.get(plugin_root + "/widgets/vodaphone.navbar.html")){ + var promise = $http.get(plugin_root + "/widgets/vodaphone.navbar.html", {cache: $templateCache}).success(function(html) { + $templateCache.put(target_tpl, html); + }).then(function (response) { + element.replaceWith($compile($templateCache.get(target_tpl))(scope)); + }); + } } }; }); diff --git a/luciexpress/htdocs/plugins/vodaphone/widgets/vodaphone.top_bar.html b/luciexpress/htdocs/plugins/vodaphone/widgets/vodaphone.top_bar.html new file mode 100644 index 000000000..327157a91 --- /dev/null +++ b/luciexpress/htdocs/plugins/vodaphone/widgets/vodaphone.top_bar.html @@ -0,0 +1,27 @@ +
+
+
+ + + +
+
+ + {{$select.selected.label}} + +
{{mode.label}}
+ + +
+
+
+
+
diff --git a/luciexpress/htdocs/plugins/vodaphone/widgets/vodaphone.top_bar.js b/luciexpress/htdocs/plugins/vodaphone/widgets/vodaphone.top_bar.js new file mode 100644 index 000000000..e7eae5dea --- /dev/null +++ b/luciexpress/htdocs/plugins/vodaphone/widgets/vodaphone.top_bar.js @@ -0,0 +1,41 @@ +/* + * juci - javascript universal client interface + * + * Project Author: Martin K. Schröder + * + * Copyright (C) 2012-2013 Inteno Broadband Technology AB. All rights reserved. + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU General Public License + * version 2 as published by the Free Software Foundation. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program; if not, write to the Free Software + * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA + * 02110-1301 USA + */ + +$juci.module("vodaphone") +.directive("luciTopBar", function($http, $compile, $templateCache, $config){ + var plugin_root = $juci.module("vodaphone").plugin_root; + var target_tpl = "plugins/core/widgets/luci.top_bar.html"; + return { + priority: 100, // give it higher priority than built-in ng-click + //templateUrl: plugin_root+"/widgets/vodaphone.navbar.html", + replace: true, + link: function(scope, element, attrs){ + if($config.theme == "vodaphone" && !$templateCache.get(plugin_root + "/widgets/vodaphone.top_bar.html")){ + var promise = $http.get(plugin_root + "/widgets/vodaphone.top_bar.html", {cache: $templateCache}).success(function(html) { + $templateCache.put(target_tpl, html); + }).then(function (response) { + element.replaceWith($compile($templateCache.get(target_tpl))(scope)); + }); + } + } + }; +}); diff --git a/luciexpress/htdocs/themes/default/css/theme.css b/luciexpress/htdocs/themes/default/css/theme.css index 9bfe2e6a8..eb843cc07 100644 --- a/luciexpress/htdocs/themes/default/css/theme.css +++ b/luciexpress/htdocs/themes/default/css/theme.css @@ -10,11 +10,38 @@ div.logo { margin-left: 20px; } -.top-bar { - margin-bottom: 20px; - background-color: #EBEBEB; - border-bottom: 1px solid #ccc; - padding-bottom: 10px; + +/* ========================================================================== + Header + ========================================================================== */ +#logo { + float: left; +} +#top-bar { + background-color: #ebebeb; + border-bottom: 1px solid #bbb; + height: 50px; + margin-bottom: 20px; + position: relative; + font-size: 14px; + line-height: 50px; +} +#top-bar-content { + width: 950px; + margin: 0 auto; + padding-left: 80px; +} +#top-info-mode { + float: right; +} +#top-info-logged-user { + float: right; + margin-right: 15px; +} +#top-info-mode .chosen-container { + background-color: #fff; + display: block; + margin-top: 5px; } .navbar-default { diff --git a/luciexpress/htdocs/themes/default/index.html b/luciexpress/htdocs/themes/default/index.html index b3c2a9f88..b3ee104bd 100644 --- a/luciexpress/htdocs/themes/default/index.html +++ b/luciexpress/htdocs/themes/default/index.html @@ -1,27 +1,2 @@ -
-
-
-
{{ config.model }}
-
- - {{$select.selected.label}} - -
{{mode.label}}
- - - -
-
-
-
+
diff --git a/luciexpress/htdocs/themes/inteno-red/css/theme.css b/luciexpress/htdocs/themes/inteno-red/css/theme.css index 184b04435..3a82853ed 100644 --- a/luciexpress/htdocs/themes/inteno-red/css/theme.css +++ b/luciexpress/htdocs/themes/inteno-red/css/theme.css @@ -18,3 +18,34 @@ div.logo { .navbar-default { box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); } + +.luci-nav a { + color: #444; +} +.nav > li.open > a { + color: #ee0000 !important; +} +.navbar .nav > li.open > a { + color: #fff !important; +} + + +.animate-show { + line-height: 20px; + opacity: 1; + padding: 10px; + border: 1px solid black; + background: white; +} + +.animate-show.ng-hide-add.ng-hide-add-active, +.animate-show.ng-hide-remove.ng-hide-remove-active { + -webkit-transition: all linear 0.5s; + transition: all linear 0.5s; +} + +.animate-show.ng-hide { + line-height: 0; + opacity: 0; + padding: 0 10px; +} diff --git a/luciexpress/htdocs/themes/inteno-red/index.html b/luciexpress/htdocs/themes/inteno-red/index.html new file mode 100644 index 000000000..9676c154e --- /dev/null +++ b/luciexpress/htdocs/themes/inteno-red/index.html @@ -0,0 +1 @@ +
diff --git a/luciexpress/htdocs/themes/vodaphone/css/theme.css b/luciexpress/htdocs/themes/vodaphone/css/theme.css index b81956f6c..3bec41ae5 100644 --- a/luciexpress/htdocs/themes/vodaphone/css/theme.css +++ b/luciexpress/htdocs/themes/vodaphone/css/theme.css @@ -1,3 +1,4 @@ + html { box-sizing: border-box; } @@ -43,6 +44,9 @@ a { color: inherit; } +.luci-content { + +} /* ========================================================================== Font ========================================================================== */ @@ -475,6 +479,12 @@ body { width: 100%; margin: 0; } +/* + Please make selectors specific, otherwise you override them everywhere. + This is important because for instance bootstrap panel is also using + h3 tags and they look messed up if global h3 tag is overridden here! +*/ +/* h1 { color: #e60000; font-family: "VodafoneRgRegular"; @@ -533,8 +543,8 @@ h3.margin-top { } + .row { - /*font-weight: bold;*/ display: table-row; line-height: 24px; width: 100%; @@ -543,15 +553,6 @@ h3.margin-top { padding-top: 20px; padding-bottom: 20px; } -/*.row:not(.description) .left { - width: 70%; -} -.row:not(.description) .leftHasRight { - width: 22%; -} -.row:not(.description) .left + .right { - width: 30%; -}*/ .h3-content .row + .row > div, .h3-wrapper-content .row + .row > div { border-top: solid 1px #e6e6e6; @@ -657,7 +658,7 @@ input.max2-network { text-align: center; padding: 7px 0px !important; } - +*/ /* Text box input error */