Design fixes on Batch Manager Global, picture modify and tags manager, especially concerning the dark mode

This commit is contained in:
Zacharie
2020-07-21 15:58:43 +02:00
parent d23971901b
commit 14172f7b66
8 changed files with 175 additions and 54 deletions
+6 -10
View File
@@ -260,18 +260,15 @@ UL.thumbnails li.rank-of-image {background-color: #ddd;}
font-weight: bold;
}
/* beta-test begins: specific changes on Batch Manager */
#batchManagerGlobal legend {
color:#555;
#batchManagerGlobal #applyFilter {
color: #3C3C3C;
background-color: #ececec;
}
#batchManagerGlobal fieldset {
margin: 0;
margin-top: 30px;
border: none;
#batchManagerGlobal #applyFilter:hover {
color: white;
background-color: #ffc17e;
}
/* beta-test ends */
.slider-info {color:#ff7700;font-weight:bold;}
@@ -460,7 +457,6 @@ label>p.group_select {
.slider:before {
background-color: white;
box-shadow:0 0 5px #777;
}
input:checked + .slider {
+1 -1
View File
@@ -56,7 +56,7 @@ jQuery(document).ready(function() {
<li><a href="{$U_RATING}"><i class="icon-star"></i>{'Rating'|@translate}</a></li>
<li><a href="{$U_TAGS}"><i class="icon-tags"></i>{'Tags'|@translate}</a></li>
<li><a href="{$U_RECENT_SET}"><i class="icon-clock"></i>{'Recent photos'|@translate}</a></li>
<li><a href="{$U_BATCH}"><i class="icon-pencil"></i>{'Batch Manager'|@translate}</a></li>
<li><a href="{$U_BATCH}"><i class="icon-th"></i>{'Batch Manager'|@translate}</a></li>
{if $NB_PHOTOS_IN_CADDIE > 0}
<li><a href="{$U_CADDIE}"><i class="icon-flag"></i>{'Caddie'|@translate}<span class="adminMenubarCounter">{$NB_PHOTOS_IN_CADDIE}</span></a></li>
{/if}
@@ -333,7 +333,7 @@ var sliders = {
<input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">
<fieldset>
<legend>{'Filter'|@translate}</legend>
<legend><span class='icon-th icon-blue'></span>{'Filter'|@translate}</legend>
<div class="filterBlock">
<div class="actionButtonsBlock">
@@ -353,7 +353,7 @@ var sliders = {
</p>
<p class="actionButtons" id="applyFilterBlock">
<button id="applyFilter" name="submitFilter" type="submit" class="buttonLike">
<button id="applyFilter" name="submitFilter" type="submit">
<i class="icon-arrows-cw"></i> {'Refresh photo set'|@translate}
</button>
</p>
@@ -413,7 +413,7 @@ var sliders = {
<p>{'Album'|@translate}</p>
<a href="#" class="removeFilter" title="{'remove this filter'|translate}"><span>[x]</span></a>
<select data-selectize="categories" data-value="{$filter_category_selected|@json_encode|escape:html}"
data-default="first" name="filter_category" style="width:600px"></select>
data-default="first" name="filter_category"></select>
<label class="font-checkbox"><span class="icon-check"></span><input type="checkbox" name="filter_category_recursive" {if isset($filter.category_recursive)}checked="checked"{/if}> {'include child albums'|@translate}</label>
</li>
@@ -535,7 +535,7 @@ var sliders = {
<fieldset>
<legend>{'Selection'|@translate}</legend>
<legend><span class='icon-filter icon-green'></span>{'Selection'|@translate}</legend>
{if !empty($thumbnails)}
<p id="checkActions">
@@ -606,7 +606,7 @@ UL.thumbnails SPAN.wrap2 {ldelim}
<fieldset id="action">
<legend>{'Action'|@translate}</legend>
<legend><span class='icon-cog icon-red'></span>{'Action'|@translate}</legend>
<div id="forbidAction"{if count($selection) != 0} style="display:none"{/if}>{'No photos selected, no actions possible.'|@translate}</div>
<div id="permitAction"{if count($selection) == 0} style="display:none"{/if}>
@@ -186,6 +186,7 @@ $('#action-delete-picture').on('click', function() {
<p>
<strong>{'Who can see this photo?'|@translate}</strong>
<br>
<div class='select-icon icon-down-open'> </div>
<select name="level" size="1">
{html_options options=$level_options selected=$level_options_selected}
</select>
+1 -1
View File
@@ -130,7 +130,7 @@ var str_tag_found = '{'<b>%d</b> tag found'|@translate}';
</label>
</form>
<div class='selection-controller in-selection-mode'>
<p>{'Selection'|@translate}</p>
<p>{'Select'|@translate}</p>
<a id="selectAll">{'All'|@translate}</a>
<a id="selectNone">{'None'|@translate}</a>
<a id="selectInvert">{'Invert'|@translate}</a>
+90 -28
View File
@@ -345,14 +345,14 @@ TABLE.doubleSelect SELECT.categoryList {
.badge-number {
border-radius: 20px;
background-color: #777;
font-size: 14px;
font-size: 16px;
margin-left: 10px;
font-weight: 700;
position: absolute;
transform: translateY(3px);
text-align: center;
color: #ccc;
padding: 3px 7px;
padding: 0px 7px;
}
/* Pagination */
@@ -410,7 +410,7 @@ TABLE.doubleSelect SELECT.categoryList {
background-color: #FFA646;
border-radius: 15px;
pointer-events: none;
padding: 0px 6px;
padding: 0px 7px;
color: #333
}
@@ -1833,20 +1833,53 @@ LEGEND {
margin-left: 1px;
z-index: 1;
}
#batchManagerGlobal fieldset {
margin: 0;
margin-top: 30px;
border: none;
}
#batchManagerGlobal legend {
font-size: 20px;
color: #444;
margin: 10px 0;
padding: 0;
}
#batchManagerGlobal legend span {
padding: 5px;
border-radius: 100%;
margin-right: 6px;
font-size: 18px;
}
#batchManagerGlobal ul.thumbnails div.actions a {color:#fff;}
#batchManagerGlobal ul.thumbnails span.wrap1:hover div.actions {display:flex;}
#batchManagerGlobal #selectedMessage {padding:5px; border-radius:5px; float: right;}
#batchManagerGlobal #applyOnDetails {text-align: center; margin-top: 8px; color: #FFA646; font-weight: bold;}
#batchManagerGlobal .actionButtons {text-align:left; margin: 0; display: flex; flex-direction: column;}
#batchManagerGlobal #filterList {padding-left:5px; display: flex; flex-wrap: wrap; align-items: start; margin-top: -18px;}
#batchManagerGlobal #filterList li {list-style-type:none;}
#batchManagerGlobal #filterList li p {font-weight: bold; display: contents;}
#batchManagerGlobal a.removeFilter {color:#666;}
#batchManagerGlobal a.removeFilter::before {margin-right:0; content: '\e822'; font-size: 11pt; color: #3C3C3C; margin-left: 6px;}
#batchManagerGlobal #filterList {padding-left:15px; display: flex; flex-wrap: wrap; align-items: start; margin-top: 0px;}
#batchManagerGlobal #filterList li {
list-style-type:none;
background-color: #fafafa;
padding: 10px;
margin: 0px 5px 10px 5px;
box-shadow: 0px 2px 1px #00000024;
border-radius: 5px;
position: relative;
}
#batchManagerGlobal #filterList li p {font-weight: bold;display: block;margin: 0;margin-bottom: 5px;}
#batchManagerGlobal a.removeFilter {color: #AAA;
position: absolute;
right: 5px;
top: 5px;
}
#batchManagerGlobal a.removeFilter::before {margin-right:0; content: '\e822'; font-size: 11pt; color: #3C3C3C; margin-left: 6px; font-size: 12pt;color: #777;}
#batchManagerGlobal a.removeFilter:hover::before {color: #ffa646;}
#batchManagerGlobal a.removeFilter:hover {color:red;}
#batchManagerGlobal .removeFilter span {display:none}
#batchManagerGlobal #applyFilterBlock {margin-top:30px; width: 200px;}
#batchManagerGlobal #applyFilterBlock {margin-top:20px; width: 200px;}
#batchManagerGlobal .useFilterCheckbox {display:none;}
#batchManagerGlobal blockquote {margin:10px 0 0px 0;}
@@ -2070,8 +2103,7 @@ a#showPermissions:hover {text-decoration: none;}
}
.tag-header .selection-controller p {
position: absolute;
transform: translate(10px,-36px);
margin-right: 10px;
color: #555;
}
@@ -2298,6 +2330,7 @@ a#showPermissions:hover {text-decoration: none;}
margin: 0px;
background-color: white;
border: 1px solid #d5d5d5;
padding-left: 6px;
}
.tag-container .tag-box .tag-rename span:hover {
@@ -2470,7 +2503,7 @@ a#showPermissions:hover {text-decoration: none;}
text-align: left;
}
#picture-content input[type=text], #picture-content textarea {
#picture-content input[type=text], #picture-content textarea, #picture-content .selectize-input {
width: calc(100% - 15px);
background-color: #f8f8f8;
padding: 8px;
@@ -2480,6 +2513,10 @@ a#showPermissions:hover {text-decoration: none;}
font-family: "Open Sans", "Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif;
}
#picture-content .selectize-input {
width: 100%;
}
#picture-content input[type=text], #picture-content textarea, #picture-content .selectize-control {
margin-top: 5px;
}
@@ -2505,6 +2542,26 @@ a#showPermissions:hover {text-decoration: none;}
border-color: #888;
}
#picture-content select {
background-color: #FFF;
color: #4E4E4E;
border: 2px solid #7070704f !important;
padding: 10px 18px;
-webkit-appearance: none;
font-weight: 700;
width: calc(100% - 15px);
margin: 0 10px;
}
#picture-content .select-icon {
font-size: 17px;
position: absolute;
color: #6E6E6E;
pointer-events: none;
right: 3%;
transform: translateY(5px);
}
#picture-infos {
display: grid;
grid-template-columns: 50% 50%;
@@ -2861,7 +2918,7 @@ input[type="text"].dError {border-color:#ff7070; background-color:#FFe5e5;}
position: relative;
display: inline-block;
width: 60px;
height: 20px;
height: 24px;
vertical-align:middle;
}
@@ -2890,18 +2947,18 @@ input[type="text"].dError {border-color:#ff7070; background-color:#FFe5e5;}
.slider:before {
position: absolute;
content: "";
height: 22px;
width: 22px;
left: 0px;
bottom: -1px;
height: 16px;
width: 16px;
left: 6px;
bottom: 4px;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider:before {
-webkit-transform: translateX(39px);
-ms-transform: translateX(39px);
transform: translateX(39px);
-webkit-transform: translateX(33px);
-ms-transform: translateX(33px);
transform: translateX(33px);
}
.slider.round {
@@ -3474,7 +3531,7 @@ input:checked + .slider:before {
#UserList .FilterUserBlock{
position: absolute;
right: 0;
top: 2px;
top: 15px;
display: flex;
}
@@ -3872,7 +3929,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
#filter_tags .selectize-control.multi.plugin-remove_button {width: 300px !important;}
#filter_category .selectize-input.items.full.has-options.has-items {padding: 10px 18px; width: 610px; margin-bottom: 5px;}
#filterList .selectize-input.items.not-full.has-options {margin-bottom: 5px;}
#applyFilter {padding: 15px 0px; margin-left: 0; margin-right: 10px; float: left; height: 45.6px;}
#applyFilter {margin-left: 0;float: left;height: 45.6px;font-size: 1em;border: none;cursor: pointer;transition: ease 0.2s;display: flex;align-items: center;justify-content: center;}
#applyFilter.activated {background-color: #FFA646; color: #3C3C3C;}
#removeFilters {margin-top: 20px; margin-left: 13px;}
.filter_search_input {padding: 10px 0px; width: 300px;}
@@ -3899,19 +3956,22 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
.permitActionListButton div.hidden::after {display: none;}
.actionButtonsBlock {width: 200px;}
.actionButtonsBlock .actionButtons:first-child::after {margin-left: 169px; margin-top: 11px;}
#filter_prefilter::before {margin-left: 257px; margin-top: 28px;}
#filter_prefilter::before {margin-left: 257px; margin-top: 35px;}
#filter_category .selectize-control.single .selectize-input::after {content: none;}
#filter_category {width: 600px;}
#filter_category::before {margin-left: 579px; margin-top: 28px; z-index: 2;}
#filter_level::before {margin-top: 28px; margin-left: 260px;}
#filter_category::before {margin-left: 565px;margin-top: 33px; z-index: 2;}
#filter_level::before {margin-top: 34px; margin-left: 260px;}
#action_level::after {margin-top: -56px; margin-left: 254px;}
#filter_search input {width: 300px; box-sizing: border-box; padding: 11px 18px;}
#addFilter, #filterList select, #filter_tags .selectize-input.items.not-full.has-options, .pictureLevels select, #permitAction select{
#addFilter, #applyFilter,#filterList select, #filter_tags .selectize-input.items.not-full.has-options, .pictureLevels select, #permitAction select{
font-family: "Open Sans", "Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif;
-webkit-appearance: none;
font-weight: 700;
}
#action_date_creation input, #action_title input, #action_author input {margin-right: 4px;}
#set_date_creation label {position: relative;}
#set_date_creation i {position: absolute;font-size: 20px;top: 50%;transform: translate(6px, -50%);opacity: 0.6;}
#set_date_creation input {background-color: #f8f8f8;padding: 8px;padding-left: 8px;padding-left: 35px;border-radius: 4px;border-color: #DDD;}
#set_date_creation {margin-top: 5px; margin-left: -2px;}
#action_title .large, #action_author .large {padding: 12px 10px; border: 1px solid #787777a6;margin-bottom: 8px;}
#action_add_tags .selectize-input.items.not-full.has-options,
@@ -3950,14 +4010,16 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
#batchManagerGlobal UL.thumbnails .wrap2 .icon-pencil:hover, #batchManagerGlobal UL.thumbnails .wrap2 .icon-zoom-square:hover {color: #fea744;}
#batchManagerGlobal .deleteDerivButtons a:hover, #batchManagerGlobal #checkActions a:hover {background-color: #ddd;color: #3A3A3A;text-decoration: none;}
#batchManagerGlobal .thumbSelected img {opacity: 0.35; border: 1px solid #fea744 !important;}
#batchManagerGlobal .thumbSelected img { filter: brightness(60%);-webkit-filter: brightness(60%);-moz-filter: brightness(60%);
-o-filter: brightness(60%);
-ms-filter: brightness(60%);}
#batchManagerGlobal li.thumbSelected:hover .font-checkbox [class*="icon-check"]::before {display: block;}
#filter_category .selectize-input.items.full.has-options.has-items .item,
#filter_category .selectize-input.items.not-full.has-options .item,
#filter_category .selectize-input.items.not-full .item {width: 561px; text-overflow: ellipsis;}
#filter_category .selectize-input.items.full.has-options.has-items,
#filter_category .selectize-input.items.not-full.has-options,
#filter_category .selectize-input.items.not-full {width: 610px;}
#filter_category .selectize-input.items.not-full {width: 100%;}
#forbidAction {text-align: center; font-weight: 600; padding: 25px 0; background-color: #f3f3f3;}
.selectionEmptyBlock {text-align: center; font-weight: 600; padding: 90px 0;}
#duplicates_options {display: flex; flex-direction: column;}
+70 -8
View File
@@ -330,6 +330,24 @@ a.stat-box:hover {
font-weight: bold;
}
#batchManagerGlobal #applyFilter {
color: #3C3C3C;
background-color: #ececec;
}
#batchManagerGlobal #applyFilter:hover {
color: white;
background-color: #ffc17e;
}
#batchManagerGlobal #filterList li {
background-color: #3C3C3C;
}
#batchManagerGlobal legend {
color: #BFBFBF;
}
/* TokenInput (with Facebook style for ROMA) */
ul.token-input-list {border-color:#666 !important;background-color:#444 !important;}
ul.token-input-list li input {background-color:#444 !important;}
@@ -347,9 +365,10 @@ div.token-input-dropdown ul li.token-input-selected-dropdown-item {background-co
border-color:#333;
}
#picture-content input[type=text], #picture-content textarea {
#picture-content input[type=text], #picture-content textarea, #picture-content .selectize-input, #picture-content select {
background-color: #444444;
border: 1px solid #666;
color: #c1c1c1;
}
.picture-infos-title, .picture-infos-icon {
@@ -528,8 +547,7 @@ label>p.group_select {
}
.slider:before {
background-color: #f5f5f5;
box-shadow:0 0 2px #777;
background-color: #151515;
}
input:checked + .slider {
@@ -804,16 +822,18 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
#filter_category .selectize-input.items.full.has-options.has-items, #filter_tags .selectize-input.items.not-full.has-options,
#filter_tags .selectize-input.items.not-full, #filter_search input, #action_associate .selectize-input.items.full.has-options.has-items,
#action_dissociate .selectize-input.items.full.has-options.has-items {
background-color: #444444;
color: #BFBFBF;
border: 1px solid #666;
box-shadow: none;
}
#permitAction select {background: #3C3C3C; color: #C0C0C0;}
#set_date_creation input {
background: #3C3C3C;
color: #C0C0C0;
border: none!important;
}
#batchManagerGlobal fieldset {margin: 0; margin-top: 30px; border:none}
#permitAction select {background: #3C3C3C; color: #C0C0C0;}
#action_associate a:last-child {color: #C0C0C0; background-color: #464646;}
#forbidAction, .selectionEmptyBlock {background-color: #f3f3f3;}
#batchManagerGlobal .thumbSelected img {opacity: 1 !important;}
#batchManagerGlobal UL.thumbnails IMG {opacity: 0.65;}
#filter_dimension .slider-choice, #filter_filesize .slider-choice {background-color: #393939;}
#filter_dimension .slider-choice:hover, #filter_filesize .slider-choice:hover, .dimension-cancel:hover {
text-decoration: none; background-color: #ffa646 !important; color: initial;
@@ -943,15 +963,38 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
background-color: #333 !important;
}
.tag-container .tag-box p {
color: #aaa;
}
.tag-header #add-tag.input-mode .add-tag-container input:hover {
background-color: #222 !important;
}
.tag-header .selection-controller p {
color: #c1c1c1;
}
.tag-container.selection .tag-box[data-selected="1"] {
background-color: #f9852c !important;
box-shadow: none;
}
.tag-container .tag-box[data-selected="1"] .select-checkbox {
background-color: #c76a23;
border-color: #c76a23;
}
.tag-container .tag-box .tag-rename .tag-name-editable {
background-color: #666;
color: white;
border-color: #333;
}
.tag-container .tag-box .tag-rename span {
color: #D9D9D9;
}
.tag-select-message {
background: #0051a57d;
color: #bce5f7;
@@ -962,6 +1005,25 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
color: #0051a5;
}
.tag-info.tag-warning {
color: #ffdd99;
background-color: #ee8800;
}
.tag-info.tag-warning a {
color: white;
}
.tag-info.tag-message {
color: #c2f5c2 ;
background-color:#0a0;
}
.tag-info.tag-error {
color: #ffd5dc;
background-color:#f22;
}
/* Icon colors*/
.icon-red {
+1 -1
View File
@@ -519,7 +519,7 @@ $lang['No order field selected'] = 'No order field selected';
$lang['No photo can be deleted'] = "No photo can be deleted";
$lang['No photo in the current set.'] = 'No photo in the current set.';
$lang['No photo in this album'] = "No photo in this album";
$lang['No photo selected, %d photos in current set'] = 'No photo selected, %d photos in current set';
$lang['No photo selected, %d photos in current set'] = 'No photos selected, %d photos in current set';
$lang['No photos selected, no actions possible.'] = 'No photos selected, no actions possible.';
$lang['No results'] = "No results";
$lang['No user to send notifications by mail.'] = "No user to be notified by mail.";