Fix mobile issues with media dialog

diff --git a/com.woltlab.wcf/templates/mediaListItems.tpl b/com.woltlab.wcf/templates/mediaListItems.tpl
index b2f0c5e53903a27f2b396fd62a590807d6af6458..e89df8171ef4d43efc5c8b4b97253dc987c92594 100644 (file)
--- a/com.woltlab.wcf/templates/mediaListItems.tpl
+++ b/com.woltlab.wcf/templates/mediaListItems.tpl
@@ -8,26 +8,26 @@
                        <p class="mediaTitle">{if $media->title}{$media->title}{else}{$media->filename}{/if}</p>
                </div>
                
-               <nav class="buttonGroupNavigation">
-                       <ul class="smallButtons buttonGroup">
+               <nav class="jsMobileNavigation buttonGroupNavigation">
+                       <ul class="buttonList iconList">
                                <li>
-                                       <input type="checkbox" class="jsClipboardItem jsMediaCheckbox" data-object-id="{@$media->mediaID}">
+                                       <a><label><input type="checkbox" class="jsClipboardItem jsMediaCheckbox" data-object-id="{@$media->mediaID}"></label></a>
                                </li>
                                {if $__wcf->session->getPermission('admin.content.cms.canManageMedia')}
-                                       <li>
-                                               <a><span class="icon icon16 fa-pencil jsTooltip jsMediaEditIcon" data-object-id="{@$media->mediaID}" title="{lang}wcf.global.button.edit{/lang}"></span></a>
+                                       <li class="jsMediaEditButton" data-object-id="{@$media->mediaID}">
+                                               <a><span class="icon icon16 fa-pencil jsTooltip" title="{lang}wcf.global.button.edit{/lang}"></span> <span class="invisible">{lang}wcf.global.button.edit{/lang}</span></a>
                                        </li>
-                                       <li>
-                                               <a><span class="icon icon16 fa-times jsTooltip jsDeleteButton" data-object-id="{@$media->mediaID}" title="{lang}wcf.global.button.delete{/lang}" data-confirm-message-html="{lang __encode=true}wcf.media.delete.confirmMessage{/lang}"></span></a>
+                                       <li class="jsDeleteButton" data-object-id="{@$media->mediaID}" data-confirm-message-html="{lang __encode=true}wcf.media.delete.confirmMessage{/lang}">
+                                               <a><span class="icon icon16 fa-times jsTooltip" title="{lang}wcf.global.button.delete{/lang}"></span> <span class="invisible">{lang}wcf.global.button.delete{/lang}</span></a>
                                        </li>
                                {/if}
                                {if $mode == 'editor'}
-                                       <li>
-                                               <a><span class="icon icon16 fa-plus jsTooltip jsMediaInsertIcon" data-object-id="{@$media->mediaID}" title="{lang}wcf.media.button.insert{/lang}"></span></a>
+                                       <li class="jsMediaInsertButton" data-object-id="{@$media->mediaID}">
+                                               <a><span class="icon icon16 fa-plus jsTooltip" title="{lang}wcf.media.button.insert{/lang}"></span> <span class="invisible">{lang}wcf.media.button.insert{/lang}</span></a>
                                        </li>
                                {elseif $mode == 'select'}
-                                       <li>
-                                               <a><span class="icon icon16 fa-check jsTooltip jsMediaSelectIcon" data-object-id="{@$media->mediaID}" title="{lang}wcf.media.button.select{/lang}"></span></a>
+                                       <li class="jsMediaSelectButton" data-object-id="{@$media->mediaID}">
+                                               <a><span class="icon icon16 fa-check jsTooltip" title="{lang}wcf.media.button.select{/lang}"></span> <span class="invisible">{lang}wcf.media.button.select{/lang}</span></a>
                                        </li>
                                {/if}
                        </ul>

