diff --git a/resources/css/tinymce.scss b/resources/css/tinymce.scss index 0756fa6..cbdf8f5 100644 --- a/resources/css/tinymce.scss +++ b/resources/css/tinymce.scss @@ -2,12 +2,49 @@ // @import "../../public/skins/ui/oxide/content.min.css"; // @import "../../public/skins/content/default/content.min.css"; -.tox .tox-dialog.tox-dialog--width-lg { - height: 650px; - max-height: 650px; +.tox { + .smeditor-select-group.tox-listboxfield { + position: relative; + display: flex; + align-items: center; - .tox-dialog__body-content { - height: auto !important; - flex-basis: auto !important; + label { + font-size: 80%; + margin: 0 6px 0 12px; + } + + &::after { + content: ""; + position: absolute; + top: 50%; + right: 10px; + transform: translateY(-50%); + width: 0; + height: 0; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-top: 6px solid #000; + pointer-events: none; + } + + .tox-listbox--select { + font-size: 80%; + padding-right: 28px; + } + } + + .smeditor-checkbox-group.tox-checkbox { + font-size: 80%; + margin: 0 12px; + } + + .tox-dialog.tox-dialog--width-lg { + height: 650px; + max-height: 650px; + + .tox-dialog__body-content { + height: auto !important; + flex-basis: auto !important; + } } } diff --git a/resources/js/components/SMEditor.vue b/resources/js/components/SMEditor.vue index 2ea0e5c..efbcd88 100644 --- a/resources/js/components/SMEditor.vue +++ b/resources/js/components/SMEditor.vue @@ -445,6 +445,14 @@ const imageBrowser = (callback, value, meta, gallery = false) => { searchFunc(); } }; + document.getElementById("image-library-sort-select").onchange = + function () { + updateLibrary(); + }; + document.getElementById("image-library-sort-desc-checkbox").onchange = + function () { + updateLibrary(); + }; const libraryContainer = document.getElementById( "image-library-content" @@ -460,14 +468,40 @@ const imageBrowser = (callback, value, meta, gallery = false) => { loadingElem.classList.add("image-library-content-loading"); libraryContainer.appendChild(loadingElem); + let params = { + limit: limit, + page: libraryPage, + mime: "image/", + title: title, + }; + + let sort = ""; + const sortSelectElement = document.getElementById( + "image-library-sort-select" + ) as HTMLSelectElement; + if (sortSelectElement !== null) { + if (sortSelectElement.value.length > 0) { + sort = sortSelectElement.value; + } + + const sortDescElement = document.getElementById( + "image-library-sort-desc-checkbox" + ) as HTMLInputElement; + if ( + sortDescElement !== null && + sortDescElement.checked === true + ) { + sort = `-${sort}`; + } + } + + if (sort.length > 0) { + params["sort"] = sort; + } + api.get({ url: "/media", - params: { - limit: limit, - page: libraryPage, - mime: "image/", - title: title, - }, + params: params, }) .then((result) => { const data = result.data as MediaCollection; @@ -659,6 +693,20 @@ const imageBrowser = (callback, value, meta, gallery = false) => { type: "htmlpanel", html: `
+
+ + +
+
+ +
@@ -856,13 +904,13 @@ const imageBrowser = (callback, value, meta, gallery = false) => { #image-library-toolbar { display: flex; margin-bottom: 4px; + justify-content: flex-end; .image-library-search-group { display: flex; - flex: 1; align-content: center; justify-content: flex-end; - margin-right: 12px; + margin: 0 12px; #image-library-search-input { width: auto;