Add action forceWhite prop and add modal actions menu

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
nextcloud-libraries · Feb 26, 2019 · de16d5e · de16d5e
1 parent f0f4526
commit de16d5e
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 11 deletions.
diff --git a/src/components/Action/Action.vue b/src/components/Action/Action.vue
@@ -28,7 +28,8 @@
 		v-on="isSingleAction && firstAction.action ? { click: firstAction.action } : {}">
 		<!-- If more than one action, create a popovermenu -->
 		<template v-if="!isSingleAction">
-			<div v-click-outside="closeMenu" tabindex="0" class="action-item__menutoggle icon-more"
+			<div v-click-outside="closeMenu" tabindex="0" class="action-item__menutoggle"
+				:class="moreIconClass"
 				@click.prevent="toggleMenu" />
 			<div :class="{ 'open': opened }" class="action-item__menu popovermenu">
 				<popover-menu :menu="actions" />
@@ -69,6 +70,10 @@ export default {
 					}
 				]
 			}
+		},
+		forceWhite: {
+			type: Boolean,
+			default: false
 		}
 	},
 	data() {
@@ -82,6 +87,9 @@ export default {
 		},
 		firstAction() {
 			return this.actions[0]
+		},
+		moreIconClass() {
+			return `icon-more${this.forceWhite ? '-white' : ''}`
 		}
 	},
 	mounted() {
@@ -111,6 +119,7 @@ export default {
 	// icons
 	&--single,
 	&__menutoggle {
+		box-sizing: border-box;
 		padding: 14px;
 		height: 44px;
 		width: 44px;

diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
@@ -39,11 +39,14 @@
 						</span>
 					</div>
 				</a>
-				<a class="close icon-close icon-white" @click="close">
-					<span class="hidden-visually">
-						{{ t('core', 'Close') }}
-					</span>
-				</a>
+				<div class="icons-menu">
+					<action v-if="actions.length > 0" :actions="actions" :force-white="true" />
+					<a class="close icon-close icon-white" @click="close">
+						<span class="hidden-visually">
+							{{ t('core', 'Close') }}
+						</span>
+					</a>
+				</div>
 			</div>
 
 			<!-- Content -->
@@ -60,11 +63,22 @@
 
 <script>
 import Hammer from 'hammerjs'
+import Action from 'Components/Action'
 
 export default {
 	name: 'Modal',
 
+	components: {
+		Action
+	},
+
 	props: {
+		actions: {
+			type: Array,
+			default: () => {
+				return []
+			}
+		},
 		hasPrevious: {
 			type: Boolean,
 			default: false
@@ -207,16 +221,26 @@ export default {
 		box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
 		left: 22px;
 	}
-	.icon-close {
+	.icons-menu {
 		position: absolute;
 		top: 0;
 		right: 0;
 		z-index: 10000;
-		width: 44px;
 		height: 44px;
-		display: block;
-		background-size: 24px;
-		background-position: center;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+
+		> [class^='icon-'],
+		> [class*=' icon-'],
+		.action-item {
+			height: 44px;
+			width: 44px;
+			cursor: pointer;
+			box-sizing: border-box;
+			background-size: 24px;
+			background-position: center;
+		}
 	}
 }
 
@@ -275,3 +299,10 @@ export default {
 	transform: scale(1.1);
 }
 </style>
+<style lang="scss">
+/** we cannot scope sub-components */
+.modal-mask[data-v-#{$scope_version}] .modal-navigation .icons-menu .action-item__menutoggle {
+	// 22px is a somehow better looking for the icon-more icon
+	background-size: 22px;
+}
+</style>
diff --git a/src/components/Modal/index.js b/src/components/Modal/index.js
@@ -19,7 +19,10 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+import ScopeComponent from 'Utils/ScopeComponent'
 import Modal from './Modal'
 
+ScopeComponent(Modal)
+
 export default Modal
 export { Modal }