adding automatic conversation to et2-vfs-mime, fix gallery indicators to use images again and some CCS fixes

This commit is contained in:
ralf 2022-05-07 13:31:46 +02:00
parent 849291889e
commit e82387c15e
8 changed files with 59 additions and 17 deletions

View File

@ -12,10 +12,13 @@
use EGroupware\Api;
// add et2- prefix to following widgets/tags
// add et2- prefix to following widgets/tags, if NO <overlay legacy="true"
const ADD_ET2_PREFIX_REGEXP = '#<((/?)([vh]?box|date(-time[^\s]*|-duration|-since)?|textbox|textarea|button|colorpicker|description|image|url(-email|-phone|-fax)?))(/?|\s[^>]*)>#m';
const ADD_ET2_PREFIX_LAST_GROUP = 6;
// unconditional of legacy add et2- prefix to this widgets
const ADD_ET2_PREFIX_LEGACY_REGEXP = '#<(vfs-mime)\s([^/>]+)/>#m';
// switch evtl. set output-compression off, as we cant calculate a Content-Length header with transparent compression
ini_set('zlib.output_compression', 0);
@ -91,6 +94,9 @@ function send_template()
$str = preg_replace('/<(image|description)\s([^><]*)expose_view="true"\s([^><]*)\\/>/',
'<et2-$1-expose $2 $3></et2-$1-expose>', $str);
// modify <(vfs-mime|link-string|link-list) --> <et2-*
$str = preg_replace(ADD_ET2_PREFIX_LEGACY_REGEXP, '<et2-$1 $2></et2-$1>', $str);
// ^^^^^^^^^^^^^^^^ above widgets get transformed independent of legacy="true" set in overlay ^^^^^^^^^^^^^^^^^^
// eTemplate marked as legacy --> replace only some widgets (eg. requiring jQueryUI) with web-components

View File

