Skip to content

Commit

Permalink
🚧 (#2345): use material design icons
Browse files Browse the repository at this point in the history 
Signed-off-by: Vinicius Reis <vinicius.reis@nextcloud.com>
  • Loading branch information
Vinicius Reis committed May 13, 2022
1 parent 7a061ac commit fab8ffd
Show file tree
Hide file tree
Showing 5 changed files with 168 additions and 50 deletions.
4 changes: 4 additions & 0 deletions css/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,3 +52,7 @@ li.ProseMirror-selectednode:after {
visibility: hidden;
}
}

.animation-rotate {
animation: rotate var(--animation-duration, 0.8s) linear infinite;
}
2 changes: 1 addition & 1 deletion src/components/EditorWrapper.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ export default {
name: 'EditorWrapper',
components: {
EditorContent,
MenuBar: () => import(/* webpackChunkName: "editor-rich" */'./MenuBar.vue'),
MenuBar: () => import(/* webpackChunkName: "editor-rich" */'./Menu/Bar.vue'),
MenuBubble: () => import(/* webpackChunkName: "editor-rich" */'./MenuBubble.vue'),
ReadOnlyEditor: () => import(/* webpackChunkName: "editor" */'./ReadOnlyEditor.vue'),
CollisionResolveDialog: () => import(/* webpackChunkName: "editor" */'./CollisionResolveDialog.vue'),
Expand Down
120 changes: 71 additions & 49 deletions src/components/MenuBar.vue → src/components/Menu/Bar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,103 +27,111 @@
accept="image/*"
aria-hidden="true"
class="hidden-visually"
:multiple="true"
multiple
@change="onImageUploadFilePicked">
<div v-if="isRichEditor" ref="menubar" class="menubar-icons">
<template v-for="(icon) in icons">
<EmojiPicker v-if="icon.class === 'icon-emoji'"
v-show="icon.priority <= iconCount"
:key="icon.label"
class="menuitem-emoji"
class="menuitem-emoji action-menu-emoji"
@selectData="emojiObject => addEmoji(icon, emojiObject)">
<button v-tooltip="t('text', 'Insert emoji')"
class="icon-emoji"
:aria-label="t('text', 'Insert emoji')"
:aria-haspopup="true"
@click="toggleChildMenu(icon)" />
@click="toggleChildMenu(icon)">
<component :is="icon.icon" />
</button>
</EmojiPicker>
<Actions v-else-if="icon.class === 'icon-image'"
:key="icon.label"
:key="`action-images-${icon.label}`"
ref="imageActions"
class="submenu"
:default-icon="'icon-image'"
class="submenu action-menu-image"
:title="icon.label"
:aria-label="icon.label"
:aria-haspopup="true"
@open="toggleChildMenu(icon)"
@close="toggleChildMenu(icon)">
<button slot="icon"
:class="{ 'icon-image': true, 'loading-small': uploadingImages }"
:title="icon.label"
:aria-label="icon.label"
:aria-haspopup="true" />
<ActionButton icon="icon-upload"
:close-after-click="true"
<template #icon>
<component :is="uploadingImages ? 'Loading' : icon.icon"
:title="icon.label"
:aria-label="icon.label"
:aria-haspopup="true" />
</template>
<ActionButton :close-after-click="true"
:disabled="uploadingImages"
@click="onUploadImage()">
<template #icon>
<Upload />
</template>
{{ t('text', 'Upload from computer') }}
</ActionButton>
<ActionButton v-if="!isPublic"
icon="icon-folder"
:close-after-click="true"
:disabled="uploadingImages"
@click="showImagePrompt()">
<template #icon>
<Folder />
</template>
{{ t('text', 'Insert from Files') }}
</ActionButton>
</Actions>
<button v-else-if="icon.class"
v-show="icon.priority <= iconCount"
:key="icon.label"
:key="`action-${icon.label}`"
v-tooltip="getLabelAndKeys(icon)"
class="action-menu-icon"
:class="getIconClasses(icon)"
:disabled="disabled(icon)"
@click="clickIcon(icon)" />
@click="clickIcon(icon)">
<component :is="icon.icon" />
</button>
<template v-else>
<div v-show="icon.priority <= iconCount"
<Actions v-show="icon.priority <= iconCount"
:key="icon.label"
v-click-outside="() => hideChildMenu(icon)"
class="submenu">
<button v-tooltip="getLabelAndKeys(icon)"
:class="childIconClasses(icon.children, )"
@click.prevent="toggleChildMenu(icon)" />
<div :class="{open: isChildMenuVisible(icon)}" class="popovermenu menu-center">
<PopoverMenu :menu="childPopoverMenu(icon.children, icon)" />
</div>
</div>
:title="icon.label"
class="action-menu-sub">
<template #icon>
<component :is="icon.icon" />
</template>
<ActionButton v-for="child in childPopoverMenu(icon.children, icon)"
:key="child.label"
@click="child.action">
<template #icon>
<component :is="child.icon" />
</template>
{{ child.label }}
</ActionButton>
</Actions>
</template>
</template>
<Actions @open="toggleChildMenu({ label: 'Remaining Actions' })"
<Actions class="remaining-actions"
@open="toggleChildMenu({ label: 'Remaining Actions' })"
@close="toggleChildMenu({ label: 'Remaining Actions' })">
<template v-for="(icon) in icons">
<ActionButton v-if="icon.class && isHiddenInMenu(icon) && !hasSubmenu(icon)"
:key="icon.class"
:key="`remaining-action-${icon.class}`"
v-tooltip="getKeys(icon)"
:icon="icon.class"
:close-after-click="true"
@click="clickIcon(icon)">
<template #icon>
<component :is="icon.icon" />
</template>
{{ icon.label }}
</ActionButton>
<!--<template v-else-if="!icon.class && isHiddenInMenu(icon)">
<ActionButton v-for="childIcon in icon.children"
:key="childIcon.class"
:icon="childIcon.class"
@click="clickIcon(childIcon)">
v-tooltip="getKeys(childIcon)"
{{ childIcon.label }}
</ActionButton>
</template>-->
</template>
</Actions>
</div>
<slot>
Left side
</slot>
<slot />
</div>
</template>

<script>
import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
import menuBarIcons from './../mixins/menubar.js'
import isMobile from './../mixins/isMobile.js'

import { useEditorMixin } from './EditorWrapper.provider.js'
import menuBarIcons from './../../mixins/menubar.js'
import isMobile from './../../mixins/isMobile.js'
import { Loading, Folder, Upload } from '../../components/icons.js'
import { useEditorMixin } from '../EditorWrapper.provider.js'

import Actions from '@nextcloud/vue/dist/Components/Actions'
import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
Expand All @@ -134,12 +142,16 @@ import { getCurrentUser } from '@nextcloud/auth'
import { subscribe, unsubscribe } from '@nextcloud/event-bus'

export default {
// eslint-disable-next-line vue/match-component-file-name
name: 'MenuBar',
components: {
ActionButton,
PopoverMenu,
Actions,
EmojiPicker,
Loading,
Folder,
Upload,
},
directives: {
Tooltip,
Expand Down Expand Up @@ -184,10 +196,14 @@ export default {
forceRecompute: 0,
submenuVisibility: {},
lastImagePath: null,
// @deprecated
icons: [...menuBarIcons],
}
},
computed: {
menuEntries() {
return [...menuBarIcons]
},
isHiddenInMenu() {
return (icon) => icon.priority > this.iconCount
},
Expand Down Expand Up @@ -226,9 +242,9 @@ export default {
return (icons, parent) => {
return icons.map(icon => {
return {
// text: this.getLabelAndKeys(icons[index]),
text: icon.label,
icon: icon.class,
label: icon.label,
class: icon.class,
icon: icon.icon,
active: this.isActive(icon),
action: () => {
this.clickIcon(icon)
Expand Down Expand Up @@ -430,6 +446,11 @@ export default {
max-height: calc(100vh - 88px);
overflow: scroll;
}

.remaining-actions ::v-deep .material-design-icon {
height: auto;
width: auto;
}
}

.menubar button {
Expand All @@ -444,6 +465,7 @@ export default {
color: var(--color-main-text);
background-position: center center;
vertical-align: top;
padding: 0.7em;
&:hover, &:focus, &:active {
background-color: var(--color-background-dark);
}
Expand Down
37 changes: 37 additions & 0 deletions src/components/icons.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import MdiLoading from 'vue-material-design-icons/Loading'

export { default as Lock } from 'vue-material-design-icons/Lock'
export { default as Undo } from 'vue-material-design-icons/ArrowULeftTop'
export { default as Redo } from 'vue-material-design-icons/ArrowURightTop'
export { default as Info } from 'vue-material-design-icons/Information'
export { default as Positive } from 'vue-material-design-icons/CheckboxMarkedCircle'
export { default as Warn } from 'vue-material-design-icons/AlertCircle'
export { default as Danger } from 'vue-material-design-icons/AlertDecagram'
export { default as CodeTags } from 'vue-material-design-icons/CodeTags'
export { default as Table } from 'vue-material-design-icons/Table'
export { default as Emoticon } from 'vue-material-design-icons/EmoticonOutline'
export { default as Images } from 'vue-material-design-icons/ImageMultipleOutline'
export { default as Help } from 'vue-material-design-icons/HelpCircle'
export { default as Upload } from 'vue-material-design-icons/Upload'
export { default as Folder } from 'vue-material-design-icons/Folder'
export { default as FormatBold } from 'vue-material-design-icons/FormatBold'
export { default as FormatItalic } from 'vue-material-design-icons/FormatItalic'
export { default as FormatUnderline } from 'vue-material-design-icons/FormatUnderline'
export { default as FormatStrikethrough } from 'vue-material-design-icons/FormatStrikethrough'
export { default as FormatHeader1 } from 'vue-material-design-icons/FormatHeader1'
export { default as FormatHeader2 } from 'vue-material-design-icons/FormatHeader2'
export { default as FormatHeader3 } from 'vue-material-design-icons/FormatHeader3'
export { default as FormatHeader4 } from 'vue-material-design-icons/FormatHeader4'
export { default as FormatHeader5 } from 'vue-material-design-icons/FormatHeader5'
export { default as FormatHeader6 } from 'vue-material-design-icons/FormatHeader6'
export { default as FormatListNumbered } from 'vue-material-design-icons/FormatListNumbered'
export { default as FormatListBulleted } from 'vue-material-design-icons/FormatListBulleted'
export { default as FormatListCheckbox } from 'vue-material-design-icons/FormatListCheckbox'
export { default as FormatQuote } from 'vue-material-design-icons/FormatQuoteClose'

export const Loading = {
functional: true,
render(h) {
return h(MdiLoading, { staticClass: 'animation-rotate' })
},
}
Loading

0 comments on commit fab8ffd

Please sign in to comment.