diff options
author | dartcafe <github@dartcafe.de> | 2022-05-28 00:31:10 +0300 |
---|---|---|
committer | dartcafe <github@dartcafe.de> | 2022-05-28 00:31:10 +0300 |
commit | 8c9a7fd7c68bb8c5cd89a55cbd16bf991a5d7595 (patch) | |
tree | f1ef7b88572e21e5996c022786aef5b7229f6698 /src | |
parent | 54f8ff75da256c3613b473aa50aa3afc7cab8973 (diff) |
more replacementsmd-icons
Signed-off-by: dartcafe <github@dartcafe.de>
Diffstat (limited to 'src')
-rw-r--r-- | src/js/assets/scss/icons-md.scss | 3 | ||||
-rw-r--r-- | src/js/assets/scss/icons.scss | 39 | ||||
-rw-r--r-- | src/js/components/AppIcons/ActivityAppIcon.vue | 59 | ||||
-rw-r--r-- | src/js/components/AppIcons/CirclesAppIcon.vue | 23 | ||||
-rw-r--r-- | src/js/components/AppIcons/MaybeIcon.vue | 21 | ||||
-rw-r--r-- | src/js/components/AppIcons/PollsAppIcon.vue | 21 | ||||
-rw-r--r-- | src/js/components/AppIcons/ProjectsAppIcon.vue | 66 | ||||
-rw-r--r-- | src/js/components/AppIcons/PublishOff.vue | 23 | ||||
-rw-r--r-- | src/js/components/AppIcons/ShieldCrownOutline.vue | 59 | ||||
-rw-r--r-- | src/js/components/User/UserItem.vue | 19 | ||||
-rw-r--r-- | src/js/views/Administration.vue | 5 | ||||
-rw-r--r-- | src/js/views/SideBar.vue | 16 |
12 files changed, 295 insertions, 59 deletions
diff --git a/src/js/assets/scss/icons-md.scss b/src/js/assets/scss/icons-md.scss index 5f49002d..27c29559 100644 --- a/src/js/assets/scss/icons-md.scss +++ b/src/js/assets/scss/icons-md.scss @@ -22,7 +22,6 @@ } :root { - --icon-md-shield-crown-outline: url('../icons/material-design/shield-crown-outline.svg'); --icon-md-email: url('../icons/material-design/email.svg'); --icon-md-share-variant: url('../icons/material-design/share-variant.svg'); --icon-md-link-variant: url('../icons/material-design/link-variant.svg'); @@ -53,6 +52,4 @@ .icon-svg-md-link { @include svg-icon(var(--icon-md-link-variant)); } // mask icons -// UserItem.vue -.icon-mask-md-admin { @include masked-icon(var(--icon-md-shield-crown-outline)); } diff --git a/src/js/assets/scss/icons.scss b/src/js/assets/scss/icons.scss index 8528dad1..984d9c2e 100644 --- a/src/js/assets/scss/icons.scss +++ b/src/js/assets/scss/icons.scss @@ -54,52 +54,13 @@ --color-polls-foreground-filter-maybe: invert(81%) sepia(22%) saturate(3383%) hue-rotate(353deg) brightness(101%) contrast(101%); } -.icon-activity { background-image: var(--icon-activity-activity-dark-000); } .icon-circles { background-image: var(--icon-circles); } .icon-polls { background-image: var(--icon-polls); } .icon-polls-maybe { background-image: var(--icon-polls-maybe); } .icon-polls-no { background-image: var(--icon-polls-no); } .icon-polls-yes { background-image: var(--icon-polls-yes); } -// .icon-clock { background-image: var(--icon-clock); } -// .icon-clock-fff { background-image: var(--icon-clock--fff); } -// .icon-handle { background-image: var(--icon-polls-handle); } -// .icon-list-view { background-image: var(--icon-polls-list-view); } -// .icon-polls-anonymous { background-image: var(--icon-polls-anonymous); } -// .icon-polls-back { background-image: var(--icon-polls-back); } -// .icon-polls-clone { background-image: var(--icon-polls-clone); } -// .icon-polls-closed { background-image: var(--icon-polls-closed); } -// .icon-polls-closed-fff { background-image: var(--icon-polls-closed--fff); } -// .icon-polls-confirmed { background-image: var(--icon-polls-confirmed); } -// .icon-polls-private-poll { background-image: var(--icon-polls-private-poll); } -// .icon-polls-private { background-image: var(--icon-polls-private-poll); } -// .icon-polls-mail { background-image: var(--icon-polls-mail); } -// .icon-polls-minus { background-image: var(--icon-polls-minus); } -// .icon-polls-move { background-image: var(--icon-polls-move); } -// .icon-polls-open { background-image: var(--icon-polls-open); } -// .icon-polls-open-poll { background-image: var(--icon-polls-open-poll); } -// .icon-polls-sidebar-toggle { background-image: var(--icon-polls-sidebar-toggle); } -// .icon-polls-unconfirmed { background-image: var(--icon-polls-unconfirmed); } -// .icon-table-view { background-image: var(--icon-polls-table-view); } -// .icon-polls-visible { background-image: var(--icon-polls-open-poll); } .theme--dark { .icon-circles { background-image: var(--icon-circles--fff); } .icon-polls { background-image: var(--icon-polls--fff); } - // .icon-clock { background-image: var(--icon-clock--fff); } - // .icon-handle { background-image: var(--icon-polls-handle--fff); } - // .icon-list-view { background-image: var(--icon-polls-list-view-fff); } - // .icon-polls-anonymous { background-image: var(--icon-polls-anonymous--fff); } - // .icon-polls-back { background-image: var(--icon-polls-back--fff); } - // .icon-polls-clone { background-image: var(--icon-polls-clone--fff); } - // .icon-polls-closed { background-image: var(--icon-polls-closed--fff); } - // .icon-polls-confirmed { background-image: var(--icon-polls-confirmed--fff); } - // .icon-polls-private { background-image: var(--icon-polls-private-poll--fff); } - // .icon-polls-private-poll { background-image: var(--icon-polls-private-poll--fff); } - // .icon-polls-mail { background-image: var(--icon-polls-mail--fff); } - // .icon-polls-move { background-image: var(--icon-polls-move--fff); } - // .icon-polls-open { background-image: var(--icon-polls-open--fff); } - // .icon-polls-open-poll { background-image: var(--icon-polls-open-poll--fff); } - // .icon-polls-sidebar-toggle { background-image: var(--icon-polls-sidebar-toggle--fff); } - // .icon-polls-unconfirmed { background-image: var(--icon-polls-unconfirmed--fff); } - // .icon-table-view { background-image: var(--icon-polls-table-view-fff); } } diff --git a/src/js/components/AppIcons/ActivityAppIcon.vue b/src/js/components/AppIcons/ActivityAppIcon.vue new file mode 100644 index 00000000..2fea7417 --- /dev/null +++ b/src/js/components/AppIcons/ActivityAppIcon.vue @@ -0,0 +1,59 @@ +<!-- + - @copyright Copyright (c) 2022 René Gieling <github@dartcafe.de> + - + - @author René Gieling <github@dartcafe.de> + - + - @license GNU AGPL version 3 or any later version + - + - This program is free software: you can redistribute it and/or modify + - it under the terms of the GNU Affero General Public License as + - published by the Free Software Foundation, either version 3 of the + - License, or (at your option) any later version. + - + - This program is distributed in the hope that it will be useful, + - but WITHOUT ANY WARRANTY; without even the implied warranty of + - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + - GNU Affero General Public License for more details. + - + - You should have received a copy of the GNU Affero General Public License + - along with this program. If not, see <http://www.gnu.org/licenses/>. + - + --> +<template> + <span :aria-hidden="!title" + :aria-label="title" + class="material-design-icon activity-app-icon" + role="img" + v-bind="$attrs" + @click="$emit('click', $event)"> + <svg :fill="fillColor" + class="material-design-icon__svg" + :width="size" + :height="size" + viewBox="0 0 32 32"> + <path d="m16 1-10 18h11l-1 12 10-18h-11z" :fill="fillColor"> + <title v-if="title">{{ title }}</title> + </path> + </svg> + </span> +</template> + +<script> +export default { + name: 'ActivityAppIcon', + props: { + title: { + type: String, + default: 'Activity', + }, + fillColor: { + type: String, + default: 'currentColor', + }, + size: { + type: Number, + default: 24, + }, + }, +} +</script> diff --git a/src/js/components/AppIcons/CirclesAppIcon.vue b/src/js/components/AppIcons/CirclesAppIcon.vue index 10d51961..a41b6eb3 100644 --- a/src/js/components/AppIcons/CirclesAppIcon.vue +++ b/src/js/components/AppIcons/CirclesAppIcon.vue @@ -1,3 +1,24 @@ +<!-- + - @copyright Copyright (c) 2022 René Gieling <github@dartcafe.de> + - + - @author René Gieling <github@dartcafe.de> + - + - @license GNU AGPL version 3 or any later version + - + - This program is free software: you can redistribute it and/or modify + - it under the terms of the GNU Affero General Public License as + - published by the Free Software Foundation, either version 3 of the + - License, or (at your option) any later version. + - + - This program is distributed in the hope that it will be useful, + - but WITHOUT ANY WARRANTY; without even the implied warranty of + - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + - GNU Affero General Public License for more details. + - + - You should have received a copy of the GNU Affero General Public License + - along with this program. If not, see <http://www.gnu.org/licenses/>. + - + --> <template> <span :aria-hidden="!title" :aria-label="title" @@ -12,7 +33,7 @@ viewBox="0 0 57 57"> <path d="M7.1 28.5A21.4 21.4 0 0 1 28.5 7.1m10.7 40A21.4 21.4 0 0 1 10 39M39.2 10A21.4 21.4 0 0 1 47 39.2" fill="none" - :stroke="fillcolor" + :stroke="fillColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /> diff --git a/src/js/components/AppIcons/MaybeIcon.vue b/src/js/components/AppIcons/MaybeIcon.vue index bfe62844..9d008b87 100644 --- a/src/js/components/AppIcons/MaybeIcon.vue +++ b/src/js/components/AppIcons/MaybeIcon.vue @@ -1,3 +1,24 @@ +<!-- + - @copyright Copyright (c) 2022 René Gieling <github@dartcafe.de> + - + - @author René Gieling <github@dartcafe.de> + - + - @license GNU AGPL version 3 or any later version + - + - This program is free software: you can redistribute it and/or modify + - it under the terms of the GNU Affero General Public License as + - published by the Free Software Foundation, either version 3 of the + - License, or (at your option) any later version. + - + - This program is distributed in the hope that it will be useful, + - but WITHOUT ANY WARRANTY; without even the implied warranty of + - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + - GNU Affero General Public License for more details. + - + - You should have received a copy of the GNU Affero General Public License + - along with this program. If not, see <http://www.gnu.org/licenses/>. + - + --> <template> <span :aria-hidden="!title" :aria-label="title" diff --git a/src/js/components/AppIcons/PollsAppIcon.vue b/src/js/components/AppIcons/PollsAppIcon.vue index 8d6bbb85..ca6dfa25 100644 --- a/src/js/components/AppIcons/PollsAppIcon.vue +++ b/src/js/components/AppIcons/PollsAppIcon.vue @@ -1,3 +1,24 @@ +<!-- + - @copyright Copyright (c) 2022 René Gieling <github@dartcafe.de> + - + - @author René Gieling <github@dartcafe.de> + - + - @license GNU AGPL version 3 or any later version + - + - This program is free software: you can redistribute it and/or modify + - it under the terms of the GNU Affero General Public License as + - published by the Free Software Foundation, either version 3 of the + - License, or (at your option) any later version. + - + - This program is distributed in the hope that it will be useful, + - but WITHOUT ANY WARRANTY; without even the implied warranty of + - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + - GNU Affero General Public License for more details. + - + - You should have received a copy of the GNU Affero General Public License + - along with this program. If not, see <http://www.gnu.org/licenses/>. + - + --> <template> <span :aria-hidden="!title" :aria-label="title" diff --git a/src/js/components/AppIcons/ProjectsAppIcon.vue b/src/js/components/AppIcons/ProjectsAppIcon.vue new file mode 100644 index 00000000..4e7dac8f --- /dev/null +++ b/src/js/components/AppIcons/ProjectsAppIcon.vue @@ -0,0 +1,66 @@ +<!-- + - @copyright Copyright (c) 2022 René Gieling <github@dartcafe.de> + - + - @author René Gieling <github@dartcafe.de> + - + - @license GNU AGPL version 3 or any later version + - + - This program is free software: you can redistribute it and/or modify + - it under the terms of the GNU Affero General Public License as + - published by the Free Software Foundation, either version 3 of the + - License, or (at your option) any later version. + - + - This program is distributed in the hope that it will be useful, + - but WITHOUT ANY WARRANTY; without even the implied warranty of + - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + - GNU Affero General Public License for more details. + - + - You should have received a copy of the GNU Affero General Public License + - along with this program. If not, see <http://www.gnu.org/licenses/>. + - + --> +<template> + <span :aria-hidden="!title" + :aria-label="title" + class="material-design-icon activity-app-icon" + role="img" + v-bind="$attrs" + @click="$emit('click', $event)"> + <svg :fill="fillColor" + class="material-design-icon__svg" + :width="size" + :height="size" + viewBox="0 0 4.2333 4.2333"> + <g transform="translate(0 -292.77)"> + <g transform="translate(0 -.52917)"> + <path transform="matrix(.26458 0 0 .26458 0 293.3)" + d="m5.1602 1.9746v2.205h-4.5937v7.6836h2.8047v2.3262h10.291v-4.5371h1.7891v-7.6777h-9.9043zm0.75195 0.74609h8.7871v6.1855h-1.0371v-2.3945h-2.8047v-2.332h-4.9453zm-4.5938 2.2109h8.793v1.5801h-6.7402v4.6054h-2.0527v-6.1855zm2.8066 2.3262h8.793v6.1855h-8.793z" + stroke="fillcolor" + stroke-width=".4"> + <title v-if="title">{{ title }}</title> + </path> + </g> + </g> + </svg> + </span> +</template> + +<script> +export default { + name: 'ProjectsAppIcon', + props: { + title: { + type: String, + default: 'Activity', + }, + fillColor: { + type: String, + default: 'currentColor', + }, + size: { + type: Number, + default: 24, + }, + }, +} +</script> diff --git a/src/js/components/AppIcons/PublishOff.vue b/src/js/components/AppIcons/PublishOff.vue index 0c0b63cc..123b4085 100644 --- a/src/js/components/AppIcons/PublishOff.vue +++ b/src/js/components/AppIcons/PublishOff.vue @@ -1,3 +1,24 @@ +<!-- + - @copyright Copyright (c) 2022 René Gieling <github@dartcafe.de> + - + - @author René Gieling <github@dartcafe.de> + - + - @license GNU AGPL version 3 or any later version + - + - This program is free software: you can redistribute it and/or modify + - it under the terms of the GNU Affero General Public License as + - published by the Free Software Foundation, either version 3 of the + - License, or (at your option) any later version. + - + - This program is distributed in the hope that it will be useful, + - but WITHOUT ANY WARRANTY; without even the implied warranty of + - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + - GNU Affero General Public License for more details. + - + - You should have received a copy of the GNU Affero General Public License + - along with this program. If not, see <http://www.gnu.org/licenses/>. + - + --> <template> <span :aria-hidden="!title" :aria-label="title" @@ -23,7 +44,7 @@ export default { props: { title: { type: String, - default: 'Circles', + default: 'Unpublished', }, fillColor: { type: String, diff --git a/src/js/components/AppIcons/ShieldCrownOutline.vue b/src/js/components/AppIcons/ShieldCrownOutline.vue new file mode 100644 index 00000000..ce2df0b7 --- /dev/null +++ b/src/js/components/AppIcons/ShieldCrownOutline.vue @@ -0,0 +1,59 @@ +<!-- + - @copyright Copyright (c) 2022 René Gieling <github@dartcafe.de> + - + - @author René Gieling <github@dartcafe.de> + - + - @license GNU AGPL version 3 or any later version + - + - This program is free software: you can redistribute it and/or modify + - it under the terms of the GNU Affero General Public License as + - published by the Free Software Foundation, either version 3 of the + - License, or (at your option) any later version. + - + - This program is distributed in the hope that it will be useful, + - but WITHOUT ANY WARRANTY; without even the implied warranty of + - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + - GNU Affero General Public License for more details. + - + - You should have received a copy of the GNU Affero General Public License + - along with this program. If not, see <http://www.gnu.org/licenses/>. + - + --> +<template> + <span :aria-hidden="!title" + :aria-label="title" + class="material-design-icon shield-crown-outline" + role="img" + v-bind="$attrs" + @click="$emit('click', $event)"> + <svg :fill="fillColor" + class="material-design-icon__svg" + :width="size" + :height="size" + viewBox="0 0 24 24"> + <path d="M12 1L21 5V11C21 16.55 17.16 21.74 12 23C6.84 21.74 3 16.55 3 11V5L12 1M12 3.18L5 6.3V11.22C5 15.54 8.25 20 12 21C15.75 20 19 15.54 19 11.22V6.3L12 3.18M16 14V15.5L16 15.59C15.96 15.81 15.78 15.96 15.53 16L15.43 16H8.57L8.47 16C8.22 15.96 8.04 15.81 8 15.59L8 15.5V14H16M17 8L16 13H8L7 8L7 8L9.67 10.67L12 8.34L14.33 10.67L17 8L17 8Z"> + <title v-if="title">{{ title }}</title> + </path> + </svg> + </span> +</template> + +<script> +export default { + name: 'ShieldCrownOutline', + props: { + title: { + type: String, + default: 'Admin Access', + }, + fillColor: { + type: String, + default: 'currentColor', + }, + size: { + type: Number, + default: 24, + }, + }, +} +</script> diff --git a/src/js/components/User/UserItem.vue b/src/js/components/User/UserItem.vue index 2e7b9e22..43253c9e 100644 --- a/src/js/components/User/UserItem.vue +++ b/src/js/components/User/UserItem.vue @@ -34,7 +34,7 @@ :display-name="name" :is-no-user="isNoUser" /> - <div v-if="icon" :class="['type-icon', iconClass]" /> + <AdminIcon v-if="icon && type === 'admin'" :size="16" class="type-icon" /> <slot name="status" /> @@ -63,6 +63,7 @@ export default { components: { Avatar, + AdminIcon: () => import('../AppIcons/ShieldCrownOutline.vue'), }, inheritAttrs: false, @@ -232,16 +233,6 @@ export default { return '' }, - - iconClass() { - if (this.icon) { - if (this.type === 'admin') { - return 'icon-mask-md-admin' - } - } - return '' - }, - }, } @@ -255,6 +246,12 @@ export default { background-size: 16px; } +.type-icon { + position: absolute; + top: 3px; + left: 0; +} + .user-item { position: relative; display: flex; diff --git a/src/js/views/Administration.vue b/src/js/views/Administration.vue index 9faa1ae5..9533510a 100644 --- a/src/js/views/Administration.vue +++ b/src/js/views/Administration.vue @@ -32,6 +32,9 @@ <div class="area__main"> <EmptyContent v-if="noPolls" icon="icon-polls"> {{ t('polls', 'No polls found for this category') }} + <template #icon> + <PollsAppIcon /> + </template> <template #desc> {{ t('polls', 'Add one or change category!') }} </template> @@ -123,6 +126,7 @@ import { emit } from '@nextcloud/event-bus' import { Actions, ActionButton, AppContent, Button as VueButton, EmptyContent, Modal } from '@nextcloud/vue' import sortBy from 'lodash/sortBy' import HeaderBar from '../components/Base/HeaderBar.vue' +import PollsAppIcon from '../components/AppIcons/PollsAppIcon.vue' export default { name: 'Administration', @@ -135,6 +139,7 @@ export default { HeaderBar, Modal, VueButton, + PollsAppIcon, LoadingOverlay: () => import('../components/Base/LoadingOverlay.vue'), PollItem: () => import('../components/PollList/PollItem.vue'), }, diff --git a/src/js/views/SideBar.vue b/src/js/views/SideBar.vue index 40686457..3a0caba1 100644 --- a/src/js/views/SideBar.vue +++ b/src/js/views/SideBar.vue @@ -58,8 +58,10 @@ <AppSidebarTab v-if="acl.loggedIn && useCollaboration" :id="'collaboration'" :order="4" - :name="t('polls', 'Collaboration')" - icon="icon-projects"> + :name="t('polls', 'Collaboration')"> + <template #icon> + <SidebarProjectsIcon /> + </template> <SideBarTabCollaboration /> </AppSidebarTab> @@ -76,8 +78,10 @@ <AppSidebarTab v-if="acl.allowEdit && useActivity" :id="'activity'" :order="6" - :name="t('polls', 'Activity')" - icon="icon-activity"> + :name="t('polls', 'Activity')"> + <template #icon> + <SidebarActivityIcon /> + </template> <SideBarTabActivity /> </AppSidebarTab> </AppSidebar> @@ -91,6 +95,8 @@ import SidebarConfigurationIcon from 'vue-material-design-icons/Wrench.vue' import SidebarOptionsIcon from 'vue-material-design-icons/FormatListChecks.vue' import SidebarShareIcon from 'vue-material-design-icons/ShareVariant.vue' import SidebarCommentsIcon from 'vue-material-design-icons/CommentProcessing.vue' +import SidebarActivityIcon from '../components/AppIcons/ActivityAppIcon.vue' +import SidebarProjectsIcon from '../components/AppIcons/ProjectsAppIcon.vue' export default { name: 'SideBar', @@ -104,8 +110,10 @@ export default { SideBarTabActivity: () => import('../components/SideBar/SideBarTabActivity.vue'), AppSidebar, AppSidebarTab, + SidebarActivityIcon, SidebarConfigurationIcon, SidebarOptionsIcon, + SidebarProjectsIcon, SidebarShareIcon, SidebarCommentsIcon, }, |