@ -15,6 +15,7 @@ import {html, LitElement, render} from "@lion/core";
import {et2_nextmatch} from "../et2_extension_nextmatch";
import {Et2Dialog} from "../Et2Dialog/Et2Dialog";
import {ET2_DATAVIEW_STEPSIZE} from "../et2_dataview_controller";
import {egw,egw_get_file_editor_prefered_mimes} from "../../jsapi/egw_global";
// Minimum data to qualify as an image and not cause errors
const IMAGE_DEFAULT = {
@ -883,7 +884,20 @@ export function ExposeMixin<B extends Constructor<LitElement>>(superclass : B)
}
protected expose_onslidecomplete() {}
readonly URL_REGEXP = /url\("([^)]+)"\)/;
protected expose_onslidecomplete()
{
const indicators = this._gallery.container.find('ol.indicator')[0].querySelectorAll('li');
indicators.forEach(indicator => {
if (indicator.style.backgroundImage && indicator.style.backgroundImage !== 'none')
{
const img = indicator.ownerDocument.createElement('img');
img.src = indicator.style.backgroundImage.replace(this.URL_REGEXP, '$1');
indicator.appendChild(img);
indicator.style.backgroundImage = 'none';
}
});
}
protected expose_onclose()
{

View File

@ -3421,20 +3421,25 @@ span.et2_egw_action_ddHelper_itemsCnt {
display: inline-block;
width: auto;
height: 100px;
min-width: 32px;
min-height: 32px;
margin: 0;
background-size: contain;
background-color: transparent;
opacity: 1;
cursor: pointer;
border-radius: 0;
border: 0;
}
.blueimp-gallery > .indicator > li > img {
display: inline-block;
width: auto;
height: 100px;
margin:0;
cursor: pointer;
z-index: -1;
position: relative;
}
/*Make indicator visible all the time to be able accuratley estimate
current active slide position in thubmnal bar*/
/*Make indicator visible all the time to be able accurately estimate
current active slide position in thumbnail bar*/
.blueimp-gallery > .indicator {
opacity: 0; /* Hide it through opacity*/
white-space: nowrap;
@ -3448,7 +3453,6 @@ span.et2_egw_action_ddHelper_itemsCnt {
box-shadow: inset 0px 0px 0px 4px rgba(255, 255, 255, 1);
background-color: transparent;
}
/*Active thumbnail border*/
.blueimp-gallery > .indicator > .active {
-webkit-box-shadow: inset 0px 0px 0px 4px #0c5da5;

View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<?xml-stylesheet type="text/css" href="../less/svg.css" ?>
<svg version="1.1" id="pixelegg_apply" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
<g>
<g>
<path fill="#696969" d="M9.454,26.628h13.092v-1.062H9.454V26.628z M23.515,1.12H1.816
v29.76h28.368V7.57L23.515,1.12z M8.362,3.245h8.729V8.56h4.364V3.245h2.183v7.44H8.362V3.245z M26.91,28.754H5.089v-8.503
c0-1.761,1.465-3.188,3.273-3.188h15.275c1.807,0,3.272,1.428,3.272,3.188V28.754z M9.454,23.44h13.092v-1.063H9.454V23.44z
M9.454,20.251h13.092v-1.062H9.454V20.251z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 938 B

View File

@ -49,7 +49,7 @@ table.egwGridView_grid .tile .file_tile {
display: block;
max-width: 140px;
}
.tile .file_tile img.vfsMimeIcon {
.tile .file_tile img.vfsMimeIcon, .tile .file_tile et2-vfs-mime > img {
height: auto;
width: auto;
max-height: 48px;
@ -76,7 +76,7 @@ table.egwGridView_grid .tile .file_tile {
.tile .file_tile[data-mime^="image"]:hover .et2_label[id*=comment] {
top: 30px;
}
#filemanager-index_nm .file_tile[data-mime^="image"] img.vfsMimeIcon {
#filemanager-index_nm .file_tile[data-mime^="image"] img.vfsMimeIcon, #filemanager-index_nm .file_tile[data-mime^="image"] et2-vfs-mime > img {
height: auto;
max-height: 100px;
}

View File

@ -70,7 +70,8 @@ table.egwGridView_grid .tile .file_tile {
display: block;
max-width: 140px;
}
.tile .file_tile img.vfsMimeIcon {
.tile .file_tile img.vfsMimeIcon,
.tile .file_tile et2-vfs-mime > img {
height: auto;
width: auto;
max-height: 48px;
@ -97,7 +98,8 @@ table.egwGridView_grid .tile .file_tile {
.tile .file_tile[data-mime^="image"]:hover .et2_label[id*=comment] {
top: 30px;
}
#filemanager-index_nm .file_tile[data-mime^="image"] img.vfsMimeIcon {
#filemanager-index_nm .file_tile[data-mime^="image"] img.vfsMimeIcon,
#filemanager-index_nm .file_tile[data-mime^="image"] et2-vfs-mime > img {
height: auto;
max-height: 100px;
}

View File

@ -58,7 +58,8 @@ table.egwGridView_grid .tile .file_tile {
display: block;
max-width: 140px;
}
.tile .file_tile img.vfsMimeIcon {
.tile .file_tile img.vfsMimeIcon,
.tile .file_tile et2-vfs-mime > img {
height: auto;
width: auto;
max-height: 48px;
@ -85,7 +86,8 @@ table.egwGridView_grid .tile .file_tile {
.tile .file_tile[data-mime^="image"]:hover .et2_label[id*=comment] {
top: 30px;
}
#filemanager-index_nm .file_tile[data-mime^="image"] img.vfsMimeIcon {
#filemanager-index_nm .file_tile[data-mime^="image"] img.vfsMimeIcon,
#filemanager-index_nm .file_tile[data-mime^="image"] et2-vfs-mime > img {
height: auto;
max-height: 100px;
}

View File

@ -124,4 +124,3 @@ div#stylite-filemanager-upload {
background-position: center;
}
}