diff --git a/install/ui/index.html b/install/ui/index.html index 5dc70db56..0523df4d1 100644 --- a/install/ui/index.html +++ b/install/ui/index.html @@ -28,43 +28,6 @@ - - -
- -
-
-
-
-
-
-
- - - - - -
- -
- - - - + + \ No newline at end of file diff --git a/install/ui/ipa.css b/install/ui/ipa.css index 3e443d54e..11b9aa7f3 100644 --- a/install/ui/ipa.css +++ b/install/ui/ipa.css @@ -280,7 +280,7 @@ body { } /* ---- Navigation ---- */ -#navigation { +.navigation { position: absolute; top: 34px; left: 6px; @@ -288,64 +288,61 @@ body { height: 102px; } -#navigation.tabs-3 { +.navigation ul { + list-style-type: none; +} + +.navigation .submenu li { + float: left; + position: relative; + list-style: none; + white-space:nowrap; +} +/* +.navigation.tabs-3 { height: 150px; -} +}*/ -div.tabs { +.submenu { width: 100%; - min-height: 4em; - background: transparent; +/* min-height: 4em; + background: transparent;*/ } -.tabs.ui-tabs, .tabs .ui-tabs { - padding: 0; -} +/* ---- Navigation level 1 ---- */ -/* ---- Tabs level 1 ---- */ - -.tabs.ui-widget { - border: none; -} - -.tabs1 > .ui-tabs-nav { - background: transparent; -} - -.tabs1 > .ui-tabs-nav > .ui-state-hover { - background: url(images/hover-tab.png); -} - -.tabs1 > .ui-tabs-nav { - padding: 33px 0 0; +.menu-level-1 > ul { + height: 38px; + padding: 34px 0 0; margin: 0; - border: none; +/* border: none;*/ } -.tabs1 > .ui-tabs-nav li { - -moz-border-radius: 0 !important; - -webkit-border-radius: 0 !important; - border-radius: 0 !important; +.menu-level-1 > ul > li { + height: 36px; + padding: 0 18px; border: 1px solid #A0A0A0; - background: none; + border-bottom:none; background-image: url(images/mainnav-tab-off.png); margin: 0 0.4em 0 0; text-align: center; vertical-align:baseline; } -.tabs1 > .ui-tabs-nav > li.ui-tabs-selected { - padding: 0; - background-image: url(images/mainnav-tab-on.png); - text-align: center; +.menu-level-1 > ul > li.ui-state-hover, +.menu-level-1 > ul > li:hover { + background: url(images/hover-tab.png); } -.tabs1 > .ui-tabs-nav > li > a { - -moz-border-radius: 0 !important; - -webkit-border-radius: 0 !important; +.menu-level-1 > ul > li.selected { + padding-bottom: 1px; + background-image: url(images/mainnav-tab-on.png); +} + +.menu-level-1 > ul > li > a { font-family: "Overpass Bold","Liberation Sans", Arial, sans-serif; min-width: 5em; - height: 20px; + line-height: 38px; color: #858585; margin: 0 auto; text-align:center; @@ -353,54 +350,41 @@ div.tabs { text-shadow: 1px 1px 0 #FFFFFF; } -.tabs1 > .ui-tabs-nav > li > a:link, -span.main-nav-off > a:visited{ - color: #858585; -} - -.tabs1 > .ui-tabs-nav > li.ui-tabs-selected > a { +.menu-level-1 > ul > li.selected > a { color: #1e5e05; } -.tabs1 .ui-tabs-panel { + +/* ---- Navigation level 2 ---- */ + +.menu-level-2 { display: block; border-width: 0; padding: 0 0 0 0; background-color: transparent; } -/* ---- Tabs level 2 ---- */ - -.tabs2 { -} - -.tabs2 > .ui-tabs-nav { +.menu-level-2 > ul { padding: 5px 24px 1px; margin: 0; height: 25px; - border: none; - -moz-border-radius: 0; - -webkit-border-radius: 0; - border-radius: 0; - background: transparent; } -.tabs2 > .ui-tabs-nav > li { +.menu-level-2 > ul > li { width: auto; margin: 0; - background: none repeat scroll 0 0 transparent !important; color: white; - border: none; + padding-top: 3px; } -.tabs2 > .ui-tabs-nav > li.ui-tabs-selected { +.menu-level-2 > ul > li.selected { background: url(images/nav-arrow.png) no-repeat scroll center 2.1em transparent !important; - height: 3.1em; + height: 31px; border: none; margin: 0; } -.tabs2 > .ui-tabs-nav > li > a { +.menu-level-2 > ul > li > a { width:auto; padding: 0.3em 0.8em ; -moz-border-radius: 2em !important; @@ -412,38 +396,28 @@ span.main-nav-off > a:visited{ margin: 0 0.3em; } -.tabs2 > .ui-tabs-nav li > a:link, -span.main-nav-off > a:visited { - color: #333333; -} - -.tabs2 > .ui-tabs-nav > li.ui-tabs-selected > a, -.tabs2 > .ui-tabs-nav > li > a:hover { +.menu-level-2 > ul > li.selected > a, +.menu-level-2 > ul > li > a:hover { background-color:#EEEEEE; color: #164304; text-shadow: 1px 1px 0 #FFFFFF; } -/* ---- Tabs level 3 ---- */ - -.tabs3 { +/* ---- Navigation level 3 ---- */ +.menu-level-3 { height: 28px; } -.tabs3 > .ui-tabs-nav { - padding: 1em 22px 0.1em; - border: none; - background: transparent; +.menu-level-3 > ul { + padding: 0 22px 0.1em; } -.tabs3 > .ui-tabs-nav > li { - background: transparent; - border: 0; +.menu-level-3 > ul > li { margin: 0 2.4em 1px 0; } -.tabs3 > .ui-tabs-nav > li > a { +.menu-level-3 > ul > li > a { width: auto; margin: 0; padding: 0.3em 0 0.3em 0; @@ -453,7 +427,7 @@ span.main-nav-off > a:visited { color: #858585; } -.tabs3 > .ui-tabs-nav > li.ui-tabs-selected > a { +.menu-level-3 > ul > li.selected > a { font-family: "Overpass Bold", "Liberation Sans", Arial, sans-serif; color: #1e5e05; } @@ -467,7 +441,7 @@ span.main-nav-off > a:visited { bottom: 10px; } -#content.tabs-3 { +#content.nav-space-3 { top: 175px; } diff --git a/install/ui/jsl.conf b/install/ui/jsl.conf index 4d9f9ef13..e9e3ecc5e 100644 --- a/install/ui/jsl.conf +++ b/install/ui/jsl.conf @@ -132,5 +132,7 @@ +process src/libs/jquery.ordered-map.js +process src/freeipa/*.js +process src/freeipa/_base/*.js ++process src/freeipa/navigation/*.js ++process src/freeipa/widgets/*.js +process src/*.js +process ./*.js \ No newline at end of file diff --git a/install/ui/src/freeipa/Application_controller.js b/install/ui/src/freeipa/Application_controller.js new file mode 100644 index 000000000..6406e8bc4 --- /dev/null +++ b/install/ui/src/freeipa/Application_controller.js @@ -0,0 +1,323 @@ +/* Authors: + * Petr Vobornik + * + * Copyright (C) 2012 Red Hat + * see file 'COPYING' for use and warranty information + * + * This program is free software; you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * 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, see . +*/ + +/** + * Application controller + * + * Controls interaction between navigation, menu and facets. + */ + +define(['dojo/_base/declare', + 'dojo/_base/lang', + 'dojo/_base/array', + 'dojo/on', + 'dojo/topic', + 'dojo/query', + 'dojo/dom-class', + './widgets/App', + './ipa', + './navigation/Menu', + './navigation/Router', + './navigation/menu_spec' + ], + function(declare, lang, array, on, topic, query, dom_class, + App_widget, IPA, Menu, Router, menu_spec) { + + /** + * Main application + * + * This class serves as top level widget. It creates basic UI: controls + * rendering of header, footer and placeholder for facets. + */ + var App = declare(null, { + + app_widget: null, + + router: null, + + menu: null, + + initialized: false, + + facet_changing: false, + + init: function() { + this.menu = new Menu(); + this.router = new Router(); + this.app_widget = new App_widget(); + this.app_widget.menu_widget.set_menu(this.menu); + this.app_widget.container_node = query('body')[0]; + + on(this.app_widget.menu_widget, 'item-select', lang.hitch(this, this.on_menu_click)); + on(this.app_widget, 'profile-click', lang.hitch(this, this.on_profile)); + on(this.app_widget, 'logout-click', lang.hitch(this, this.on_logout)); + on(this.menu, 'selected', lang.hitch(this, this.on_menu_select)); + + topic.subscribe('facet-show', lang.hitch(this, this.on_facet_show)); + topic.subscribe('facet-change', lang.hitch(this, this.on_facet_change)); + topic.subscribe('facet-change-canceled', lang.hitch(this, this.on_facet_canceled)); + topic.subscribe('phase-error', lang.hitch(this, this.on_phase_error)); + topic.subscribe('facet-state-change', lang.hitch(this, this.on_facet_state_changed)); + + this.app_widget.render(); + }, + + /** + * Gets: + * * metadata + * * server configuration + * * user information + */ + get_configuration: function(success_handler, error_handler) { + IPA.init({ on_success: success_handler, on_error: error_handler}); + }, + + /** + * Deduces current application profile - administraion or self-service. + * Initializes profiles's menu. + */ + choose_profile: function() { + + // TODO: change IPA.whoami.cn[0] to something readable + this.update_logged_in(true, IPA.whoami.cn[0]); + var selfservice = this.is_selfservice(); + + + this.app_widget.menu_widget.ignore_changes = true; + + if (selfservice) { + this.menu.name = menu_spec.self_service.name; + this.menu.add_items(menu_spec.self_service.items); + } else { + this.menu.name = menu_spec.admin.name; + this.menu.add_items(menu_spec.admin.items); + } + + this.app_widget.menu_widget.ignore_changes = false; + this.app_widget.menu_widget.render(); + this.app_widget.menu_widget.select(this.menu.selected); + + // now we are ready for displaying a facet + // cat match a facet if hash is set + this.router.startup(); + + // choose default facet if not defined by route + if (!this.current_facet) { + if (selfservice) { + this.on_profile(); + } else { + this.router.navigate_to_entity_facet('user', 'search'); + } + } + }, + + is_selfservice: function() { + var whoami = IPA.whoami; + var self_service = true; + + + if (whoami.hasOwnProperty('memberof_group') && + whoami.memberof_group.indexOf('admins') !== -1) { + self_service = false; + } else if (whoami.hasOwnProperty('memberofindirect_group')&& + whoami.memberofindirect_group.indexOf('admins') !== -1) { + self_service = false; + } else if (whoami.hasOwnProperty('memberof_role') && + whoami.memberof_role.length > 0) { + self_service = false; + } else if (whoami.hasOwnProperty('memberofindirect_role') && + whoami.memberofindirect_role.length > 0) { + self_service = false; + } + + IPA.is_selfservice = self_service; // quite ugly, needed for users + + return self_service; + }, + + update_logged_in: function(logged_in, fullname) { + this.app_widget.set('logged', logged_in); + this.app_widget.set('fullname', fullname); + }, + + on_profile: function() { + this.router.navigate_to_entity_facet('user', 'details', [IPA.whoami.uid[0]]); + }, + + on_logout: function(event) { + IPA.logout(); + }, + + on_phase_error: function(error) { + // FIXME: CHANGE!!! + window.alert('Initialization error, have a coffee and relax.'); +// var container = $('#content').empty(); +// container.append('

