more replacementsmd-icons

Signed-off-by: dartcafe <github@dartcafe.de>

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,
 	},