mirror of
https://github.com/Piwigo/Piwigo.git
synced 2026-06-27 21:41:32 +02:00
Handle the appereance switch better
Use Cookies and users prefs rather than trying to use the backend.
This commit is contained in:
HWFord
@@ -65,43 +65,6 @@ if (isset($_GET['plugins_new_order']))
|
||||
exit;
|
||||
}
|
||||
|
||||
$admin_theme = userprefs_get_param('admin_theme', 'clear');
|
||||
// echo('<pre>');print_r($admin_theme);echo('</pre>');
|
||||
|
||||
// theme changer
|
||||
if (isset($_GET['change_theme']))
|
||||
{
|
||||
$admin_themes = array('roma', 'clear');
|
||||
$admin_theme_array = array($admin_theme);
|
||||
$result = array_diff(
|
||||
$admin_themes,
|
||||
$admin_theme_array
|
||||
);
|
||||
|
||||
$new_admin_theme = array_pop(
|
||||
$result
|
||||
);
|
||||
|
||||
userprefs_update_param('admin_theme', $new_admin_theme);
|
||||
|
||||
$url_params = array();
|
||||
foreach (array('page', 'tab', 'section') as $url_param)
|
||||
{
|
||||
if (isset($_GET[$url_param]))
|
||||
{
|
||||
$url_params[] = $url_param.'='.$_GET[$url_param];
|
||||
}
|
||||
}
|
||||
|
||||
$redirect_url = 'admin.php';
|
||||
if (count($url_params) > 0)
|
||||
{
|
||||
$redirect_url.= '?'.implode('&', $url_params);
|
||||
}
|
||||
|
||||
redirect($redirect_url);
|
||||
}
|
||||
|
||||
// +-----------------------------------------------------------------------+
|
||||
// | Synchronize user informations |
|
||||
// +-----------------------------------------------------------------------+
|
||||
@@ -166,15 +129,8 @@ if (count($_GET) != 0 and !empty($_SERVER['QUERY_STRING']))
|
||||
}
|
||||
|
||||
//Set them to light unless we find preference
|
||||
$change_theme_url_light = $change_theme_url.'change_theme=clear';
|
||||
$change_theme_url_dark= $change_theme_url.'change_theme=roma';
|
||||
|
||||
if(isset($_COOKIE["prefersDark"]) and $_COOKIE["prefersDark"]){
|
||||
$change_theme_auto = $change_theme_url_dark;
|
||||
}
|
||||
else{
|
||||
$change_theme_auto = $change_theme_url_light;
|
||||
}
|
||||
// $change_theme_url_light = $change_theme_url.'change_theme=clear';
|
||||
// $change_theme_url_dark= $change_theme_url.'change_theme=roma';
|
||||
|
||||
// ?page=plugin-community-pendings is an clean alias of
|
||||
// ?page=plugin§ion=community/admin.php&tab=pendings
|
||||
@@ -289,11 +245,11 @@ $template->assign(
|
||||
'U_PERMALINKS'=> $link_start.'permalinks',
|
||||
'U_ACTIVITY' => $link_start.'user_activity',
|
||||
'U_PROFILE' => get_root_url().'profile.php',
|
||||
'U_PREF_THEME' => userprefs_get_param('admin_theme', 'clear'),
|
||||
'U_CHANGE_THEME_LIGHT' => $change_theme_url_light,
|
||||
'U_CHANGE_THEME_DARK' => $change_theme_url_dark,
|
||||
'U_CHANGE_THEME_AUTO' => $change_theme_auto,
|
||||
'ADMIN_THEME'=> $admin_theme,
|
||||
// 'U_PREF_THEME' => userprefs_get_param('admin_theme', 'clear'),
|
||||
// 'U_CHANGE_THEME_LIGHT' => $change_theme_url_light,
|
||||
// 'U_CHANGE_THEME_DARK' => $change_theme_url_dark,
|
||||
// 'U_CHANGE_THEME_AUTO' => $change_theme_auto,
|
||||
// 'ADMIN_THEME'=> $admin_theme,
|
||||
)
|
||||
);
|
||||
|
||||
|
||||
@@ -334,6 +334,8 @@ jQuery.fn.pwg_jconfirm_follow_href = function({
|
||||
});
|
||||
}
|
||||
|
||||
//Get username initials
|
||||
//Used in menu and user list page
|
||||
function get_initials(username) {
|
||||
let words = username.toUpperCase().split(" ");
|
||||
let res = words[0][0];
|
||||
@@ -344,31 +346,114 @@ function get_initials(username) {
|
||||
return res;
|
||||
}
|
||||
|
||||
//Set any cookie
|
||||
function setCookie(cname, cvalue, exdays) {
|
||||
const d = new Date();
|
||||
d.setTime(d.getTime() + (exdays*24*60*60*1000));
|
||||
let expires = "expires="+ d.toUTCString();
|
||||
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
|
||||
if (cname == "lang")
|
||||
}
|
||||
|
||||
//Get the value of any cookie with its name
|
||||
function getCookie(cname) {
|
||||
let name = cname + "=";
|
||||
let decodedCookie = decodeURIComponent(document.cookie);
|
||||
let ca = decodedCookie.split(';');
|
||||
for(let i = 0; i <ca.length; i++) {
|
||||
let c = ca[i];
|
||||
while (c.charAt(0) == ' ') {
|
||||
c = c.substring(1);
|
||||
}
|
||||
if (c.indexOf(name) == 0) {
|
||||
return c.substring(name.length, c.length);
|
||||
}
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
//Toggle light or dark mode in admin
|
||||
function toggle_admin_mode(mode) {
|
||||
if ("roma" == mode)
|
||||
{
|
||||
location.reload();
|
||||
//Dark mode
|
||||
$('#theAdminPage').addClass('roma');
|
||||
}
|
||||
else
|
||||
{
|
||||
//Light mode
|
||||
$('#theAdminPage').addClass('clear');
|
||||
}
|
||||
}
|
||||
|
||||
//Function to handle admin mode change, used on click of inputs in menu
|
||||
function checkModeSelection() {
|
||||
//Get the check radio
|
||||
const selectedMode = document.querySelector('input[name="appearance"]:checked');
|
||||
|
||||
//Script to handle menu
|
||||
let autoMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
let userPref = selectedMode.value;
|
||||
|
||||
if('auto' == userPref){
|
||||
if(autoMode){
|
||||
userPref = 'roma';
|
||||
}
|
||||
else if( !autoMode){
|
||||
userPref = 'clear';
|
||||
}
|
||||
setCookie("autoAdminMode",true,30);
|
||||
}
|
||||
else{
|
||||
setCookie("autoAdminMode",false,30);
|
||||
}
|
||||
|
||||
|
||||
$('document').ready(function(){
|
||||
// {* Get the first letter of user name and fill the green circle span
|
||||
toggle_admin_mode(selectedMode.value);
|
||||
setCookie("adminMode",userPref,30);
|
||||
|
||||
//update userpref
|
||||
$.ajax({
|
||||
url: "ws.php?format=json&method=pwg.users.preferences.set",
|
||||
type: "POST",
|
||||
dataType: "JSON",
|
||||
data: {
|
||||
param: 'admin_theme',
|
||||
value: userPref,
|
||||
},
|
||||
success: function (res) {
|
||||
//We refresh at the moment due to how the swicth for themes used to be handled.
|
||||
//The css for roma and clear are in two different themes loaded in two seperate files
|
||||
//Until we change how the admin css is, aka all moved to one theme/One file we need to refresh
|
||||
window.location.replace(window.location.pathname + window.location.search);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// Hide the user options block when we click outisde of it
|
||||
function hide_user_options(e){
|
||||
if (!$(e.target).closest('.user-actions').length) {
|
||||
$('.user-sub-link-container').hide();
|
||||
$('.icon-left-open').show();
|
||||
$('#menubar .user-actions').removeClass('active');
|
||||
}
|
||||
}
|
||||
|
||||
// Check user system preference for light or dark mode,
|
||||
// set the preference in the cookie and change theme accordingly
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
|
||||
let newMode = event.matches ? "roma" : "clear";
|
||||
toggle_admin_mode(newMode);
|
||||
});
|
||||
|
||||
$('document').ready(function()
|
||||
{
|
||||
const isMobile = /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
|
||||
|
||||
// Get the first letter of user name and fill the green circle span
|
||||
const initial_to_fill = get_initials(username);
|
||||
|
||||
const initialSpan = $('#menubar').find(".user-container-initials-wrapper span");
|
||||
initialSpan.html(initial_to_fill);
|
||||
|
||||
const initialSpan = $('#menubar').find(".user-container-initials-wrapper span");
|
||||
initialSpan.html(initial_to_fill);
|
||||
|
||||
// on hover of menu display menu subitems for desktop
|
||||
|
||||
$('.page-link').mouseenter(function (e) {
|
||||
const current_link = $(this);
|
||||
// Add a 2ms delay before displaying menu subitems
|
||||
@@ -398,33 +483,67 @@ $('document').ready(function(){
|
||||
$(document).click(function (e) {
|
||||
hide_user_options(e)
|
||||
});
|
||||
|
||||
// Hide the use options block
|
||||
function hide_user_options(e){
|
||||
if (!$(e.target).closest('.user-actions').length) {
|
||||
$('.user-sub-link-container').hide();
|
||||
$('.icon-left-open').show();
|
||||
$('#menubar .user-actions').removeClass('active');
|
||||
}
|
||||
|
||||
//On document load check if adminMode cookie is set if not set auto preference
|
||||
let adminModeCookie = getCookie("adminMode");
|
||||
let menuSizePreferenceCookie = getCookie("menuSizePreference")
|
||||
|
||||
//Adapt menu size to user cookie
|
||||
if ("reduced" == menuSizePreferenceCookie)
|
||||
{
|
||||
$('#menubar').toggleClass('enlarged').toggleClass('reduced');
|
||||
$('#content').toggleClass('reduced');
|
||||
}
|
||||
|
||||
// Check user preference for light or dark mode, set the preference in the cookie
|
||||
let prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
setCookie("prefersDark",prefersDark,30);
|
||||
|
||||
// Reduce and enlarge menu
|
||||
//Check if adminMode cookie has been set and check the option that corresponds
|
||||
if("" != adminModeCookie)
|
||||
{
|
||||
if (getCookie("autoAdminMode")){
|
||||
adminModeCookie = 'auto'
|
||||
}
|
||||
|
||||
toggle_admin_mode()
|
||||
$('input[name="appearance"]').each(function(){
|
||||
if(adminModeCookie == $( this ).val()){
|
||||
$(this).parent('label').addClass('selected');
|
||||
$(this).siblings('span').toggleClass('icon-circle-empty icon-dot-circled');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//Reduce and enlarge menu
|
||||
//Save the user preferences in the cookies
|
||||
$('#reduce-enlarge').click(function () {
|
||||
//We make sure that we are using a desktop to enable enlarged and reduced
|
||||
const isMobile = /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
|
||||
|
||||
if (!isMobile) {
|
||||
$('#menubar').toggleClass('enlarged').toggleClass('reduced');
|
||||
$('#content').toggleClass('reduced');
|
||||
//Set cookie to be used in user pref for enlarged or reduced menu
|
||||
if($('#menubar').hasClass('enlarged'))
|
||||
{
|
||||
setCookie("menuSizePreference",'enlarged',30);
|
||||
}
|
||||
else if($('#menubar').hasClass('reduced'))
|
||||
{
|
||||
setCookie("menuSizePreference",'reduced',30);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
//Save in user pref/or cookie in the menu is reduce or enlarged
|
||||
// //Actions are for mobile
|
||||
// if (isMobile){
|
||||
// //Toggle slide up of menu
|
||||
// $('#menu-toggle').click(function () {
|
||||
// $('#menubar').toggleClass('open');
|
||||
// });
|
||||
|
||||
// //Toggle menu sub items on mobile touch
|
||||
// $('.page-link').on('pointerdown', function(e) {
|
||||
// if (e.pointerType === 'touch') { // only trigger for touch aka mobile
|
||||
// let child = $(this).find('.sub-link-container');
|
||||
// child.slideToggle();
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
|
||||
})
|
||||
|
||||
@@ -63,76 +63,64 @@ let username = '{$USERNAME}'
|
||||
|
||||
|
||||
<div id="menubar" class="enlarged">
|
||||
<div>
|
||||
<div id="menubar-content">
|
||||
|
||||
<div id="user-actions-container" class="menu-block">
|
||||
<div class="user-actions">
|
||||
<div class="username-container">
|
||||
<div class="user-container-initials-wrapper">
|
||||
<span class="icon-green"><!-- initials --></span>
|
||||
</div>
|
||||
<span id="menu-username" class="reduced-hidden">{$USERNAME}</span>
|
||||
|
||||
<span>
|
||||
<div class="user-container-initials-wrapper">
|
||||
<span class="icon-green"><!-- initials --></span>
|
||||
</div>
|
||||
<span id="menu-username" class="reduced-hidden">{$USERNAME}</span>
|
||||
</span>
|
||||
<i class="icon-left-open reduced-hidden"></i>
|
||||
</div>
|
||||
<i class="icon-left-open reduced-hidden"></i>
|
||||
|
||||
|
||||
<div class="user-sub-link-container">
|
||||
<div class="user-infos">
|
||||
<p id="dropdown-username" class="username">{$USERNAME}</p>
|
||||
<p class="">{$USER_EMAIL}</p>
|
||||
</div>
|
||||
<p class="tiptip" title="{'Switch to clear or dark colors for administration'|translate}">
|
||||
{if $theme_id eq "clear"}
|
||||
<i class="icon-moon-inv"></i>
|
||||
{elseif $theme_id eq "roma"}
|
||||
<i class="icon-sun-inv"></i>
|
||||
{/if}
|
||||
Apperance
|
||||
</p>
|
||||
<div id="apperance-switch-controller">
|
||||
<p><i class="icon-moon-inv"></i>Apperance</p>
|
||||
|
||||
<span>
|
||||
<div id="apperance-switch">
|
||||
|
||||
<a href="{$U_CHANGE_THEME_AUTO}">
|
||||
<label class="font-checkbox no-bold {if $ADMIN_THEME=="auto"}active{/if}">
|
||||
<span class="icon-circle-empty"></span>
|
||||
<span type="radio" name="apperance" value="apperance-auto" checked="checked">
|
||||
<div id="apperance-switch" class="tiptip" title="{'Switch to clear or dark colors for administration'|translate}">
|
||||
<label class="font-checkbox no-bold">
|
||||
<span class="icon-dot-circled"></span>
|
||||
<input type="radio" name="appearance" value="auto" onclick="checkModeSelection()">
|
||||
Automatic
|
||||
</span>
|
||||
</label>
|
||||
</a>
|
||||
|
||||
<a {if $ADMIN_THEME!="clear"}href="{$U_CHANGE_THEME_LIGHT}" {/if}>
|
||||
<label class="font-checkbox no-bold {if $ADMIN_THEME=="clear"}active{/if}">
|
||||
<span class="icon-circle-empty"></span>
|
||||
<span type="radio" name="apperance" value="apperance-light">
|
||||
Light
|
||||
</span>
|
||||
</label>
|
||||
</a>
|
||||
</label>
|
||||
|
||||
<a {if $ADMIN_THEME!="roma"}href="{$U_CHANGE_THEME_DARK}" {/if}>
|
||||
<label class="font-checkbox no-bold {if $ADMIN_THEME=="roma"}active{/if}">
|
||||
<span class="icon-circle-empty"></span>
|
||||
<span type="radio" name="apperance" value="apperance-dark">
|
||||
<label class="font-checkbox no-bold">
|
||||
<span class="icon-dot-circled"></span>
|
||||
<input type="radio" name="appearance" value="clear" onclick="checkModeSelection()">
|
||||
Light
|
||||
</label>
|
||||
|
||||
<label class="font-checkbox no-bold">
|
||||
<span class="icon-dot-circled"></span>
|
||||
<input type="radio" name="appearance" value="roma" onclick="checkModeSelection()">
|
||||
Dark
|
||||
</span>
|
||||
</label>
|
||||
</a>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<a href="{$U_PROFILE}"><i class="icon-brush"></i>Edit my profil</a>
|
||||
<a href="{$U_FAQ}"><i class="icon-help-circled"></i>Help me</a>
|
||||
<a id="log-out"><i class="icon-logout"></i>Log out</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="tiptip" title="{'Gallery'|translate}">
|
||||
<a class="gallery-link mobile-hidden" href="{$U_RETURN}"><i class="icon-home"></i><span class="reduced-hidden">{'Gallery'|@translate} </span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="admin-pages" class="menu-block">
|
||||
<div id="adminHome" class="page-link {if "dashboard" == $ACTIVE_PAGE}active{/if}">
|
||||
<div id="adminHome" class="page-link {if "dashboard" == $ACTIVE_PAGE}active{/if}" title="{'Dashboard'|translate}">
|
||||
<span class="active-border"></span>
|
||||
<a href="{$U_ADMIN}"><i class="icon-television"></i><span class="reduced-hidden">{'Dashboard'|@translate} </span></a>
|
||||
<span class="hover"></span>
|
||||
@@ -288,10 +276,10 @@ let username = '{$USERNAME}'
|
||||
<a class="gallery-link" href="{$U_RETURN}"><i class="icon-home"></i></a>
|
||||
<div>
|
||||
<span class="mobile-reduced">
|
||||
<i class="icon-menu"></i>
|
||||
<i class="icon-menu" id="menu-toggle"></i>
|
||||
</span>
|
||||
<span class="mobile-reduced">
|
||||
<i class="icon-cross"></i>
|
||||
<span class="">
|
||||
<i class="icon-cross"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user