diff --git a/wcfsetup/install/files/acp/templates/mediaListItems.tpl b/wcfsetup/install/files/acp/templates/mediaListItems.tpl
index ce2ff7e855d207cbea4643cebe6f27402a15d80e..e89df8171ef4d43efc5c8b4b97253dc987c92594 100644 (file)
--- a/wcfsetup/install/files/acp/templates/mediaListItems.tpl
+++ b/wcfsetup/install/files/acp/templates/mediaListItems.tpl
@@ -3,31 +3,31 @@
                <div class="mediaThumbnail">
                        {@$media->getElementTag(144)}
                </div>
-
+               
                <div class="mediaInformation">
                        <p class="mediaTitle">{if $media->title}{$media->title}{else}{$media->filename}{/if}</p>
                </div>
-
-               <nav class="buttonGroupNavigation">
-                       <ul class="smallButtons buttonGroup">
+               
+               <nav class="jsMobileNavigation buttonGroupNavigation">
+                       <ul class="buttonList iconList">
                                <li>
-                                       <input type="checkbox" class="jsClipboardItem jsMediaCheckbox" data-object-id="{@$media->mediaID}">
+                                       <a><label><input type="checkbox" class="jsClipboardItem jsMediaCheckbox" data-object-id="{@$media->mediaID}"></label></a>
                                </li>
                                {if $__wcf->session->getPermission('admin.content.cms.canManageMedia')}
-                                       <li>
-                                               <a><span class="icon icon16 fa-pencil jsTooltip jsMediaEditIcon" data-object-id="{@$media->mediaID}" title="{lang}wcf.global.button.edit{/lang}"></span></a>
+                                       <li class="jsMediaEditButton" data-object-id="{@$media->mediaID}">
+                                               <a><span class="icon icon16 fa-pencil jsTooltip" title="{lang}wcf.global.button.edit{/lang}"></span> <span class="invisible">{lang}wcf.global.button.edit{/lang}</span></a>
                                        </li>
-                                       <li>
-                                               <a><span class="icon icon16 fa-times jsTooltip jsDeleteButton" data-object-id="{@$media->mediaID}" title="{lang}wcf.global.button.delete{/lang}" data-confirm-message-html="{lang __encode=true}wcf.media.delete.confirmMessage{/lang}"></span></a>
+                                       <li class="jsDeleteButton" data-object-id="{@$media->mediaID}" data-confirm-message-html="{lang __encode=true}wcf.media.delete.confirmMessage{/lang}">
+                                               <a><span class="icon icon16 fa-times jsTooltip" title="{lang}wcf.global.button.delete{/lang}"></span> <span class="invisible">{lang}wcf.global.button.delete{/lang}</span></a>
                                        </li>
                                {/if}
                                {if $mode == 'editor'}
-                                       <li>
-                                               <a><span class="icon icon16 fa-plus jsTooltip jsMediaInsertIcon" data-object-id="{@$media->mediaID}" title="{lang}wcf.media.button.insert{/lang}"></span></a>
+                                       <li class="jsMediaInsertButton" data-object-id="{@$media->mediaID}">
+                                               <a><span class="icon icon16 fa-plus jsTooltip" title="{lang}wcf.media.button.insert{/lang}"></span> <span class="invisible">{lang}wcf.media.button.insert{/lang}</span></a>
                                        </li>
                                {elseif $mode == 'select'}
