From a051b5a7981e544c3872c5d40c3300d22d01c8d3 Mon Sep 17 00:00:00 2001
From: Matthias Schmidt <gravatronics@live.com>
Date: Thu, 18 Aug 2016 18:13:20 +0200
Subject: [PATCH] Fix mobile issues with media dialog

---
 com.woltlab.wcf/templates/mediaListItems.tpl  | 22 +++---
 .../files/acp/templates/mediaListItems.tpl    | 26 +++----
 .../WoltLabSuite/Core/Media/Manager/Base.js   | 50 +++++++-------
 .../WoltLabSuite/Core/Media/Manager/Editor.js | 17 ++---
 .../WoltLabSuite/Core/Media/Manager/Select.js | 19 ++---
 wcfsetup/install/files/style/ui/dialog.scss   |  5 +-
 wcfsetup/install/files/style/ui/media.scss    | 69 ++++++++++++++++---
 7 files changed, 122 insertions(+), 86 deletions(-)

diff --git a/com.woltlab.wcf/templates/mediaListItems.tpl b/com.woltlab.wcf/templates/mediaListItems.tpl
index b2f0c5e539..e89df8171e 100644
--- 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 ce2ff7e855..e89df8171e 100644
--- 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 3de3e45265..18b74f921a 100644
--- 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 24326f80be..2caac68a7b 100644
--- 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 570647cd4a..34e4fd0ca8 100644
--- 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 eacde3de8b..61a4f64b17 100644
--- 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 2d98c28918..f00aa80638 100644
--- 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;
+				}
+			}
+		}
 	}
 }
 
-- 
2.20.1