Merge pull request #1308 from nextcloud/fix/even_more_icons

Move to NcEmptyContent and even more icons

src/Forms.vue

@@ -55,27 +55,36 @@
 
 		<!-- No forms & loading emptycontents -->
 		<NcAppContent v-if="loading || !hasForms || !routeHash || !routeAllowed">
-			<EmptyContent v-if="loading" icon="icon-loading">
-				{{ t('forms', 'Loading forms …') }}
-			</EmptyContent>
-			<EmptyContent v-else-if="!hasForms">
-				{{ t('forms', 'No forms created yet') }}
+			<NcEmptyContent v-if="loading"
+				:title="t('forms', 'Loading forms …')">
+				<template #icon>
+					<NcLoadingIcon :size="64" />
+				</template>
+			</NcEmptyContent>
+
+			<NcEmptyContent v-else-if="!hasForms"
+				:title="t('forms', 'No forms created yet')">
+				<template #icon>
+					<FormsIcon :size="64" />
+				</template>
 				<template v-if="canCreateForms" #action>
 					<NcButton type="primary" @click="onNewForm">
 						{{ t('forms', 'Create a form') }}
 					</NcButton>
 				</template>
-			</EmptyContent>
+			</NcEmptyContent>
 
-			<EmptyContent v-else>
-				<span v-if="canCreateForms">{{ t('forms', 'Select a form or create a new one') }}</span>
-				<span v-else>{{ t('forms', 'Please select a form') }}</span>
+			<NcEmptyContent v-else
+				:title="canCreateForms ? t('forms', 'Select a form or create a new one') : t('forms', 'Please select a form')">
+				<template #icon>
+					<FormsIcon :size="64" />
+				</template>
 				<template v-if="canCreateForms" #action>
 					<NcButton type="primary" @click="onNewForm">
 						{{ t('forms', 'Create new form') }}
 					</NcButton>
 				</template>
-			</EmptyContent>
+			</NcEmptyContent>
 		</NcAppContent>
 
 		<!-- No errors show router content -->
@@ -105,12 +114,14 @@ import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigati
 import NcAppNavigationNew from '@nextcloud/vue/dist/Components/NcAppNavigationNew'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton'
 import NcContent from '@nextcloud/vue/dist/Components/NcContent'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon'
 import isMobile from '@nextcloud/vue/dist/Mixins/isMobile'
 
 import IconPlus from 'vue-material-design-icons/Plus'
 
+import FormsIcon from './components/Icons/FormsIcon.vue'
 import AppNavigationForm from './components/AppNavigationForm.vue'
-import EmptyContent from './components/EmptyContent.vue'
 import PermissionTypes from './mixins/PermissionTypes.js'
 import OcsResponse2Data from './utils/OcsResponse2Data.js'
 import logger from './utils/Logger.js'
