From f7fc569018a7d540d57ebdb60f73b05a860968f8 Mon Sep 17 00:00:00 2001 From: nathan Date: Wed, 18 May 2022 17:33:40 -0600 Subject: [PATCH] Fix expose CSS & a couple of bugs --- api/js/etemplate/Expose/ExposeMixin.ts | 36 +++++++++++++++++--------- api/templates/default/etemplate2.css | 33 +++++++++++++++++++---- 2 files changed, 52 insertions(+), 17 deletions(-) diff --git a/api/js/etemplate/Expose/ExposeMixin.ts b/api/js/etemplate/Expose/ExposeMixin.ts index af431f8ed9..3c9d17c52e 100644 --- a/api/js/etemplate/Expose/ExposeMixin.ts +++ b/api/js/etemplate/Expose/ExposeMixin.ts @@ -11,7 +11,7 @@ // Don't import this more than once import "../../../../node_modules/blueimp-gallery/js/blueimp-gallery.min"; -import {html, LitElement, render} from "@lion/core"; +import {css, 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"; @@ -29,10 +29,10 @@ const IMAGE_DEFAULT = { // For filtering to only show things we can handle const MIME_REGEX = (navigator.userAgent.match(/(MSIE|Trident)/)) ? // IE only supports video/mp4 mime type - new RegExp(/(video\/mp4)|(image\/:*(?!tif|x-xcf|pdf))|(audio\/:*)/, 'ig') : - new RegExp(/(video\/(mp4|ogg|webm))|(image\/:*(?!tif|x-xcf|pdf))|(audio\/:*)/, 'ig'); + new RegExp(/(video\/mp4)|(image\/:*(?!tif|x-xcf|pdf))|(audio\/:*)/, 'i') : + new RegExp(/(video\/(mp4|ogg|webm))|(image\/:*(?!tif|x-xcf|pdf))|(audio\/:*)/, 'i'); -const MIME_AUDIO_REGEX = new RegExp(/(audio\/:*)/, 'ig'); +const MIME_AUDIO_REGEX = new RegExp(/(audio\/:*)/, 'i'); // open office document mime type currently supported by webodf editor const MIME_ODF_REGEX = new RegExp(/application\/vnd\.oasis\.opendocument\.text/); @@ -75,6 +75,15 @@ export function ExposeMixin>(superclass : B) { return class extends superclass { + static get styles() + { + return [ + ...super.styles, + css` + ` + ]; + } + static get properties() { return { @@ -123,6 +132,9 @@ export function ExposeMixin>(superclass : B) if(document.body.querySelector('#blueimp-gallery') == null) { + this.egw().includeCSS(egw.webserverUrl + "/node_modules/blueimp-gallery/css/blueimp-gallery.css"); + this.egw().includeCSS(egw.webserverUrl + "/node_modules/blueimp-gallery/css/blueimp-gallery-indicator.css"); + this.egw().includeCSS(egw.webserverUrl + "/node_modules/blueimp-gallery/css/blueimp-gallery-video.css"); // Create Gallery DOM structure render(this._galleryTemplate(), document.body); } @@ -283,7 +295,7 @@ export function ExposeMixin>(superclass : B) // The class for all slides: slideClass: 'slide', // The slide class for loading elements: - slideLoadingClass: '', + slideLoadingClass: 'loading', // The slide class for elements that failed to load: slideErrorClass: 'slide-error', // The class for the content element loaded into each slide: @@ -412,10 +424,10 @@ export function ExposeMixin>(superclass : B)

- × + + + +
    `; @@ -558,7 +570,7 @@ export function ExposeMixin>(superclass : B) continue; } let data = egw.dataGetUIDdata(uid); - if(data && data.data && data.data.mime && MIME_REGEX.test(data.data.mime) && !MIME_AUDIO_REGEX.test(data.data.mime)) + if(typeof data?.data?.mime === "string" && MIME_REGEX.test(data.data.mime) && !(MIME_AUDIO_REGEX.test(data.data.mime))) { let media = this.getMedia(data.data); images[image_index++] = Object.assign({}, data.data, media[0]); @@ -628,7 +640,7 @@ export function ExposeMixin>(superclass : B) this._gallery.slidesContainer[0].insertBefore(this._gallery.slides[(index + 1)], undefined); if(active) { - node.addClass(this._gallery.options.activeIndicatorClass); + node.classList.add(this._gallery.options.activeIndicatorClass); } this._gallery[var_name].splice(new_index, 1); } @@ -880,7 +892,7 @@ export function ExposeMixin>(superclass : B) // Gallery always adds to the end, causing problems with pagination for(let i in images) { - this.set_slide(i, images[i]); + this.set_slide(parseInt(i), images[i]); } } } diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css index 1b5d16c9d2..48b9b9a822 100644 --- a/api/templates/default/etemplate2.css +++ b/api/templates/default/etemplate2.css @@ -3420,9 +3420,9 @@ span.et2_egw_action_ddHelper_itemsCnt { } /*Carousel thumbnails*/ -.blueimp-gallery > .indicator > li { +div.blueimp-gallery > .indicator > li { display: inline-block; - width: auto; + width: initial; height: 100px; margin: 0; opacity: 1; @@ -3431,11 +3431,11 @@ span.et2_egw_action_ddHelper_itemsCnt { border: 0; } -.blueimp-gallery > .indicator > li > img { +div.blueimp-gallery > .indicator > li > img { display: inline-block; width: auto; height: 100px; - margin:0; + margin: 0; cursor: pointer; z-index: -1; position: relative; @@ -3456,8 +3456,14 @@ span.et2_egw_action_ddHelper_itemsCnt { box-shadow: inset 0px 0px 0px 4px rgba(255, 255, 255, 1); background-color: transparent; } + +div.blueimp-gallery > .indicator > li::after { + display: none; + content: initial; +} + /*Active thumbnail border*/ -.blueimp-gallery > .indicator > .active { +div.blueimp-gallery > .indicator > .active { -webkit-box-shadow: inset 0px 0px 0px 4px #0c5da5; -moz-box-shadow: inset 0px 0px 0px 4px #0c5da5; box-shadow: inset 0px 0px 0px 4px #0c5da5; @@ -3466,6 +3472,7 @@ span.et2_egw_action_ddHelper_itemsCnt { /*Slideshow Play/Pause button*/ body:last-child .blueimp-gallery > .play-pause, .blueimp-gallery > .play-pause { + position: absolute; right: 50px; top: 20px; background-size: 44px 24px; @@ -3473,17 +3480,24 @@ body:last-child .blueimp-gallery > .play-pause, .blueimp-gallery > .play-pause { height: 24px; } +div.blueimp-gallery-playing > .play-pause { + background-position: -21px 0; +} + /*fullScreen button*/ .blueimp-gallery > .fullscreen { + position: absolute; right: 85px; top: 20px; background-size: 24px; width: 24px; height: 24px; + display: none; } /* download button*/ .blueimp-gallery > .download { + position: absolute; right: 120px; top: 20px; background: url(images/apply.svg) 0 0 no-repeat; @@ -3491,6 +3505,15 @@ body:last-child .blueimp-gallery > .play-pause, .blueimp-gallery > .play-pause { height: 24px; width: 24px; filter: invert(1) brightness(1.5); + display: none; +} + +.blueimp-gallery > .download:hover { + filter: invert(1) brightness(2); +} + +.blueimp-gallery.blueimp-gallery-controls > .download, .blueimp-gallery.blueimp-gallery-controls > .fullscreen { + display: initial; } /*close button*/