From 3766aa9935b1cc4b069744c313c9b667c9061ec0 Mon Sep 17 00:00:00 2001 From: mistic100 Date: Mon, 4 Aug 2014 21:07:41 +0000 Subject: add MultiView controller on admin page (replaces the "switch theme" button) git-svn-id: http://piwigo.org/svn/trunk@29168 68402e56-0260-453c-a942-63ccdbb3a9ee --- plugins/AdminTools/template/admin_controller.js | 118 ++++++++++ plugins/AdminTools/template/admin_controller.tpl | 39 ++++ plugins/AdminTools/template/admin_style.css | 67 ++++++ plugins/AdminTools/template/public_controller.tpl | 2 +- plugins/AdminTools/template/public_style.css | 251 ++++++++++++++++++++++ plugins/AdminTools/template/style.css | 251 ---------------------- 6 files changed, 476 insertions(+), 252 deletions(-) create mode 100644 plugins/AdminTools/template/admin_controller.js create mode 100644 plugins/AdminTools/template/admin_controller.tpl create mode 100644 plugins/AdminTools/template/admin_style.css create mode 100644 plugins/AdminTools/template/public_style.css delete mode 100644 plugins/AdminTools/template/style.css (limited to 'plugins/AdminTools/template') diff --git a/plugins/AdminTools/template/admin_controller.js b/plugins/AdminTools/template/admin_controller.js new file mode 100644 index 000000000..73f7b1096 --- /dev/null +++ b/plugins/AdminTools/template/admin_controller.js @@ -0,0 +1,118 @@ +var AdminTools = function($) { + var __this = this; + + this.urlWS; + this.urlSelf; + this.multiView; + + var $ato = $('#ato_container'); + + // fill multiview selects + // data came from AJAX request or sessionStorage + function populateMultiView() { + var $multiview = $ato.find('.multiview'); + + if ($multiview.data('init')) return; + + var render = function(data) { + var html = ''; + $.each(data.users, function(i, user) { + if (user.status == 'webmaster' || user.status == 'admin') { + html+= ''; + } + }); + $multiview.find('select[data-type="view_as"]').html(html) + .val(__this.multiView.view_as); + + html = ''; + $.each(['clear','roma'], function(i, theme) { + html+= ''; + }); + $multiview.find('select[data-type="theme"]').html(html) + .val(__this.multiView.theme); + + html = ''; + $.each(data.languages, function(i, language) { + html+= ''; + }); + $multiview.find('select[data-type="lang"]').html(html) + .val(__this.multiView.lang); + + $multiview.data('init', true); + + $multiview.find('.switcher').show(); + }; + + if ('sessionStorage' in window && window.sessionStorage.multiView != undefined) { + render(JSON.parse(window.sessionStorage.multiView)); + } + else { + $.ajax({ + method: 'POST', + url: __this.urlWS + 'multiView.getData', + dataType: 'json', + success: function(data) { + render(data.result); + if ('sessionStorage' in window) { + window.sessionStorage.multiView = JSON.stringify(data.result); + } + }, + error: function(xhr, text, error) { + alert(text + ' ' + error); + } + }); + } + } + + // delete session cache + this.deleteCache = function() { + if ('sessionStorage' in window) { + window.sessionStorage.removeItem('multiView'); + } + }; + + // attach jquery handlers + this.init = function(open) { + $('.multiview').appendTo($ato); + + /* */ + $ato.on({ + 'click': function(e) { + populateMultiView(); + $(this).find('ul').toggle(); + }, + 'mouseleave': function(e) { + if (e.target.tagName.toLowerCase() != "select") { + $(this).find('ul').hide(); + } + } + }); + $ato.find('>a').on('click', function(e) { + e.preventDefault(); + }); + $ato.find('ul').on('mouseleave', function(e) { + if (e.target.tagName.toLowerCase() != "select") { + $(this).hide(); + } + }); + + /* */ + $ato.find('.switcher').on({ + 'change': function() { + if ($(this).data('type') == 'theme') { + if ($(this).val() != __this.multiView.theme) { + window.location.href = __this.urlSelf + 'change_theme=1'; + } + } + else { + window.location.href = __this.urlSelf + 'ato_'+ $(this).data('type') +'='+ $(this).val(); + } + }, + 'click': function(e) { + e.stopPropagation(); + } + }); + }; + + return this; +}(jQuery); \ No newline at end of file diff --git a/plugins/AdminTools/template/admin_controller.tpl b/plugins/AdminTools/template/admin_controller.tpl new file mode 100644 index 000000000..ddc0bc2c9 --- /dev/null +++ b/plugins/AdminTools/template/admin_controller.tpl @@ -0,0 +1,39 @@ +{strip} +{combine_css path=$ADMINTOOLS_PATH|cat:'template/admin_style.css'} +{combine_css path=$ADMINTOOLS_PATH|cat:'template/fontello/css/fontello-ato.css'} +{combine_script id='admintools.controller' load='footer' require='jquery' path=$ADMINTOOLS_PATH|cat:'template/admin_controller.js'} +{/strip} + +{footer_script require='admintools.controller'} +AdminTools.urlWS = '{$ROOT_URL}ws.php?format=json&method='; +AdminTools.urlSelf = '{$ato.U_SELF}'; + +AdminTools.multiView = { + view_as: {$ato.MULTIVIEW.view_as}, + theme: '{$themeconf.name}', + lang: '{$ato.MULTIVIEW.lang}' +}; + +{if $ato.DELETE_CACHE} + AdminTools.deleteCache(); +{/if} + AdminTools.init(); +{/footer_script} + + \ No newline at end of file diff --git a/plugins/AdminTools/template/admin_style.css b/plugins/AdminTools/template/admin_style.css new file mode 100644 index 000000000..e15f4aead --- /dev/null +++ b/plugins/AdminTools/template/admin_style.css @@ -0,0 +1,67 @@ +.icon-ato-null:before { content:' '; } + +#ato_container { + display:inline-block; + position:relative; +} + +.multiview { + display:none; +} + +#ato_container>ul { + position:absolute; + top:27px; + left:auto; + right:0; + background:#fefefe; + padding:0; + margin:0; + box-shadow:3px 3px 5px rgba(0,0,0,0.5); +} + #ato_container>ul li { + list-style:none; + line-height:16px; + font-size:13px; + white-space:nowrap; + } + #ato_container>ul li>* { + display:inline-block; + padding:5px 10px; + border:none; + text-decoration:none; + color:#444; + text-shadow:1px 1px 0px #eee; + } + #ato_container>ul li>*:before { + font-size:16px; + margin-right:0.5em; + } + #ato_container>ul li:hover { + background:#dedede; + } + #ato_container>ul label { + font-weight:bold; + color:#777; + display:inline-block; + width:80px; + padding:5px; + text-align:right; + font-size:11px; + } + #ato_container>ul select, #ato_container>ul option { + font-size:13px; + line-height:15px; + color:#444; + background:#fefefe; + border-radius:2px; + text-shadow:none; + } + #ato_container>ul select { + border:1px solid #777; + height:22px; + padding:2px 3px; + } + #ato_container .switcher { + display:none; + } \ No newline at end of file diff --git a/plugins/AdminTools/template/public_controller.tpl b/plugins/AdminTools/template/public_controller.tpl index 8fd12dcf0..f234880df 100644 --- a/plugins/AdminTools/template/public_controller.tpl +++ b/plugins/AdminTools/template/public_controller.tpl @@ -1,5 +1,5 @@ {strip} -{combine_css path=$ADMINTOOLS_PATH|cat:'template/style.css'} +{combine_css path=$ADMINTOOLS_PATH|cat:'template/public_style.css'} {combine_css path='admin/themes/default/fontello/css/fontello.css'} {combine_css path=$ADMINTOOLS_PATH|cat:'template/fontello/css/fontello-ato.css'} diff --git a/plugins/AdminTools/template/public_style.css b/plugins/AdminTools/template/public_style.css new file mode 100644 index 000000000..9b10158c2 --- /dev/null +++ b/plugins/AdminTools/template/public_style.css @@ -0,0 +1,251 @@ +.icon-ato-null:before { content:' '; } + +.token-input-dropdown { + z-index:10000 !important; +} + +#ato_header, #ato_header_closed { + display:none; +} +#ato_header { + width:100%; +} +#ato_header, #ato_header_closed:not(.smartpocket) { + position:fixed; + top:0; + left:0; + background:#464646; + background-image:linear-gradient(to bottom, #383838 0%, #464646 20%, #464646 80%, #383838 100%); + z-index:1000; +} + +#ato_header>ul { + padding:0; + margin:0; +} + +#ato_header>ul li { + list-style:none; + line-height:16px; + font-size:13px; + white-space:nowrap; +} + #ato_header>ul li>*, #ato_header_closed:not(.smartpocket)>* { + display:inline-block; + padding:5px 10px; + border:none; + text-decoration:none; + } + #ato_header>ul li>*:before { + font-size:16px; + margin-right:0.5em; + } + +#ato_header>ul>li { + float:left; + display:inline-block; + position:relative; + overflow:visible; +} + #ato_header>ul>li a { + color:white; + } + #ato_header>ul>li.right { + float:right; + } + #ato_header>ul>li { + border-left:1px solid #666; + } + #ato_header>ul>li { + border-right:1px solid #222; + } + #ato_header>ul>li>*, #ato_header_closed:not(.smartpocket)>* { + color:#ddd; + text-shadow:1px 1px 0px #222; + } + #ato_header>ul>li.disabled [class*="icon-"] { + color:#888; + text-shadow:none; + } + #ato_header>ul>li:not(.disabled):hover, #ato_header_closed:not(.smartpocket):hover { + background:#222; + background-image:linear-gradient(to bottom, #222, #353535); + } + +#ato_header>ul ul { + display:none; + position:absolute; + top:27px; + left:0; + min-width:100%; + background:#fefefe; + padding:0; + margin:0; + box-shadow:3px 3px 5px rgba(0,0,0,0.5); +} + #ato_header>ul>li.right ul { + left:auto; + right:0; + } + #ato_header>ul ul li { + } + #ato_header>ul ul li:hover { + background:#dedede; + } + #ato_header>ul ul li>* { + color:#444; + text-shadow:1px 1px 0px #eee; + } + #ato_header>ul ul label { + font-weight:bold; + color:#777; + display:inline-block; + width:80px; + padding:5px; + text-align:right; + font-size:11px; + } + #ato_header>ul ul select, #ato_header>ul ul option { + font-size:13px; + line-height:15px; + color:#444; + background:#fefefe; + border-radius:2px; + text-shadow:none; + } + #ato_header>ul ul select { + border:1px solid #777; + height:22px; + padding:2px 3px; + } + #ato_header .switcher { + display:none; + } + +#ato_header_closed:not(.smartpocket) { + left:10px; + font-size:20px; + border-radius:0 0 20% 20%; + box-shadow:1px 1px 1px rgba(0,0,0,0.5); + width:35px; + height:35px; +} + #ato_header_closed:not(.smartpocket).right { + left:auto; + right:10px; + } + #ato_header_closed:not(.smartpocket)>* { + padding:4px; + } +#ato_header_closed.smartpocket { + float:left; + margin-right:10px; +} + #ato_header_closed.smartpocket .ui-btn-inner { + display:none; + } + +#ato_header>ul .close-panel { + padding:6px 1px 4px 5px; +} +#ato_header>ul .close-panel:hover { + color:#d00; +} +#ato_header>ul .saved { + display:none; + border:none !important; + -webkit-animation:blink 0.8s infinite; + animation:blink 0.8s infinite; +} + #ato_header>ul .saved>* { + color:#5f5; + } + +#ato_quick_edit { + padding:10px; +} + #ato_quick_edit fieldset { + margin:0; + padding:0; + border:none; + } + #ato_quick_edit fieldset.left { + float:left; + width:100px; + text-align:center; + } + #ato_quick_edit fieldset.left img { + border-radius:2px; + border:1px solid #111; + } + #ato_quick_edit fieldset.main { + margin:0 0 0 110px; + } + #ato_quick_edit label { + display:block; + font-weight:bold; + } + #ato_quick_edit input, #ato_quick_edit textarea, #ato_quick_edit select { + width:100%; + margin:0 0 1em 0; + border-radius:2px; + padding:2px; + -moz-box-sizing:border-box; + box-sizing:border-box; + } + #ato_quick_edit textarea { + height:110px; + } + #ato_quick_edit input[type="submit"] { + margin:1.5em 0; + cursor:pointer; + background:#e60; + border:none; + color:#fff; + } + #ato_quick_edit input[type="submit"]:hover { + background:#EF962F; + } + #ato_quick_edit ul.token-input-list { + width:100%; + margin:0 0 1em 0; + } + +@-webkit-keyframes blink { + 0% { opacity:0; } + 50% { opacity:1; } + 100% { opacity:0; } +} +@keyframes blink { + 0% { opacity:0; } + 50% { opacity:1; } + 100% { opacity:0; } +} + +@media (max-width:900px) { + #ato_header .ato-min-1 { + font-size:0px; + line-height:0px; + } + #ato_header .ato-min-1:before { + margin-right:0; + } + + #ato_header .ato-hide-1 { + display:none; + } +} + +@media (max-width:750px) { + #ato_header .ato-min-2 { + font-size:0px; + line-height:0px; + } + #ato_header .ato-min-2:before { + margin-right:0; + } + + #ato_header .ato-hide-2 { + display:none; + } +} \ No newline at end of file diff --git a/plugins/AdminTools/template/style.css b/plugins/AdminTools/template/style.css deleted file mode 100644 index 9b10158c2..000000000 --- a/plugins/AdminTools/template/style.css +++ /dev/null @@ -1,251 +0,0 @@ -.icon-ato-null:before { content:' '; } - -.token-input-dropdown { - z-index:10000 !important; -} - -#ato_header, #ato_header_closed { - display:none; -} -#ato_header { - width:100%; -} -#ato_header, #ato_header_closed:not(.smartpocket) { - position:fixed; - top:0; - left:0; - background:#464646; - background-image:linear-gradient(to bottom, #383838 0%, #464646 20%, #464646 80%, #383838 100%); - z-index:1000; -} - -#ato_header>ul { - padding:0; - margin:0; -} - -#ato_header>ul li { - list-style:none; - line-height:16px; - font-size:13px; - white-space:nowrap; -} - #ato_header>ul li>*, #ato_header_closed:not(.smartpocket)>* { - display:inline-block; - padding:5px 10px; - border:none; - text-decoration:none; - } - #ato_header>ul li>*:before { - font-size:16px; - margin-right:0.5em; - } - -#ato_header>ul>li { - float:left; - display:inline-block; - position:relative; - overflow:visible; -} - #ato_header>ul>li a { - color:white; - } - #ato_header>ul>li.right { - float:right; - } - #ato_header>ul>li { - border-left:1px solid #666; - } - #ato_header>ul>li { - border-right:1px solid #222; - } - #ato_header>ul>li>*, #ato_header_closed:not(.smartpocket)>* { - color:#ddd; - text-shadow:1px 1px 0px #222; - } - #ato_header>ul>li.disabled [class*="icon-"] { - color:#888; - text-shadow:none; - } - #ato_header>ul>li:not(.disabled):hover, #ato_header_closed:not(.smartpocket):hover { - background:#222; - background-image:linear-gradient(to bottom, #222, #353535); - } - -#ato_header>ul ul { - display:none; - position:absolute; - top:27px; - left:0; - min-width:100%; - background:#fefefe; - padding:0; - margin:0; - box-shadow:3px 3px 5px rgba(0,0,0,0.5); -} - #ato_header>ul>li.right ul { - left:auto; - right:0; - } - #ato_header>ul ul li { - } - #ato_header>ul ul li:hover { - background:#dedede; - } - #ato_header>ul ul li>* { - color:#444; - text-shadow:1px 1px 0px #eee; - } - #ato_header>ul ul label { - font-weight:bold; - color:#777; - display:inline-block; - width:80px; - padding:5px; - text-align:right; - font-size:11px; - } - #ato_header>ul ul select, #ato_header>ul ul option { - font-size:13px; - line-height:15px; - color:#444; - background:#fefefe; - border-radius:2px; - text-shadow:none; - } - #ato_header>ul ul select { - border:1px solid #777; - height:22px; - padding:2px 3px; - } - #ato_header .switcher { - display:none; - } - -#ato_header_closed:not(.smartpocket) { - left:10px; - font-size:20px; - border-radius:0 0 20% 20%; - box-shadow:1px 1px 1px rgba(0,0,0,0.5); - width:35px; - height:35px; -} - #ato_header_closed:not(.smartpocket).right { - left:auto; - right:10px; - } - #ato_header_closed:not(.smartpocket)>* { - padding:4px; - } -#ato_header_closed.smartpocket { - float:left; - margin-right:10px; -} - #ato_header_closed.smartpocket .ui-btn-inner { - display:none; - } - -#ato_header>ul .close-panel { - padding:6px 1px 4px 5px; -} -#ato_header>ul .close-panel:hover { - color:#d00; -} -#ato_header>ul .saved { - display:none; - border:none !important; - -webkit-animation:blink 0.8s infinite; - animation:blink 0.8s infinite; -} - #ato_header>ul .saved>* { - color:#5f5; - } - -#ato_quick_edit { - padding:10px; -} - #ato_quick_edit fieldset { - margin:0; - padding:0; - border:none; - } - #ato_quick_edit fieldset.left { - float:left; - width:100px; - text-align:center; - } - #ato_quick_edit fieldset.left img { - border-radius:2px; - border:1px solid #111; - } - #ato_quick_edit fieldset.main { - margin:0 0 0 110px; - } - #ato_quick_edit label { - display:block; - font-weight:bold; - } - #ato_quick_edit input, #ato_quick_edit textarea, #ato_quick_edit select { - width:100%; - margin:0 0 1em 0; - border-radius:2px; - padding:2px; - -moz-box-sizing:border-box; - box-sizing:border-box; - } - #ato_quick_edit textarea { - height:110px; - } - #ato_quick_edit input[type="submit"] { - margin:1.5em 0; - cursor:pointer; - background:#e60; - border:none; - color:#fff; - } - #ato_quick_edit input[type="submit"]:hover { - background:#EF962F; - } - #ato_quick_edit ul.token-input-list { - width:100%; - margin:0 0 1em 0; - } - -@-webkit-keyframes blink { - 0% { opacity:0; } - 50% { opacity:1; } - 100% { opacity:0; } -} -@keyframes blink { - 0% { opacity:0; } - 50% { opacity:1; } - 100% { opacity:0; } -} - -@media (max-width:900px) { - #ato_header .ato-min-1 { - font-size:0px; - line-height:0px; - } - #ato_header .ato-min-1:before { - margin-right:0; - } - - #ato_header .ato-hide-1 { - display:none; - } -} - -@media (max-width:750px) { - #ato_header .ato-min-2 { - font-size:0px; - line-height:0px; - } - #ato_header .ato-min-2:before { - margin-right:0; - } - - #ato_header .ato-hide-2 { - display:none; - } -} \ No newline at end of file -- cgit v1.2.3