Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move to NcEmptyContent and even more icons #1308

Merged
merged 1 commit into from
Sep 5, 2022
Merged

Move to NcEmptyContent and even more icons #1308

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 0 additions & 55 deletions css/icons.scss
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion img/clone.svg
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion img/drag-handle.svg
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion img/share.svg
View file
Open in desktop

This file was deleted.

37 changes: 25 additions & 12 deletions src/Forms.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand Down Expand Up @@ -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'
Expand All @@ -120,14 +131,16 @@ export default {

components: {
AppNavigationForm,
EmptyContent,
FormsIcon,
IconPlus,
NcAppContent,
NcAppNavigation,
NcAppNavigationCaption,
NcAppNavigationNew,
NcButton,
NcContent,
NcEmptyContent,
NcLoadingIcon,
},

mixins: [isMobile, PermissionTypes],
Expand Down
78 changes: 0 additions & 78 deletions src/components/EmptyContent.vue
View file
Open in desktop

This file was deleted.

27 changes: 21 additions & 6 deletions src/components/Questions/Question.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand Down Expand Up @@ -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',

Expand All @@ -97,6 +108,9 @@ export default {
},

components: {
IconAlertCircleOutline,
IconDelete,
IconDragHorizontalVariant,
NcActions,
NcActionButton,
NcActionCheckbox,
Expand Down Expand Up @@ -308,7 +322,8 @@ export default {
}

&__warning {
padding: 22px;
margin: auto 4px auto 12px;
color: var(--color-error);
}

&__menu.action-item {
Expand Down
7 changes: 6 additions & 1 deletion src/components/Results/Submission.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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'

Expand All @@ -53,6 +57,7 @@ export default {

components: {
Answer,
IconDelete,
NcActions,
NcActionButton,
},
Expand Down
27 changes: 16 additions & 11 deletions src/views/Create.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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"
Expand All @@ -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'
Expand All @@ -159,13 +166,15 @@ export default {
name: 'Create',
components: {
Draggable,
EmptyContent,
IconMessageReplyText,
IconPlus,
IconShareVariant,
NcActionButton,
NcActions,
NcAppContent,
NcButton,
NcEmptyContent,
NcLoadingIcon,
Question,
QuestionLong,
QuestionShort,
Expand Down Expand Up @@ -503,10 +512,6 @@ export default {

// To align with Drag-Handle
margin-left: 16px;

.icon-add-white {
opacity: 1;
}
}
}
}
Expand Down
Loading