-                                       <li>
-                                               <a><span class="icon icon16 fa-check jsTooltip jsMediaSelectIcon" data-object-id="{@$media->mediaID}" title="{lang}wcf.media.button.select{/lang}"></span></a>
+                                       <li class="jsMediaSelectButton" data-object-id="{@$media->mediaID}">
+                                               <a><span class="icon icon16 fa-check jsTooltip" title="{lang}wcf.media.button.select{/lang}"></span> <span class="invisible">{lang}wcf.media.button.select{/lang}</span></a>
                                        </li>
                                {/if}
                        </ul>

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Base.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Base.js
index 3de3e45265a1e6a641c1d6e8fe7e95cde910e6f6..18b74f921a2c4bac71c10afd8fff078da4a97d2e 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Base.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Base.js
@@ -56,9 +56,9 @@ define(
                                var listItem = listItems[i];
                                
                                if (Permission.get('admin.content.cms.canManageMedia')) {
-                                       var editIcon = elByClass('jsMediaEditIcon', listItem)[0];
+                                       var editIcon = elByClass('jsMediaEditButton', listItem)[0];
                                        if (editIcon) {
-                                               editIcon.classList.remove('jsMediaEditIcon');
+                                               editIcon.classList.remove('jsMediaEditButton');
                                                editIcon.addEventListener(WCF_CLICK_EVENT, this._editMedia.bind(this));
                                        }
                                }
@@ -406,47 +406,43 @@ define(
                        var mediaInformation = DomTraverse.childByClass(mediaElement, 'mediaInformation');
                        
                        var buttonGroupNavigation = elCreate('nav');
-                       buttonGroupNavigation.className = 'buttonGroupNavigation';
+                       buttonGroupNavigation.className = 'jsMobileNavigation buttonGroupNavigation';
                        mediaInformation.parentNode.appendChild(buttonGroupNavigation);
                        
-                       var smallButtons = elCreate('ul');
-                       smallButtons.className = 'smallButtons buttonGroup';
-                       buttonGroupNavigation.appendChild(smallButtons);
+                       var buttons = elCreate('ul');
+                       buttons.className = 'buttonList iconList';
+                       buttonGroupNavigation.appendChild(buttons);
                        
                        var listItem = elCreate('li');
-                       smallButtons.appendChild(listItem);
+                       buttons.appendChild(listItem);
+                       
+                       var a = elCreate('a');
+                       listItem.appendChild(a);
+                       
+                       var label = elCreate('label');
+                       a.appendChild(label);
                        
                        var checkbox = elCreate('input');
                        checkbox.className = 'jsClipboardItem jsMediaCheckbox';
                        elAttr(checkbox, 'type', 'checkbox');
                        elData(checkbox, 'object-id', media.mediaID);
-                       listItem.appendChild(checkbox);
+                       label.appendChild(checkbox);
                        
                        if (Permission.get('admin.content.cms.canManageMedia')) {
                                listItem = elCreate('li');
-                               smallButtons.appendChild(listItem);
+                               listItem.className = 'jsMediaEditButton';
+                               elData(listItem, 'object-id', media.mediaID);
+                               buttons.appendChild(listItem);
                                
-                               var a = elCreate('a');
-                               listItem.appendChild(a);
-                               
-                               var icon = elCreate('span');
-                               icon.className = 'icon icon16 fa-pencil jsTooltip jsMediaEditIcon';
-                               elData(icon, 'object-id', media.mediaID);
-                               elAttr(icon, 'title', Language.get('wcf.global.button.edit'));
-                               a.appendChild(icon);
+                               listItem.innerHTML = '<a><span class="icon icon16 fa-pencil jsTooltip" title="' + Language.get('wcf.global.button.edit') + '"></span> <span class="invisible">' + Language.get('wcf.global.button.edit') + '</span></a>';
                                
                                listItem = elCreate('li');
-                               smallButtons.appendChild(listItem);
-                               
-                               a = elCreate('a');
-                               listItem.appendChild(a);
+                               listItem.className = 'jsDeleteButton';
+                               elData(listItem, 'object-id', media.mediaID);
+                               elData(listItem, 'confirm-message-html', Language.get('wcf.media.delete.confirmMessage'));
+                               buttons.appendChild(listItem);
                                
-                               icon = elCreate('span');
-                               icon.className = 'icon icon16 fa-times jsTooltip jsDeleteButton';
-                               elData(icon, 'object-id', media.mediaID);
-                               elData(icon, 'confirm-message-html', Language.get('wcf.media.delete.confirmMessage'));
-                               elAttr(icon, 'title', Language.get('wcf.global.button.delete'));
-                               a.appendChild(icon);
+                               listItem.innerHTML = '<a><span class="icon icon16 fa-times jsTooltip" title="' + Language.get('wcf.global.button.delete') + '"></span> <span class="invisible">' + Language.get('wcf.global.button.delete') + '</span></a>';
                        }
                }
        };

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Editor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Editor.js
index 24326f80beacae443c145573a51dda95a045d028..2caac68a7b741e95a90a83721b0830aa76f591e0 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Editor.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Editor.js
@@ -41,9 +41,9 @@ define(['Core', 'Dictionary', 'Dom/Traverse', 'Language', 'Ui/Dialog', 'WoltLabS
                        for (var i = 0, length = listItems.length; i < length; i++) {
                                var listItem = listItems[i];
                                
-                               var insertIcon = elByClass('jsMediaInsertIcon', listItem)[0];
+                               var insertIcon = elByClass('jsMediaInsertButton', listItem)[0];
                                if (insertIcon) {
-                                       insertIcon.classList.remove('jsMediaInsertIcon');
+                                       insertIcon.classList.remove('jsMediaInsertButton');
                                        insertIcon.addEventListener(WCF_CLICK_EVENT, this._openInsertDialog.bind(this));
                                }
                        }
@@ -322,19 +322,12 @@ define(['Core', 'Dictionary', 'Dom/Traverse', 'Language', 'Ui/Dialog', 'WoltLabS
                        MediaManagerEditor._super.prototype.setupMediaElement.call(this, media, mediaElement);
                        
                        // add media insertion icon
-                       var smallButtons = elBySel('nav.buttonGroupNavigation > ul.smallButtons', mediaElement);
+                       var buttons = elBySel('nav.buttonGroupNavigation > ul', mediaElement);
                        
                        var listItem = elCreate('li');
-                       smallButtons.appendChild(listItem);
+                       buttons.appendChild(listItem);
                        
-                       var a = elCreate('a');
-                       listItem.appendChild(a);
-                       
-                       var icon = elCreate('span');
-                       icon.className = 'icon icon16 fa-plus jsTooltip jsMediaInsertIcon';
-                       elData(icon, 'object-id', media.mediaID);
-                       elAttr(icon, 'title', Language.get('wcf.media.button.insert'));
-                       a.appendChild(icon);
+                       listItem.innerHTML = '<a><span class="icon icon16 fa-plus jsTooltip jsMediaInsertButton" data-object-id="' + media.mediaID + '" title="' + Language.get('wcf.media.button.insert') + '"></span> <span class="invisible">' + Language.get('wcf.media.button.insert') + '</span></a>';
                }
        });
        

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Select.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Select.js
index 570647cd4ab7c09fe705ee69b6224614ee46cf1f..34e4fd0ca87b6278decd55e25df21a5931506d64 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Select.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Select.js
@@ -60,9 +60,9 @@ define(['Core', 'Dom/Traverse', 'Dom/Util', 'Language', 'ObjectMap', 'Ui/Dialog'
                        for (var i = 0, length = listItems.length; i < length; i++) {
                                var listItem = listItems[i];
                                
-                               var chooseIcon = elByClass('jsMediaSelectIcon', listItem)[0];
+                               var chooseIcon = elByClass('jsMediaSelectButton', listItem)[0];
                                if (chooseIcon) {
-                                       chooseIcon.classList.remove('jsMediaSelectIcon');
+                                       chooseIcon.classList.remove('jsMediaSelectButton');
                                        chooseIcon.addEventListener(WCF_CLICK_EVENT, this._chooseMedia.bind(this));
                                }
                        }
@@ -147,19 +147,14 @@ define(['Core', 'Dom/Traverse', 'Dom/Util', 'Language', 'ObjectMap', 'Ui/Dialog'
                        MediaManagerSelect._super.prototype.setupMediaElement.call(this, media, mediaElement);
                        
                        // add media insertion icon
-                       var smallButtons = elBySel('nav.buttonGroupNavigation > ul.smallButtons', mediaElement);
+                       var buttons = elBySel('nav.buttonGroupNavigation > ul', mediaElement);
                        
                        var listItem = elCreate('li');
-                       smallButtons.appendChild(listItem);
+                       listItem.className = 'jsMediaSelectButton';
+                       elData(listItem, 'object-id', media.mediaID);
+                       buttons.appendChild(listItem);
                        
-                       var a = elCreate('a');
-                       listItem.appendChild(a);
-                       
-                       var icon = elCreate('span');
-                       icon.className = 'icon icon16 fa-check jsTooltip jsMediaSelectIcon';
-                       elData(icon, 'object-id', media.mediaID);
-                       elAttr(icon, 'title', Language.get('wcf.media.button.choose'));
-                       a.appendChild(icon);
+                       listItem.innerHTML = '<a><span class="icon icon16 fa-check jsTooltip" title="' + Language.get('wcf.media.button.select') + '"></span> <span class="invisible">' + Language.get('wcf.media.button.select') + '</span></a>';
                },
                
                /**

diff --git a/wcfsetup/install/files/style/ui/dialog.scss b/wcfsetup/install/files/style/ui/dialog.scss
index eacde3de8b55aa7a34e95983c3e11409e4e839af..61a4f64b179ebec14ae10b7246e4a220b9dafd3a 100644 (file)
--- a/wcfsetup/install/files/style/ui/dialog.scss
+++ b/wcfsetup/install/files/style/ui/dialog.scss
@@ -71,7 +71,8 @@
                }
        }
        
-       &[aria-hidden=false]  ~ .dialogContainer[aria-hidden=false] {
+       &[aria-hidden=false] ~ .dialogContainer[aria-hidden=false],
+       &[aria-hidden=false] ~ .dialogContainer[aria-hidden=true]{
                z-index: 50;
        }
        
@@ -90,7 +91,7 @@
                > .dialogCloseButton {
                        align-self: center;
                        flex: 0 0 auto;
-                                               
+                       
                        &:hover > .icon {
                                color: $wcfHeaderLinkActive;
                        }

diff --git a/wcfsetup/install/files/style/ui/media.scss b/wcfsetup/install/files/style/ui/media.scss
index 2d98c289182eb68cf4d567c06a38bc095bfffb35..f00aa80638660ca70d8131c0ddf494691a5e73dd 100644 (file)
--- a/wcfsetup/install/files/style/ui/media.scss
+++ b/wcfsetup/install/files/style/ui/media.scss
@@ -24,13 +24,6 @@
                font-size: 1rem;
                margin: 0 $wcfGapSmall $wcfGapSmall 0;
                
-               &:hover {
-                       > .buttonGroupNavigation {
-                               height: auto;
-                               padding: $wcfGapSmall;
-                       }
-               }
-               
                &.jsMarked {
                        > .mediaInformation,
                        > .buttonGroupNavigation {
@@ -97,9 +90,8 @@
                        position: absolute;
                        top: 0;
                        right: 0;
-                       background: rgba(0,0,0,0.6); // TODO
-                       height: 0;
                        overflow: hidden;
+                       background: rgba(0,0,0,0.6); // TODO
                        
                        /* TODO: transition */
                        
@@ -108,6 +100,65 @@
                                @include textShadow(#000);
                        }
                }
+               
+               @include screen-md-down {
+                       .buttonGroupNavigation {
+                               &.open {
+                                       left: 0;
+                                       
+                                       // dropdown is contained within this element, required to have it stand
+                                       // above any succeeding siblings
+                                       z-index: 10;
+                                       
+                                       > .buttonList {
+                                               display: block;
+                                               visibility: visible;
+                                       }
+                               }
+                               
+                               > .dropdownLabel {
+                                       left: calc(100% - 24px);
+                                       position: relative;
+                               }
+                               
+                               > .buttonList {
+                                       @include dropdownMenu;
+                                       
+                                       position: static !important;
+                                       top: 0;
+                                       
+                                       > li {
+                                               .invisible {
+                                                       display: inline;
+                                                       padding-left: 5px;
+                                               }
+                                       }
+                               }
+                       }
+               }
+               
+               @include screen-lg {
+                       .buttonGroupNavigation {
+                               transition: opacity .12s;
+                               
+                               > .dropdownLabel {
+                                       display: none;
+                               }
+                       }
+               }
+               
+               @include screen-md-up {
+                       > .buttonGroupNavigation {
+                               height: 0;
+                       }
+                       
+                       &:hover {
+                               > .buttonGroupNavigation {
+                                       height: auto;
+                                       padding: $wcfGapSmall;
+                               }
+                       }
+               }
        }
 }