@@ -120,14 +131,16 @@ export default {
 
 	components: {
 		AppNavigationForm,
-		EmptyContent,
+		FormsIcon,
 		IconPlus,
 		NcAppContent,
 		NcAppNavigation,
 		NcAppNavigationCaption,
 		NcAppNavigationNew,
 		NcButton,
 		NcContent,
+		NcEmptyContent,
+		NcLoadingIcon,
 	},
 
 	mixins: [isMobile, PermissionTypes],

src/components/Questions/Question.vue

@@ -29,9 +29,11 @@
 		<!-- Drag handle -->
 		<!-- TODO: implement arrow key mapping to reorder question -->
 		<div v-if="!readOnly"
-			class="question__drag-handle icon-drag-handle"
+			class="question__drag-handle"
 			:class="{'question__drag-handle--shiftup': shiftDragHandle}"
-			:aria-label="t('forms', 'Drag to reorder the questions')" />
+			:aria-label="t('forms', 'Drag to reorder the questions')">
+			<IconDragHorizontalVariant :size="20" />
+		</div>
 
 		<!-- Header -->
 		<div class="question__header">
@@ -49,15 +51,20 @@
 				<h3 v-else class="question__header__title__text" v-text="computedText" />
 				<div v-if="!edit && !questionValid"
 					v-tooltip.auto="warningInvalid"
-					class="question__header__title__warning icon-error-color"
-					tabindex="0" />
+					class="question__header__title__warning"
+					tabindex="0">
+					<IconAlertCircleOutline :size="20" />
+				</div>
 				<NcActions v-if="!readOnly" class="question__header__title__menu" :force-menu="true">
 					<NcActionCheckbox :checked="isRequired"
 						@update:checked="onRequiredChange">
 						<!-- TRANSLATORS Making this question necessary to be answered when submitting to a form -->
 						{{ t('forms', 'Required') }}
 					</NcActionCheckbox>
-					<NcActionButton icon="icon-delete" @click="onDelete">
+					<NcActionButton @click="onDelete">
+						<template #icon>
+							<IconDelete :size="20" />
+						</template>
 						{{ t('forms', 'Delete question') }}
 					</NcActionButton>
 				</NcActions>
@@ -89,6 +96,10 @@ import NcActions from '@nextcloud/vue/dist/Components/NcActions'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
 import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox'
 
+import IconAlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline'
+import IconDelete from 'vue-material-design-icons/Delete'
+import IconDragHorizontalVariant from 'vue-material-design-icons/DragHorizontalVariant'
+
 export default {
 	name: 'Question',
 
@@ -97,6 +108,9 @@ export default {
 	},
 
 	components: {
+		IconAlertCircleOutline,
+		IconDelete,
+		IconDragHorizontalVariant,
 		NcActions,
 		NcActionButton,
 		NcActionCheckbox,
@@ -308,7 +322,8 @@ export default {
 			}
 
 			&__warning {
-				padding: 22px;
+				margin: auto 4px auto 12px;
+				color: var(--color-error);
 			}
 
 			&__menu.action-item {

src/components/Results/Submission.vue

@@ -25,7 +25,10 @@
 		<div class="submission-head">
 			<h3>{{ submission.userDisplayName }}</h3>
 			<NcActions class="submission-menu" :force-menu="true">
-				<NcActionButton icon="icon-delete" @click="onDelete">
+				<NcActionButton @click="onDelete">
+					<template #icon>
+						<IconDelete :size="20" />
+					</template>
 					{{ t('forms', 'Delete this response') }}
 				</NcActionButton>
 			</NcActions>
@@ -45,6 +48,7 @@
 import NcActions from '@nextcloud/vue/dist/Components/NcActions'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
 import moment from '@nextcloud/moment'
+import IconDelete from 'vue-material-design-icons/Delete'
 
 import Answer from './Answer.vue'
 
@@ -53,6 +57,7 @@ export default {
 
 	components: {
 		Answer,
+		IconDelete,
 		NcActions,
 		NcActionButton,
 	},

src/views/Create.vue

@@ -24,9 +24,11 @@
 
 <template>
 	<NcAppContent v-if="isLoadingForm">
-		<EmptyContent icon="icon-loading">
-			{{ t('forms', 'Loading {title} …', { title: form.title }) }}
-		</EmptyContent>
+		<NcEmptyContent :title="t('forms', 'Loading {title} …', { title: form.title })">
+			<template #icon>
+				<NcLoadingIcon :size="64" />
+			</template>
+		</NcEmptyContent>
 	</NcAppContent>
 
 	<NcAppContent v-else>
@@ -107,8 +109,11 @@
 					:open.sync="questionMenuOpened"
 					:menu-title="t('forms', 'Add a question')"
 					:aria-label="t('forms', 'Add a question')"
-					:primary="true"
-					:default-icon="isLoadingQuestions ? 'icon-loading-small' : 'icon-add-primary'">
+					:primary="true">
+					<template #icon>
+						<NcLoadingIcon v-if="isLoadingQuestions" :size="20" />
+						<IconPlus v-else :size="20" />
+					</template>
 					<NcActionButton v-for="(answer, type) in answerTypesFilter"
 						:key="answer.label"
 						:close-after-click="true"
@@ -134,15 +139,17 @@ import axios from '@nextcloud/axios'
 import debounce from 'debounce'
 import Draggable from 'vuedraggable'
 import IconMessageReplyText from 'vue-material-design-icons/MessageReplyText'
+import IconPlus from 'vue-material-design-icons/Plus'
 import IconShareVariant from 'vue-material-design-icons/ShareVariant'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions'
 import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon'
 
 import answerTypes from '../models/AnswerTypes.js'
-import EmptyContent from '../components/EmptyContent.vue'
 import Question from '../components/Questions/Question.vue'
 import QuestionLong from '../components/Questions/QuestionLong.vue'
 import QuestionMultiple from '../components/Questions/QuestionMultiple.vue'
@@ -159,13 +166,15 @@ export default {
 	name: 'Create',
 	components: {
 		Draggable,
-		EmptyContent,
 		IconMessageReplyText,
+		IconPlus,
 		IconShareVariant,
 		NcActionButton,
 		NcActions,
 		NcAppContent,
 		NcButton,
+		NcEmptyContent,
+		NcLoadingIcon,
 		Question,
 		QuestionLong,
 		QuestionShort,
@@ -503,10 +512,6 @@ export default {
 
 			// To align with Drag-Handle
 			margin-left: 16px;
-
-			.icon-add-white {
-				opacity: 1;
-			}
 		}
 	}
 }