Skip to content

Commit

Permalink
fix: Make sure empty content is aligned on the center
Browse files Browse the repository at this point in the history 
Signed-off-by: Ferdinand Thiessen <[email protected]>
  • Loading branch information
@susnux
susnux committed Nov 28, 2023
1 parent 858826a commit 8d6a674
Show file tree
Hide file tree
Showing 3 changed files with 115 additions and 116 deletions.
11 changes: 5 additions & 6 deletions src/Forms.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,15 +57,15 @@
<!-- No forms & loading emptycontents -->
<NcAppContent v-if="loading || !hasForms || !routeHash || !routeAllowed">
<NcEmptyContent v-if="loading"
class="emptycontent"
class="forms-emptycontent"
:name="t('forms', 'Loading forms …')">
<template #icon>
<NcLoadingIcon :size="64" />
</template>
</NcEmptyContent>

<NcEmptyContent v-else-if="!hasForms"
class="emptycontent"
class="forms-emptycontent"
:name="t('forms', 'No forms created yet')">
<template #icon>
<FormsIcon :size="64" />
Expand All @@ -78,7 +78,7 @@
</NcEmptyContent>

<NcEmptyContent v-else
class="emptycontent"
class="forms-emptycontent"
:name="canCreateForms ? t('forms', 'Select a form or create a new one') : t('forms', 'Please select a form')">
<template #icon>
<FormsIcon :size="64" />
Expand Down Expand Up @@ -382,9 +382,8 @@ export default {
}
</script>
<style lang="scss" scoped>
.emptycontent {
display: flex;
<style scoped lang="scss">
.forms-emptycontent {
height: 100%;
}
</style>
209 changes: 105 additions & 104 deletions src/views/Results.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,113 +23,115 @@
-->

<template>
<NcAppContent v-if="loadingResults">
<NcEmptyContent class="emptycontent"
:name="t('forms', 'Loading responses …')">
<template #icon>
<NcLoadingIcon :size="64" />
</template>
</NcEmptyContent>
</NcAppContent>

<NcAppContent v-else>
<NcAppContent>
<TopBar :permissions="form?.permissions"
:sidebar-opened="sidebarOpened"
@update:sidebarOpened="onSidebarChange"
@share-form="onShareForm" />
<header v-if="!noSubmissions">
<h2 dir="auto">
{{ formTitle }}
</h2>
<p>{{ t('forms', '{amount} responses', { amount: form.submissions.length }) }}</p>
<!-- View switcher between Summary and Responses -->
<div class="response-actions">
<div class="response-actions__radio">
<input id="show-summary--true"
v-model="showSummary"
type="radio"
:value="true"
class="hidden">
<label for="show-summary--true"
class="response-actions__radio__item"
:class="{ 'response-actions__radio__item--active': showSummary }">
{{ t('forms', 'Summary') }}
</label>
<input id="show-summary--false"
v-model="showSummary"
type="radio"
:value="false"
class="hidden">
<label for="show-summary--false"
class="response-actions__radio__item"
:class="{ 'response-actions__radio__item--active': !showSummary }">
{{ t('forms', 'Responses') }}
</label>
</div>
<!-- Action menu for CSV export and deletion -->
<NcActions class="results-menu"
:aria-label="t('forms', 'Options')"
:force-menu="true">
<NcActionButton :close-after-click="true" @click="onStoreToFiles">
<template #icon>
<IconFolder :size="20" />
</template>
{{ t('forms', 'Save CSV to Files') }}
</NcActionButton>
<NcActionButton @click="onDownloadCsv">
<template #icon>
<IconDownload :size="20" />
</template>
{{ t('forms', 'Download CSV') }}
</NcActionButton>
<NcActionButton v-if="canDeleteSubmissions" @click="deleteAllSubmissions">
<template #icon>
<IconDelete :size="20" />
</template>
{{ t('forms', 'Delete all responses') }}
</NcActionButton>
</NcActions>
</div>
</header>
<!-- Loading submissions -->
<NcEmptyContent v-if="loadingResults"
class="forms-emptycontent"
:name="t('forms', 'Loading responses …')">
<template #icon>
<NcLoadingIcon :size="64" />
</template>
</NcEmptyContent>
<!-- No submissions -->
<section v-if="noSubmissions">
<NcEmptyContent :name="t('forms', 'No responses yet')"
class="emptycontent"
:description="t('forms', 'Results of submitted forms will show up here')">
<template #icon>
<IconPoll :size="64" />
</template>
<template #action>
<NcButton type="primary" @click="onShareForm">
<template #icon>
<IconShareVariant :size="20" decorative />
</template>
{{ t('forms', 'Share form') }}
</NcButton>
</template>
</NcEmptyContent>
</section>
<!-- Summary view for visualization -->
<section v-if="!noSubmissions && showSummary">
<ResultsSummary v-for="question in form.questions"
:key="question.id"
:question="question"
:submissions="form.submissions" />
</section>
<!-- Responses view for individual responses -->
<section v-if="!noSubmissions && !showSummary">
<Submission v-for="submission in form.submissions"
:key="submission.id"
:submission="submission"
:questions="form.questions"
:can-delete-submission="canDeleteSubmissions"
@delete="deleteSubmission(submission.id)" />
</section>
<NcEmptyContent v-else-if="noSubmissions" :name="t('forms', 'No responses yet')"

Check failure on line 42 in src/views/Results.vue

View workflow job for this annotation

GitHub Actions / NPM lint 

':name' should be on a new line
class="forms-emptycontent"
:description="t('forms', 'Results of submitted forms will show up here')">
<template #icon>
<IconPoll :size="64" />
</template>
<template #action>
<NcButton type="primary" @click="onShareForm">
<template #icon>
<IconShareVariant :size="20" decorative />
</template>
{{ t('forms', 'Share form') }}
</NcButton>
</template>
</NcEmptyContent>
<!-- Showing submissions -->
<template v-else>
<header>
<h2 dir="auto">
{{ formTitle }}
</h2>
<p>{{ t('forms', '{amount} responses', { amount: form.submissions.length }) }}</p>
<!-- View switcher between Summary and Responses -->
<div class="response-actions">
<div class="response-actions__radio">
<input id="show-summary--true"
v-model="showSummary"
type="radio"
:value="true"
class="hidden">
<label for="show-summary--true"
class="response-actions__radio__item"
:class="{ 'response-actions__radio__item--active': showSummary }">
{{ t('forms', 'Summary') }}
</label>
<input id="show-summary--false"
v-model="showSummary"
type="radio"
:value="false"
class="hidden">
<label for="show-summary--false"
class="response-actions__radio__item"
:class="{ 'response-actions__radio__item--active': !showSummary }">
{{ t('forms', 'Responses') }}
</label>
</div>
<!-- Action menu for CSV export and deletion -->
<NcActions class="results-menu"
:aria-label="t('forms', 'Options')"
:force-menu="true">
<NcActionButton :close-after-click="true" @click="onStoreToFiles">
<template #icon>
<IconFolder :size="20" />
</template>
{{ t('forms', 'Save CSV to Files') }}
</NcActionButton>
<NcActionButton @click="onDownloadCsv">
<template #icon>
<IconDownload :size="20" />
</template>
{{ t('forms', 'Download CSV') }}
</NcActionButton>
<NcActionButton v-if="canDeleteSubmissions" @click="deleteAllSubmissions">
<template #icon>
<IconDelete :size="20" />
</template>
{{ t('forms', 'Delete all responses') }}
</NcActionButton>
</NcActions>
</div>
</header>
<!-- Summary view for visualization -->
<section v-if="showSummary">
<ResultsSummary v-for="question in form.questions"
:key="question.id"
:question="question"
:submissions="form.submissions" />
</section>
<!-- Responses view for individual responses -->
<section v-else>
<Submission v-for="submission in form.submissions"
:key="submission.id"
:submission="submission"
:questions="form.questions"
:can-delete-submission="canDeleteSubmissions"
@delete="deleteSubmission(submission.id)" />
</section>
</template>
</NcAppContent>
</template>
Expand All @@ -138,14 +140,14 @@ import { generateOcsUrl } from '@nextcloud/router'
import { getRequestToken } from '@nextcloud/auth'
import { getFilePickerBuilder, showError, showSuccess } from '@nextcloud/dialogs'
import { emit } from '@nextcloud/event-bus'
import axios from '@nextcloud/axios'
import moment from '@nextcloud/moment'
import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
import axios from '@nextcloud/axios'
import moment from '@nextcloud/moment'
import IconDelete from 'vue-material-design-icons/Delete.vue'
import IconDownload from 'vue-material-design-icons/Download.vue'
Expand Down Expand Up @@ -328,8 +330,7 @@ export default {
</script>
<style lang="scss" scoped>
.emptycontent {
display: flex;
.forms-emptycontent {
height: 100%;
}
Expand Down
11 changes: 5 additions & 6 deletions src/views/Submit.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@

<template>
<NcAppContent v-if="isLoadingForm">
<NcEmptyContent class="emptycontent"
<NcEmptyContent class="forms-emptycontent"
:name="t('forms', 'Loading {title} …', { title: form.title })">
<template #icon>
<NcLoadingIcon :size="64" />
Expand Down Expand Up @@ -59,14 +59,14 @@
</header>
<NcEmptyContent v-if="loading"
class="emptycontent"
class="forms-emptycontent"
:name="t('forms', 'Submitting form …')">
<template #icon>
<NcLoadingIcon :size="64" />
</template>
</NcEmptyContent>
<NcEmptyContent v-else-if="success || !form.canSubmit"
class="emptycontent"
class="forms-emptycontent"
:name="t('forms', 'Thank you for completing the form!')"
:description="form.submissionMessage">
<template #icon>
Expand All @@ -78,7 +78,7 @@
</template>
</NcEmptyContent>
<NcEmptyContent v-else-if="isExpired"
class="emptycontent"
class="forms-emptycontent"
:name="t('forms', 'Form expired')"
:description="t('forms', 'This form has expired and is no longer taking answers')">
<template #icon>
Expand Down Expand Up @@ -459,8 +459,7 @@ export default {
<style lang="scss" scoped>
@import '../scssmixins/markdownOutput';
.emptycontent {
display: flex;
.forms-emptycontent {
height: 100%;
}
.app-content {
Expand Down

0 comments on commit 8d6a674

Please sign in to comment.