mirror of
https://github.com/Piwigo/Piwigo.git
synced 2026-07-06 18:01:31 +02:00
Issue #1167 : Group manager action and design fixes
* Icon colour standardized with intro page in css * Dark mode colour changes * Load state changes on several actions (especially in delete popin) * Rename group action is now effective if the name didn't change
This commit is contained in:
Zacharie
@@ -603,10 +603,14 @@ input:focus + .slider {
|
||||
}
|
||||
|
||||
.ValidationUserAssociated, .ValidationUserDissociated{
|
||||
color:#00aa00;
|
||||
color:#00aa00 !important;
|
||||
background-color:#c2f5c2;
|
||||
}
|
||||
|
||||
.ValidationUserAssociated p, .ValidationUserDissociated p {
|
||||
color:#00aa00 !important;
|
||||
}
|
||||
|
||||
/*------*/
|
||||
|
||||
.userSeparator {
|
||||
@@ -703,4 +707,29 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
|
||||
.buttonSeparator {color: #3C3C3C;}
|
||||
#uploadForm li.plupload_droptext {background-color: #F5F5F5!important;}
|
||||
.addFilesButtonChanged {background-color: #E5E5E5;}
|
||||
.addFilesButtonChanged:hover {background-color: #BBB;}
|
||||
.addFilesButtonChanged:hover {background-color: #BBB;}
|
||||
|
||||
.icon-red {
|
||||
background-color: #ffcfcf;
|
||||
color: #ff5252;
|
||||
}
|
||||
|
||||
.icon-yellow {
|
||||
color: #ffa744;
|
||||
background-color: #ffe9cf;
|
||||
}
|
||||
|
||||
.icon-purple {
|
||||
background-color: #e0daf4;
|
||||
color: #896af3;
|
||||
}
|
||||
|
||||
.icon-blue {
|
||||
background-color: #cfebff;
|
||||
color: #2883c3;
|
||||
}
|
||||
|
||||
.icon-green {
|
||||
background-color: #d6ffcf;
|
||||
color: #6ece5e;
|
||||
}
|
||||
@@ -1,5 +1,17 @@
|
||||
const DELAY_FEEDBACK = 3000;
|
||||
|
||||
const jConfirm_alert_options = {
|
||||
icon: 'icon-ok',
|
||||
titleClass: "groupAlert",
|
||||
theme:"modern",
|
||||
closeIcon: true,
|
||||
draggable: false,
|
||||
animation: "zoom",
|
||||
boxWidth: '20%',
|
||||
useBootstrap: false,
|
||||
backgroundDismiss: true,
|
||||
animateFromElement: false,
|
||||
typeAnimated: false,
|
||||
}
|
||||
/*-------
|
||||
Group Popin
|
||||
-------*/
|
||||
@@ -85,7 +97,9 @@ jQuery(document).ready(function () {
|
||||
if (data.stat === "ok") {
|
||||
$(".addGroupFormLabelAndInput input").val('');
|
||||
group = data.result.groups[0];
|
||||
createGroup(group).prependTo(".groups")
|
||||
groupBox = createGroup(group)
|
||||
groupBox.prependTo(".groups")
|
||||
setupGroupBox(groupBox);
|
||||
} else {
|
||||
$("#addGroupForm .groupError").html(str_name_taken);
|
||||
$("#addGroupForm .groupError").fadeIn();
|
||||
@@ -110,13 +124,13 @@ var createGroup = function(group) {
|
||||
newgroup.find(".input-edit-group-name").attr("placeholder", group.name);
|
||||
newgroup.find(".group_number_users").html(group.nb_users+" " + ((group.nb_users > 1)? str_members_default:str_member_default));
|
||||
newgroup.find(".group_name-editable").html(group.name);
|
||||
newgroup.find(".manage-permissions").attr("href", "admin.php?page=group_perm&group_id="+group.id)
|
||||
hideAddGroupForm();
|
||||
|
||||
//Setup the icon color
|
||||
var colors = [["#ffa744", "#ffe9cf"],["#896af3", "#e0daf4"], ["#6ece5e","#d6ffcf"],["#2883c3","#cfebff"]];
|
||||
var colorId = Number(group.id)%4;
|
||||
newgroup.find(".icon-users-1").attr("style", "color:"+colors[colorId][0]+"; background-color:"+colors[colorId][1]);
|
||||
|
||||
setupGroupBox(newgroup);
|
||||
var colors = ["icon-red", "icon-blue", "icon-yellow", "icon-purple", "icon-green"];
|
||||
var colorId = Number(group.id)%5;
|
||||
newgroup.find(".icon-users-1").addClass(colors[colorId]);
|
||||
|
||||
//Place group in first Place
|
||||
newgroup.find(".groupMessage").html(str_group_created);
|
||||
@@ -130,7 +144,8 @@ var createGroup = function(group) {
|
||||
-------*/
|
||||
jQuery(document).ready(function () {
|
||||
$(".GroupContainer").each(function () {
|
||||
setupGroupBox($(this));
|
||||
if ($(this).attr("id") != "group-template")
|
||||
setupGroupBox($(this));
|
||||
});
|
||||
});
|
||||
var setupGroupBox = function (groupBox) {
|
||||
@@ -149,48 +164,7 @@ var setupGroupBox = function (groupBox) {
|
||||
|
||||
/* Set the delete action */
|
||||
groupBox.find("#GroupDelete").on("click", function () {
|
||||
$.confirm({
|
||||
title: str_delete.replace("%s",groupBox.find("#group_name").html()),
|
||||
draggable: false,
|
||||
titleClass: "groupDeleteConfirm",
|
||||
theme: "modern",
|
||||
content: "",
|
||||
animation: "zoom",
|
||||
boxWidth: '30%',
|
||||
useBootstrap: false,
|
||||
type: 'red',
|
||||
animateFromElement: false,
|
||||
backgroundDismiss: true,
|
||||
typeAnimated: false,
|
||||
buttons: {
|
||||
confirm: {
|
||||
text: str_yes_delete_confirmation,
|
||||
btnClass: 'btn-red',
|
||||
action: function () {
|
||||
let groupName = groupBox.find(".Group-name-container p").html();
|
||||
deleteGroup(id).then(() => {
|
||||
$.alert({
|
||||
title: str_group_deleted.replace("%s",groupName),
|
||||
icon: 'icon-ok',
|
||||
titleClass: "groupDeleteAlert",
|
||||
theme:"modern",
|
||||
closeIcon: true,
|
||||
content: "",
|
||||
animation: "zoom",
|
||||
boxWidth: '20%',
|
||||
useBootstrap: false,
|
||||
backgroundDismiss: true,
|
||||
animateFromElement: false,
|
||||
typeAnimated: false,
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
cancel: {
|
||||
text: str_no_delete_confirmation
|
||||
}
|
||||
}
|
||||
});
|
||||
deleteGroup(id);
|
||||
});
|
||||
|
||||
/* Set the rename action */
|
||||
@@ -204,10 +178,7 @@ var setupGroupBox = function (groupBox) {
|
||||
|
||||
groupBox.find(".group-rename form").on("submit", function (e) {
|
||||
e.preventDefault();
|
||||
if (groupBox.find(".group_name-editable").val() != groupBox.find("#group_name").html())
|
||||
renameGroup(id, groupBox.find(".group_name-editable").val())
|
||||
else
|
||||
displayRenameForm(false, id)
|
||||
renameGroup(id, groupBox.find(".group_name-editable").val())
|
||||
});
|
||||
|
||||
groupBox.find(".group-rename .icon-cancel").on('click', function() {
|
||||
@@ -234,7 +205,7 @@ var setupGroupBox = function (groupBox) {
|
||||
if (groupBox.data("default") == 1) {
|
||||
setupDefaultActions(id, true);
|
||||
} else if (groupBox.data("default") == 0) {
|
||||
setupDefaultActions(id, false);
|
||||
setupDefaultActions(id, false);
|
||||
}
|
||||
|
||||
groupBox.find(".manage-users").on("click", function(){openUserManager(id)});
|
||||
@@ -290,25 +261,54 @@ var toogleSelection = function(group_id, toggle) {
|
||||
|
||||
/* Group Ajax and Display Functions */
|
||||
var deleteGroup = function (id) {
|
||||
return new Promise((resolve, reject) => {
|
||||
jQuery.ajax({
|
||||
url: "ws.php?format=json&method=pwg.groups.delete",
|
||||
type: "POST",
|
||||
data: "group_id=" + id + "&pwg_token=" + pwg_token,
|
||||
success: function (raw_data) {
|
||||
data = jQuery.parseJSON(raw_data);
|
||||
if (data.stat === "ok") {
|
||||
$("#group-" + id).remove();
|
||||
$(".DeleteGroupList div[data-id="+id+"]").remove()
|
||||
$("#MergeOptionsChoices option[value="+ id +"]").remove()
|
||||
resolve();
|
||||
$.confirm({
|
||||
title: str_delete.replace("%s",$("#group-"+id+" #group_name").html()),
|
||||
draggable: false,
|
||||
titleClass: "groupDeleteConfirm",
|
||||
theme: "modern",
|
||||
content: "",
|
||||
animation: "zoom",
|
||||
boxWidth: '30%',
|
||||
useBootstrap: false,
|
||||
type: 'red',
|
||||
animateFromElement: false,
|
||||
backgroundDismiss: true,
|
||||
typeAnimated: false,
|
||||
buttons: {
|
||||
confirm: {
|
||||
text: str_yes_delete_confirmation,
|
||||
btnClass: 'btn-red',
|
||||
action: function () {
|
||||
let groupName = $("#group-"+id+" .Group-name-container p").html()
|
||||
$.alert({
|
||||
...{title : str_group_deleted.replace("%s",groupName),
|
||||
content: function() {
|
||||
return jQuery.ajax({
|
||||
url: "ws.php?format=json&method=pwg.groups.delete",
|
||||
type: "POST",
|
||||
data: "group_id=" + id + "&pwg_token=" + pwg_token,
|
||||
success: function (raw_data) {
|
||||
data = jQuery.parseJSON(raw_data);
|
||||
if (data.stat === "ok") {
|
||||
$("#group-" + id).remove();
|
||||
$(".DeleteGroupList div[data-id="+id+"]").remove()
|
||||
$("#MergeOptionsChoices option[value="+ id +"]").remove()
|
||||
}
|
||||
},
|
||||
error: function (err) {
|
||||
console.log(err);
|
||||
},
|
||||
})
|
||||
}},
|
||||
...jConfirm_alert_options
|
||||
});
|
||||
}
|
||||
},
|
||||
cancel: {
|
||||
text: str_no_delete_confirmation
|
||||
}
|
||||
},
|
||||
error: function (err) {
|
||||
console.log(err);
|
||||
},
|
||||
});
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var renameGroup = function(id, newName) {
|
||||
@@ -360,20 +360,17 @@ var displayRenameForm = function(doDisplay, grp_id) {
|
||||
}
|
||||
|
||||
var setDefaultGroup = function (id, is_default) {
|
||||
$("#group-"+id+" #GroupOptions").hide();
|
||||
let loadState = new TemporaryState();
|
||||
loadState.removeClass($("#group-" + id + " .is-default-token"), "icon-star");
|
||||
loadState.addClass($("#group-" + id + " .is-default-token"), "icon-spin6");
|
||||
loadState.addClass($("#group-" + id + " .is-default-token"), "animate-spin");
|
||||
loadState.changeAttribute($("#group-" + id + " .is-default-token"), "style", "pointer-events: none; display:block")
|
||||
loadState.changeAttribute($("#group-" + id + " #GroupDefault"), "style", "pointer-events: none")
|
||||
$("#group-" + id + " #GroupDefault").css("width", $("#group-" + id + " #GroupDefault").width())
|
||||
$("#group-" + id + " #GroupDefault").html("<i class='icon-spin6 animate-spin'> </i>")
|
||||
$("#group-" + id + " #GroupDefault").removeClass("icon-star");
|
||||
$("#group-" + id + " #GroupDefault").attr("style", "pointer-events: none; text-align: center;")
|
||||
$("#group-" + id).find(".is-default-token").addClass("icon-spin6").addClass("animate-spin").removeClass("icon-star")
|
||||
jQuery.ajax({
|
||||
url: "ws.php?format=json&method=pwg.groups.setInfo",
|
||||
type: "POST",
|
||||
data: "group_id=" + id + "&pwg_token=" + pwg_token + "&is_default="+is_default,
|
||||
success: function (raw_data) {
|
||||
data = jQuery.parseJSON(raw_data);
|
||||
loadState.reverse();
|
||||
if (data.stat === "ok") {
|
||||
if (is_default) {
|
||||
setupDefaultActions(id,true)
|
||||
@@ -389,18 +386,20 @@ var setDefaultGroup = function (id, is_default) {
|
||||
};
|
||||
|
||||
var setupDefaultActions = function(id, is_default) {
|
||||
$("#group-" + id + " #GroupDefault").attr("style", "");
|
||||
$("#group-" + id + " #GroupDefault").addClass("icon-star")
|
||||
$("#group-" + id).find(".is-default-token").removeClass("icon-spin6").removeClass("animate-spin").addClass("icon-star")
|
||||
if (is_default) {
|
||||
$("#group-" + id).find("#GroupDefault").html(str_unset_default);
|
||||
$("#group-" + id).find(".is-default-token").attr("title",str_unset_default)
|
||||
$("#group-" + id).find(".is-default-token").removeClass("deactivate");
|
||||
$("#group-" + id).find("#GroupDefault").unbind("click");
|
||||
$("#group-" + id).find(".is-default-token").removeClass("deactivate");
|
||||
$("#group-" + id).find("#GroupDefault").on("click", function(){setDefaultGroup(id, false)})
|
||||
$("#group-" + id).find(".is-default-token").on("click", function(){setDefaultGroup(id, false)})
|
||||
} else {
|
||||
$("#group-" + id).find("#GroupDefault").html(str_set_default);
|
||||
$("#group-" + id).find(".is-default-token").attr("title",str_set_default)
|
||||
$("#group-" + id).find(".is-default-token").addClass("deactivate");;
|
||||
$("#group-" + id).find("#GroupDefault").unbind("click");
|
||||
$("#group-" + id).find(".is-default-token").addClass("deactivate");
|
||||
$("#group-" + id).find("#GroupDefault").on("click", function(){setDefaultGroup(id, true)})
|
||||
$("#group-" + id).find(".is-default-token").unbind("click");
|
||||
}
|
||||
@@ -434,12 +433,13 @@ var duplicateAction = function(id) {
|
||||
data: "group_id=" + id + "&pwg_token=" + pwg_token + "©_name=" + copy_name,
|
||||
success: function (raw_data) {
|
||||
data = jQuery.parseJSON(raw_data);
|
||||
console.log(data);
|
||||
loadState.reverse();
|
||||
if (data.stat === "ok") {
|
||||
$("#group-"+id+" #GroupOptions").hide();
|
||||
group = data.result.groups[0];
|
||||
createGroup(group).insertAfter($("#group-"+id));
|
||||
let groupbox = createGroup(group)
|
||||
groupbox.insertAfter($("#group-"+id));
|
||||
setupGroupBox(groupbox);
|
||||
}
|
||||
},
|
||||
error: function (err) {
|
||||
@@ -591,7 +591,6 @@ $('.ConfirmMergeButton').on("click", function() {
|
||||
data = jQuery.parseJSON(raw_data);
|
||||
if (data.stat === "ok") {
|
||||
updateSelectionPanel('Selection');
|
||||
console.log(data);
|
||||
merge_group.forEach(function(id) {
|
||||
($("#group-"+id).fadeOut(complete=function(){
|
||||
$(this).remove();
|
||||
@@ -602,20 +601,11 @@ $('.ConfirmMergeButton').on("click", function() {
|
||||
$("#MergeOptionsChoices").html("");
|
||||
|
||||
$.alert({
|
||||
title: str_merged_into
|
||||
...{title: str_merged_into
|
||||
.replace("%s1",name_merge.toString())
|
||||
.replace("%s2",name_dest),
|
||||
icon: 'icon-ok',
|
||||
titleClass: "groupDeleteAlert",
|
||||
theme:"modern",
|
||||
closeIcon: true,
|
||||
content: "",
|
||||
animation: "zoom",
|
||||
boxWidth: '20%',
|
||||
useBootstrap: false,
|
||||
backgroundDismiss: true,
|
||||
animateFromElement: false,
|
||||
typeAnimated: false,
|
||||
content: "",},
|
||||
...jConfirm_alert_options
|
||||
});
|
||||
|
||||
$("#group-"+dest_grp + " .group_number_users").html("<i class='icon-spin6 animate-spin'> </i>");
|
||||
@@ -675,19 +665,10 @@ $('.ConfirmDeleteButton').on("click", function() {
|
||||
loadState.reverse();
|
||||
updateSelectionPanel("NoSelection");
|
||||
$.alert({
|
||||
title: str_groups_deleted.replace("%s",names.toString()),
|
||||
titleClass: "groupDeleteAlert",
|
||||
theme: "modern",
|
||||
icon: 'icon-ok',
|
||||
closeIcon: true,
|
||||
content: "",
|
||||
animation: "zoom",
|
||||
boxWidth: '20%',
|
||||
useBootstrap: false,
|
||||
backgroundDismiss: true,
|
||||
animateFromElement: false,
|
||||
typeAnimated: false,
|
||||
backgroundDismiss: true,
|
||||
...{title: str_groups_deleted.replace("%s",names.toString()),
|
||||
content: "",
|
||||
},
|
||||
...jConfirm_alert_options
|
||||
});
|
||||
}
|
||||
},
|
||||
@@ -838,9 +819,9 @@ var getUserDisplay = function(username, user_id, grp_id) {
|
||||
data = jQuery.parseJSON(raw_data);
|
||||
if (data.stat === "ok") {
|
||||
let str = str_user_dissociated.replace("%s", username)
|
||||
associateUserInfo.fadeOut();
|
||||
dissociateUserInfo.find("p").html(str);
|
||||
dissociateUserInfo.fadeIn()
|
||||
dissociateUserInfo.delay(DELAY_FEEDBACK).fadeOut()
|
||||
|
||||
userBlock.remove()
|
||||
|
||||
@@ -902,7 +883,9 @@ $(".AddUserBlock button").on("click", function () {
|
||||
}
|
||||
})
|
||||
let userBlock = getUserDisplay(username, id, grp_id).prependTo(".UsersInGroupList");
|
||||
|
||||
|
||||
dissociateUserInfo.fadeOut()
|
||||
|
||||
associateUserInfo.remove()
|
||||
associateUserInfo.insertAfter(userBlock);
|
||||
associateUserInfo.find("p").html(str_user_associated);
|
||||
|
||||
@@ -46,7 +46,7 @@ var rootUrl = '{$ROOT_URL}'
|
||||
</div>
|
||||
<div class="groupHeader">
|
||||
<div class="groupIcon">
|
||||
<div class="icon-users-1" style="color:{$icon_color};background-color:{$icon_background_color}"></div>
|
||||
<div class="icon-users-1 {$grp_color}"></div>
|
||||
<div class="groupMessage icon-ok"></div>
|
||||
<div class="groupError icon-cancel"></div>
|
||||
</div>
|
||||
@@ -149,7 +149,7 @@ var rootUrl = '{$ROOT_URL}'
|
||||
<div id="addGroupForm" class="GroupContainer">
|
||||
<div class="groupError icon-cancel"></div>
|
||||
<div class="addGroupBlock">
|
||||
<div class="icon-plus-circled"></div>
|
||||
<div class="icon-plus-circled icon-blue"></div>
|
||||
<p id="addGroup">{'Add group'|translate}</p>
|
||||
</div>
|
||||
<form>
|
||||
@@ -173,17 +173,16 @@ var rootUrl = '{$ROOT_URL}'
|
||||
{* Template Group (for js application) *}
|
||||
{groupContent grp_id="template" grp_name="Template" grp_members=0 grp_is_default=false}
|
||||
|
||||
{assign var='color_tab' value=[["#ffa744", "#ffe9cf"],["#896af3", "#e0daf4"], ["#6ece5e","#d6ffcf"],["#2883c3","#cfebff"]]}
|
||||
{assign var='color_tab' value=["icon-red", "icon-blue", "icon-yellow", "icon-purple", "icon-green"]}
|
||||
|
||||
{if not empty($groups)}
|
||||
{foreach from=$groups item=group name=group_loop}
|
||||
{assign var='color_id' value=$group.ID%4}
|
||||
{assign var='color_id' value=$group.ID%5}
|
||||
{groupContent
|
||||
grp_id=$group.ID
|
||||
grp_name=$group.NAME
|
||||
grp_members=$group.MEMBERS
|
||||
icon_color=$color_tab[$color_id][0]
|
||||
icon_background_color=$color_tab[$color_id][1]
|
||||
grp_color=$color_tab[$color_id]
|
||||
grp_is_default=$group.IS_DEFAULT
|
||||
}
|
||||
|
||||
|
||||
@@ -64,76 +64,76 @@ jQuery().ready(function(){
|
||||
<div class="stat-boxes">
|
||||
|
||||
{if $NB_PHOTOS > 1}
|
||||
<a class="stat-box stat-box-yellow" href="{$U_ADD_PHOTOS}">
|
||||
<i class="icon-picture"></i>
|
||||
<a class="stat-box" href="{$U_ADD_PHOTOS}">
|
||||
<i class="icon-picture icon-yellow"></i>
|
||||
<span class="number">{$NB_PHOTOS|number_format}</span><span class="caption">{'Photos'|translate}</span>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
{if $NB_ALBUMS > 1}
|
||||
<a class="stat-box stat-box-red" href="{$U_CATEGORIES}">
|
||||
<i class="icon-sitemap"></i>
|
||||
<a class="stat-box" href="{$U_CATEGORIES}">
|
||||
<i class="icon-sitemap icon-red"></i>
|
||||
<span class="number">{$NB_ALBUMS}</span><span class="caption">{'Albums'|translate}</span>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
{if $NB_TAGS > 1}
|
||||
<a class="stat-box stat-box-yellow" href="{$U_TAGS}">
|
||||
<i class="icon-tags"></i>
|
||||
<a class="stat-box" href="{$U_TAGS}">
|
||||
<i class="icon-tags icon-yellow"></i>
|
||||
<span class="number">{$NB_TAGS}</span><span class="caption" title="{'%d associations'|translate:$NB_IMAGE_TAG}">{'Tags'|translate}</span>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
{if $NB_USERS > 2}
|
||||
<a class="stat-box stat-box-purple" href="{$U_USERS}">
|
||||
<i class="icon-users"></i>
|
||||
<a class="stat-box" href="{$U_USERS}">
|
||||
<i class="icon-users icon-purple"></i>
|
||||
<span class="number">{$NB_USERS}</span><span class="caption">{'Users'|translate}</span>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
{if $NB_GROUPS > 0}
|
||||
<a class="stat-box stat-box-purple" href="{$U_GROUPS}">
|
||||
<i class="icon-group"></i>
|
||||
<a class="stat-box" href="{$U_GROUPS}">
|
||||
<i class="icon-group icon-purple"></i>
|
||||
<span class="number">{$NB_GROUPS}</span><span class="caption">{'Groups'|translate}</span>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
{if $NB_COMMENTS > 1}
|
||||
<a class="stat-box stat-box-blue" href="{$U_COMMENTS}">
|
||||
<i class="icon-chat"></i>
|
||||
<a class="stat-box" href="{$U_COMMENTS}">
|
||||
<i class="icon-chat icon-blue"></i>
|
||||
<span class="number">{$NB_COMMENTS}</span><span class="caption">{'Comments'|translate}</span>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
{if $NB_RATES > 0}
|
||||
<a class="stat-box stat-box-yellow" href="{$U_RATING}">
|
||||
<i class="icon-star"></i>
|
||||
<a class="stat-box" href="{$U_RATING}">
|
||||
<i class="icon-star icon-yellow"></i>
|
||||
<span class="number">{$NB_RATES}</span><span class="caption">{'Rating'|translate}</span>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
{if $NB_VIEWS > 0}
|
||||
<a class="stat-box stat-box-blue" href="{$U_HISTORY_STAT}">
|
||||
<i class="icon-signal"></i>
|
||||
<a class="stat-box" href="{$U_HISTORY_STAT}">
|
||||
<i class="icon-signal icon-blue"></i>
|
||||
<span class="number">{$NB_VIEWS}</span><span class="caption">{'Pages seen'|translate}</span>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
{if $NB_PLUGINS > 0}
|
||||
<a class="stat-box stat-box-green" href="{$U_PLUGINS}">
|
||||
<i class="icon-puzzle"></i>
|
||||
<a class="stat-box" href="{$U_PLUGINS}">
|
||||
<i class="icon-puzzle icon-green"></i>
|
||||
<span class="number">{$NB_PLUGINS}</span><span class="caption">{'Plugins'|translate}</span>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
<div class="stat-box stat-box-blue">
|
||||
<i class="icon-hdd"></i>
|
||||
<div class="stat-box">
|
||||
<i class="icon-hdd icon-blue"></i>
|
||||
<span class="number">{$STORAGE_USED}</span><span class="caption">{'Storage used'|translate}</span>
|
||||
</div>
|
||||
|
||||
{if $NB_PHOTOS > 1}
|
||||
<div class="stat-box stat-box-yellow">
|
||||
<i class="icon-back-in-time"></i>
|
||||
<div class="stat-box">
|
||||
<i class="icon-back-in-time icon-yellow"></i>
|
||||
<span class="number">{$first_added_age}</span><span class="caption" title="{'first photo added on %s'|translate:$first_added_date}">{'First photo added'|translate}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -517,35 +517,12 @@ div.stat-box {
|
||||
|
||||
.stat-box i {
|
||||
display: inline-block;
|
||||
background-color: #ffcfcf;
|
||||
color: #ff5252;
|
||||
border-radius: 50%;
|
||||
font-size: 37px;
|
||||
padding: 20px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.stat-box-yellow i {
|
||||
color:#ffa744;
|
||||
background-color: #ffe9cf;
|
||||
}
|
||||
.stat-box-red i {
|
||||
background-color: #ffcfcf;
|
||||
color: #ff5252;
|
||||
}
|
||||
.stat-box-purple i {
|
||||
background-color: #e0daf4;
|
||||
color: #896af3;
|
||||
}
|
||||
.stat-box-green i {
|
||||
background-color: #d6ffcf;
|
||||
color: #6ece5e;
|
||||
}
|
||||
.stat-box-blue i {
|
||||
background-color: #cfebff;
|
||||
color: #2883c3;
|
||||
}
|
||||
|
||||
.stat-box .number, .stat-box .caption {
|
||||
display:block;
|
||||
font-size: 16px;
|
||||
@@ -1673,8 +1650,6 @@ input[type="text"].dError {border-color:#ff7070; background-color:#FFe5e5;}
|
||||
|
||||
.groups .icon-users-1:first-child{
|
||||
font-size: 19px;
|
||||
color: #4d4d4d;
|
||||
background-color: #ffffff;
|
||||
width: 27px;
|
||||
padding: 10px;
|
||||
border-radius: 30px;
|
||||
@@ -2044,17 +2019,17 @@ input:checked + .slider:before {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.groupDeleteConfirm, .groupDeleteAlert {
|
||||
.groupDeleteConfirm, .groupAlert {
|
||||
padding-bottom: 0 !important;
|
||||
color: #3c3c3c !important;
|
||||
line-height: 28px !important;
|
||||
}
|
||||
|
||||
.groupDeleteAlert {
|
||||
.groupAlert {
|
||||
margin-bottom: -2px !important;
|
||||
}
|
||||
|
||||
.groupDeleteConfirm ~ .jconfirm-content-pane, .groupDeleteAlert ~ .jconfirm-content-pane {
|
||||
.groupDeleteConfirm ~ .jconfirm-content-pane, .groupAlert ~ .jconfirm-content-pane {
|
||||
height: 0px !important;
|
||||
margin: 0px !important;
|
||||
}
|
||||
@@ -2063,7 +2038,7 @@ input:checked + .slider:before {
|
||||
text-transform: none !important;
|
||||
}
|
||||
|
||||
.groupDeleteAlert .jconfirm-icon-c i {
|
||||
.groupAlert .jconfirm-icon-c i {
|
||||
color: #0a0 !important;
|
||||
background-color:#c2f5c2 !important;
|
||||
border-radius: 20px;
|
||||
@@ -2073,10 +2048,14 @@ input:checked + .slider:before {
|
||||
font-size: 45px;
|
||||
}
|
||||
|
||||
.groupDeleteAlert .jconfirm-icon-c {
|
||||
.groupAlert .jconfirm-icon-c {
|
||||
margin-bottom: 25px !important;
|
||||
}
|
||||
|
||||
.groupAlert .jconfirm-title {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
|
||||
/*Group checkbox*/
|
||||
|
||||
.Group-checkbox{
|
||||
@@ -2148,8 +2127,6 @@ input:checked + .slider:before {
|
||||
|
||||
.groups .icon-plus-circled{
|
||||
font-size: 19px;
|
||||
color: rgb(44,132,195);
|
||||
background-color: #CDE9FD;
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
padding: 10px;
|
||||
|
||||
+67
-26
@@ -221,27 +221,6 @@ a.stat-box:hover {
|
||||
color:#aeaeae;
|
||||
}
|
||||
|
||||
.stat-box-yellow i {
|
||||
color:#9b5200;
|
||||
background-color: #ffa744;
|
||||
}
|
||||
.stat-box-red i {
|
||||
background-color: #c64444;
|
||||
color: #650101;
|
||||
}
|
||||
.stat-box-purple i {
|
||||
background-color: #ce4baa;
|
||||
color: #52003b;
|
||||
}
|
||||
.stat-box-green i {
|
||||
background-color: #4ac641;
|
||||
color: #014400;
|
||||
}
|
||||
.stat-box-blue i {
|
||||
background-color: #379bbc;
|
||||
color: #003751;
|
||||
}
|
||||
|
||||
/* hacks */
|
||||
* html[lang="en"] body .content h2 , *+html[lang="en"] body .content h2 { text-transform:capitalize; } /* IE */
|
||||
*+html .bigtext { left: 70px; }
|
||||
@@ -270,6 +249,10 @@ a.stat-box:hover {
|
||||
.languageBox {background-color:#333;}
|
||||
.languageName {color:#ccc;}
|
||||
.languageDefault {background-color:#555; color:#aaa;}
|
||||
.groupMessage {color: #c2f5c2 ;background-color: #0a0;}
|
||||
.groupError {color: #ffd5dc;background-color: #f22;}
|
||||
.group-rename input {color: #999;}
|
||||
.GroupBackgroudSelected .Group-name {color: #333 !important;}
|
||||
|
||||
/* Batch Manager */
|
||||
#batchManagerGlobal .thumbnails .font-checkbox [class*="icon-check"]::before {
|
||||
@@ -360,7 +343,7 @@ label>p.group_select {
|
||||
}
|
||||
|
||||
.groups .group_number_users{
|
||||
color:#d5d5d5;
|
||||
color:#777;
|
||||
}
|
||||
|
||||
.addUserButton:hover{
|
||||
@@ -423,8 +406,7 @@ label>p.group_select {
|
||||
}
|
||||
|
||||
.groups #GroupPermission:hover,
|
||||
.groups #GroupDuplicate:hover,
|
||||
.groups #GroupDelete:hover{
|
||||
.group-dropdown-option:hover{
|
||||
background-color:#393939;
|
||||
}
|
||||
|
||||
@@ -510,6 +492,7 @@ input:focus + .slider {
|
||||
|
||||
.GroupBackgroudSelected{
|
||||
background-color:#f9852c!important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.OrangeIcon{
|
||||
@@ -634,12 +617,14 @@ input:focus + .slider {
|
||||
|
||||
.ValidationUserAssociated, .ValidationUserDissociated{
|
||||
background-color:#00aa00;
|
||||
color:#c2f5c2;
|
||||
}
|
||||
|
||||
.ValidationUserAssociated p, .ValidationUserDissociated p{
|
||||
color:#c2f5c2 !important;
|
||||
}
|
||||
|
||||
.groups .showCreateGroup .icon-plus-circled,
|
||||
#UserList .group-name-block span,
|
||||
.groups .icon-users-1:first-child,
|
||||
.groups .showCreateGroup .icon-plus-circled{
|
||||
color:#003751;
|
||||
background-color: #379bbc;
|
||||
@@ -822,3 +807,59 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
|
||||
color: #a7d6ff;
|
||||
padding: 2px 7px;
|
||||
}
|
||||
|
||||
/* Popin Jconfirm*/
|
||||
|
||||
.jconfirm .jconfirm-box {
|
||||
background-color: #333 !important;
|
||||
}
|
||||
|
||||
.jconfirm-title {
|
||||
color: #777 !important;
|
||||
}
|
||||
|
||||
.groupAlert .jconfirm-icon-c i {
|
||||
color:#c2f5c2 !important;
|
||||
background-color:#0a0 !important;
|
||||
}
|
||||
|
||||
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-default {
|
||||
color: #777 !important;
|
||||
background-color: #222 !important;
|
||||
}
|
||||
|
||||
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-default:hover {
|
||||
color: #222!important;
|
||||
background-color: #777 !important;
|
||||
}
|
||||
|
||||
.jconfirm .jconfirm-box.loading::before {
|
||||
background: #333 !important;
|
||||
}
|
||||
|
||||
/* Icon colors*/
|
||||
|
||||
.icon-red {
|
||||
background-color: #c64444;
|
||||
color: #650101;
|
||||
}
|
||||
|
||||
.icon-yellow {
|
||||
color: #9b5200;
|
||||
background-color: #ffa744;
|
||||
}
|
||||
|
||||
.icon-purple {
|
||||
background-color: #ce4baa;
|
||||
color: #52003b;
|
||||
}
|
||||
|
||||
.icon-blue {
|
||||
background-color: #379bbc;
|
||||
color: #003751;
|
||||
}
|
||||
|
||||
.icon-green {
|
||||
background-color: #4ac641;
|
||||
color: #014400;
|
||||
}
|
||||
Reference in New Issue
Block a user