Error: '+error_thrown.name+'

'); +// container.append('

'+error_thrown.message+'

'); + }, + + on_facet_change: function(event) { + //this.facet_changing = true; + var new_facet = event.facet; + var current_facet = this.current_facet; + + if (current_facet && !current_facet.can_leave()) { + var permit_clb = function() { + // Some facet's might not call reset before this call but after + // so they are still dirty. Calling reset prevent's opening of + // dirty dialog again. + if (current_facet.is_dirty()) current_facet.reset(); //TODO change + this.router.navigate_to_hash(event.hash, event.facet); + }; + + var dialog = current_facet.show_leave_dialog(permit_clb); + this.router.canceled = true; + dialog.open(); + } + }, + + on_facet_canceled: function(event) { + }, + + on_facet_state_changed: function(event) { + if (event.facet === this.current_facet) { + var hash = this.router.create_hash(event.facet, event.state); + this.router.update_hash(hash, true); + } + }, + + on_facet_show: function(event) { + var facet = event.facet; + + // update menu + var menu_item = this._find_menu_item(facet); + if (menu_item) this.menu.select(menu_item); + + if (!facet.container) { + facet.container_node = this.app_widget.content_node; + } + if (this.current_facet) { + this.current_facet.hide(); + } + this.current_facet = facet; + facet.show(); + }, + + _find_menu_item: function(facet) { + + var items; + + // entity facets + if (facet.entity) { + items = this.menu.query({ entity: facet.entity.name, facet: facet.name }); + } + + // normal facets + if (!items.total) { + items = this.menu.query({ facet: facet.name }); + } + + // entity fallback + if (!items.total && facet.entity) { + items = this.menu.query({ entity: facet.entity.name }); + } + + // fallback: Top level item + if (!items.total) { + items = this.menu.query({ parent: null }); + } + + // select first + if (items.total) { + return items[0]; + } + }, + + /** + * Tries to find menu item with assigned facet and navigate to it. + */ + on_menu_click: function(menu_item) { + this._navigate_to_menu_item(menu_item); + }, + + _navigate_to_menu_item: function(menu_item) { + + if (menu_item.entity) { + // entity pages + this.router.navigate_to_entity_facet( + menu_item.entity, + menu_item.facet, + menu_item.pkeys, + menu_item.args); + } else if (menu_item.facet) { + // concrete facets + this.router.navigate_to_facet(menu_item.facet, menu_item.args); + } else { + // categories, select first posible child + var children = this.menu.query({parent: menu_item.name }); + if (children.total) { + var success = false; + for (var i=0; i