diff --git a/bin/css/cologne.blue.css b/bin/css/cologne.blue.css
index 58bc2681588dd83531323d0a5f8eb6b6282e3e31..7afc201d228f8cc128609c41a78017925df34f32 100644
--- a/bin/css/cologne.blue.css
+++ b/bin/css/cologne.blue.css
@@ -18,7 +18,8 @@ a:hover {
border-color: #3986dd;
}*/
-.product-data-more-tabs-tab.active {
+.product-data-more-tabs-tab.active,
+.qui-contextitem-container .qui-contextitem-icon {
color: #3986dd;
}
diff --git a/bin/css/frontend-users.css b/bin/css/frontend-users.css
index 936de0d171d0c4669df2eaf3d0f6d1cace25f1a3..cb86290c39041e2b234fa40b3cb66150b495e338 100644
--- a/bin/css/frontend-users.css
+++ b/bin/css/frontend-users.css
@@ -11,6 +11,15 @@
background: url("../images/brushed_alu.png");
}
+.quiqqer-frontendUsers-controls-profile .quiqqer-frontendUsers-controls-profile-categories {
+ padding-right: 20px;
+}
+
+.quiqqer-frontendUsers-controls-profile .quiqqer-frontendUsers-controls-profile-categoryContent {
+ padding-left: 20px;
+}
+
+
/*****************/
/* category menu */
/*****************/
diff --git a/bin/css/style.css b/bin/css/style.css
index aabd28d93243ccf46e71eab8e989d171ac18bc1e..200b43f3fb7d5dbc2a8be67c8f83c84d9462c8d7 100644
--- a/bin/css/style.css
+++ b/bin/css/style.css
@@ -613,6 +613,10 @@ small {
height: 100% !important;
}
+.qui-contextmenu-container .qui-contextitem {
+ border-bottom: none;
+}
+
/*********************/
/* user icon top bar */
/*********************/
diff --git a/bin/javascript/init.js b/bin/javascript/init.js
index 2cef5a46d3920263bcf2c0c30551dce5e9ad1b9e..27096e0edabba62eb5dc7221d2c58feaa300c3a2 100644
--- a/bin/javascript/init.js
+++ b/bin/javascript/init.js
@@ -1,7 +1,8 @@
+var lg = 'quiqqer/template-cologne';
+
window.addEvent('domready', function () {
"use strict";
- var lg = 'quiqqer/template-cologne';
var Header = document.getElement('.cologne-header');
require.config({
@@ -25,10 +26,8 @@ window.addEvent('domready', function () {
QUI.setAttribute('control-loader-type', 'fa-spinner');
QUI.setAttribute('control-loader-color', '#999999');
-
-
- var Logo = document.getElement('header .logo'),
- UserButton = document.getElements('.cologne-header-control-user'),
+ var Logo = document.getElement('header .logo'),
+ UserButton = document.getElements('.cologne-header-control-user'),
UserButtonLoader = UserButton.getElement('.cologne-header-control-user-loader');
window.addEvent('load', function () {
@@ -39,84 +38,18 @@ window.addEvent('domready', function () {
* Login
*/
require([
- 'controls/users/LoginWindow',
- 'controls/users/LogoutWindow'
- ], function (LoginWindow, LogoutWindow) {
-
+ 'utils/Controls'
+ ], function (QUIControlUtils) {
if (QUIQQER_USER.id) {
var UserIcon = document.getElement(
'[data-qui="package/quiqqer/frontend-users/bin/frontend/controls/UserIcon"]'
);
- if (UserIcon) {
- UserIcon.addEvent('load', function () {
- var Control = QUI.Controls.getById(UserIcon.get('data-quiid'));
- var Menu = Control.$Menu;
-
- require([
- 'Locale',
- 'qui/controls/contextmenu/Item',
- 'qui/controls/contextmenu/Separator'
- ], function (QUILocale, Item, Separator) {
- Menu.appendChild(
- new Item({
- icon : 'fa fa-sign-out',
- text : QUILocale.get('quiqqer/template-cologne', 'frontend.usericon.menuentry.logout.label'),
- events: {
- click: function () {
-
- new LogoutWindow({
- class : 'cologne-logout-dialog',
- title : false,
- icon : false,
- maxHeight: 350,
- maxWidth : 400,
- events : {
- onOpen: function (Popup) {
-
- var Content = Popup.getElm();
-
- var ContentElms = [
- Content.getElement('.qui-window-popup-content'),
- Content.getElement('.qui-window-popup-buttons')
- ];
-
- ContentElms.each(function (ContentElm) {
- ContentElm.setStyle('opacity', 0);
- });
-
- var CancelButton = Content.getElement('button[name="cancel"]');
- if (CancelButton) {
- CancelButton.addClass('btn-secondary btn-outline');
- }
-
- // workaround due to the CancelButton.addClass
- // to avoid the "flash" effect
- (function () {
- ContentElms.each(function (ContentElm) {
- moofx(ContentElm).animate({
- opacity: 1
- });
- })
- }).delay(50)
- }
- }
- }).open();
-
- }
- }
- })
- );
- });
-
- Control.addEvent('onMenuShow', function (UserIconControl, MenuNode) {
- MenuNode.setStyles({
- left : null,
- right: -25
- });
- });
+ QUIControlUtils.getControlByElement(UserIcon).then(function (UserIconControl) {
+ UserIconControl.addEvent('load', function () {
+ userIconLoadEvent(UserIconControl, QUILocale);
});
- }
+ })
}
UserButton.addEvents({
@@ -126,33 +59,7 @@ window.addEvent('domready', function () {
}
if (!QUIQQER_USER.id) {
- new LoginWindow({
- title : false,
- maxHeight : 500,
- maxWidth : 400,
- icon : false,
- social : false,
- registration: false,
- logo : Logo.src,
- events : {
- onSuccess: function () {
- window.location.reload();
- },
- onOpen : function (Popup) {
- var Content = Popup.getElm().getElement('.quiqqer-loginWindow-content');
-
- Content.setStyle('opacity', 0);
- new Element('h2', {
- 'class': 'quiqqer-loginWindow-content-title',
- html : QUILocale.get(lg, 'frontend.popup.login.title')
- }).inject(Content.getElement('img'), 'after');
-
- moofx(Content).animate({
- opacity: 1
- });
- }
- }
- }).open();
+ createLoginWindow(Logo, QUILocale);
}
}
});
@@ -316,3 +223,125 @@ window.addEvent('domready', function () {
}
});
});
+
+/**
+ * UserIcon load event
+ *
+ * @param UserIconControl
+ * @param QUILocale
+ */
+function userIconLoadEvent (UserIconControl, QUILocale) {
+ var Menu = UserIconControl.$Menu;
+
+ require([
+ 'controls/users/LogoutWindow',
+ 'qui/controls/contextmenu/Item',
+ 'qui/controls/contextmenu/Separator'
+ ], function (LogoutWindow, Item, Separator) {
+ Menu.appendChild(new Separator());
+ // own logout entry
+ Menu.appendChild(
+ new Item({
+ icon : 'fa fa-sign-out',
+ text : QUILocale.get('quiqqer/template-cologne', 'frontend.usericon.menuentry.logout.label'),
+ events: {
+ click: function () {
+ createLogoutWindow(LogoutWindow);
+ }
+ }
+ })
+ );
+ });
+
+ UserIconControl.addEvent('onMenuShow', function (UserIconControl, MenuNode) {
+ MenuNode.setStyles({
+ left : null,
+ right: -25
+ });
+ });
+}
+
+/**
+ * Create and open logout window
+ *
+ * @param LogoutWindow
+ */
+function createLogoutWindow (LogoutWindow) {
+ new LogoutWindow({
+ class : 'cologne-logout-dialog',
+ title : false,
+ icon : false,
+ maxHeight: 350,
+ maxWidth : 400,
+ events : {
+ onOpen: function (Popup) {
+
+ var Content = Popup.getElm();
+
+ var ContentElms = [
+ Content.getElement('.qui-window-popup-content'),
+ Content.getElement('.qui-window-popup-buttons')
+ ];
+
+ ContentElms.each(function (ContentElm) {
+ ContentElm.setStyle('opacity', 0);
+ });
+
+ var CancelButton = Content.getElement('button[name="cancel"]');
+ if (CancelButton) {
+ CancelButton.addClass('btn-secondary btn-outline');
+ }
+
+ // workaround due to the CancelButton.addClass
+ // to avoid the "flash" effect
+ (function () {
+ ContentElms.each(function (ContentElm) {
+ moofx(ContentElm).animate({
+ opacity: 1
+ });
+ })
+ }).delay(50)
+ }
+ }
+ }).open();
+}
+
+/**
+ * Create and open login popup
+ *
+ * @param {HTMLElement} Logo
+ * @param QUILocale
+ */
+function createLoginWindow (Logo, QUILocale) {
+ require([
+ 'controls/users/LoginWindow'
+ ], function (LoginWindow) {
+ new LoginWindow({
+ title : false,
+ maxHeight : 500,
+ maxWidth : 400,
+ icon : false,
+ social : false,
+ registration: false,
+ logo : Logo.src,
+ events : {
+ onSuccess: function () {
+ window.location.reload();
+ },
+ onOpen : function (Popup) {
+ var Content = Popup.getElm().getElement('.quiqqer-loginWindow-content');
+
+ Content.setStyle('opacity', 0);
+ new Element('h2', {
+ 'class': 'quiqqer-loginWindow-content-title',
+ html : QUILocale.get(lg, 'frontend.popup.login.title')
+ }).inject(Content.getElement('img'), 'after');
+
+ moofx(Content).animate({
+ opacity: 1
+ });
+ }
+ }
+ }).open();
+ })
+}
\ No newline at end of file
diff --git a/index.php b/index.php
index a97abcd50f404388c455fd059ed107992ba70872..d1c3751a71a059e4333f6e7eccdcfe380e2de0d7 100644
--- a/index.php
+++ b/index.php
@@ -20,7 +20,8 @@
/* user avatar */
$Avatar = new QUI\FrontendUsers\Controls\UserIcon([
- 'User' => QUI::getUserBySession()
+ 'showLogout' => false, // template cologne use own logout popup (see bin/javascript/init.js)
+ 'User' => QUI::getUserBySession()
]);
$Engine->assign([
@@ -28,5 +29,5 @@
'Project' => $Project,
'typeClass' => $typeClass,
'Menu' => $Menu,
- 'Avatar' => $Avatar
+ 'Avatar' => $Avatar
]);