Skip to content

Commit f76f317

Browse files
dartcafedartcafe
authored
Merge pull request #4695 from nextcloud/ref/register-view
Ref/register view
2 parents 33dbba6 + dd06951 commit f76f317

5 files changed

Lines changed: 598 additions & 489 deletions

File tree

‎src/components/Options/OptionPreview.vue‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
<!--
2+
- SPDX-FileCopyrightText: 2018 Nextcloud contributors
3+
- SPDX-License-Identifier: AGPL-3.0-or-later
4+
-->
5+
6+
<script setup lang="ts">
7+
import { ref, computed } from 'vue'
8+
import { DateTime } from 'luxon'
9+
import { t, n } from '@nextcloud/l10n'
10+
import { getDatesFromOption } from '@/composables/optionDateTime'
11+
12+
import NcModal from '@/components/Base/modules/CustomNcModal.vue'
13+
import MagnifyExpandIcon from 'vue-material-design-icons/MagnifyExpand.vue'
14+
import CalendarBlankOutlineIcon from 'vue-material-design-icons/CalendarBlankOutline.vue'
15+
import FormatListBulletedSquareIcon from 'vue-material-design-icons/FormatListBulletedSquare.vue'
16+
17+
import OptionItem from '@/components/Options/OptionItem.vue'
18+
import { useOptionsStore } from '@/stores/options'
19+
import { usePollStore } from '@/stores/poll'
20+
21+
defineOptions({
22+
inheritAttrs: false,
23+
})
24+
25+
const optionsStore = useOptionsStore()
26+
const pollStore = usePollStore()
27+
28+
const MAX_OPTIONS = 5
29+
30+
const optionsExpanded = ref(false)
31+
32+
const previewOptions = computed(() => optionsStore.options.slice(0, MAX_OPTIONS))
33+
34+
function optionLabel(option: (typeof optionsStore.options)[0]): string {
35+
if (pollStore.type === 'datePoll') {
36+
const { optionStart, optionEnd, isSameTime, isFullDays, isSameDay } =
37+
getDatesFromOption(option)
38+
const fmt = isFullDays ? DateTime.DATE_MED : DateTime.DATETIME_MED
39+
const start = optionStart.toLocaleString(fmt)
40+
if (isSameTime || (isFullDays && isSameDay)) return start
41+
return `${start} – ${optionEnd.toLocaleString(fmt)}`
42+
}
43+
return option.text
44+
}
45+
</script>
46+
47+
<template>
48+
<div
49+
v-if="optionsStore.options.length"
50+
v-bind="$attrs"
51+
class="options_preview"
52+
role="button"
53+
:aria-label="t('polls', 'Expand options')"
54+
@click="optionsExpanded = true">
55+
<span class="options_preview__expand" aria-hidden="true">
56+
<MagnifyExpandIcon :size="20" />
57+
</span>
58+
<h3>{{ t('polls', 'Available options') }}</h3>
59+
<ul>
60+
<li
61+
v-for="option in previewOptions"
62+
:key="option.id"
63+
class="options_preview__item">
64+
<CalendarBlankOutlineIcon
65+
v-if="pollStore.type === 'datePoll'"
66+
:size="16" />
67+
<FormatListBulletedSquareIcon v-else :size="16" />
68+
{{ optionLabel(option) }}
69+
</li>
70+
</ul>
71+
<p
72+
v-if="optionsStore.options.length > MAX_OPTIONS"
73+
class="options_preview__more">
74+
{{
75+
n(
76+
'polls',
77+
'+ %n more option',
78+
'+ %n more options',
79+
optionsStore.options.length - MAX_OPTIONS,
80+
)
81+
}}
82+
</p>
83+
</div>
84+
85+
<NcModal
86+
v-if="optionsExpanded"
87+
:name="t('polls', 'Available options')"
88+
size="normal"
89+
close-on-click-outside
90+
@close="optionsExpanded = false">
91+
<ul class="options_preview__modal">
92+
<OptionItem
93+
v-for="option in optionsStore.options"
94+
:key="option.id"
95+
:option="option"
96+
tag="li" />
97+
</ul>
98+
</NcModal>
99+
</template>
100+
101+
<style lang="scss" scoped>
102+
.options_preview {
103+
position: relative;
104+
cursor: zoom-in;
105+
106+
* {
107+
cursor: zoom-in;
108+
}
109+
110+
h3 {
111+
margin: 0 0 0.5rem;
112+
}
113+
114+
ul {
115+
list-style: none;
116+
padding: 0;
117+
margin: 0;
118+
}
119+
120+
.options_preview__item {
121+
display: flex;
122+
align-items: center;
123+
gap: 0.4rem;
124+
white-space: nowrap;
125+
overflow: hidden;
126+
text-overflow: ellipsis;
127+
padding: 0.25rem 0;
128+
border-bottom: 1px solid var(--color-border);
129+
background: transparent;
130+
131+
&:last-child {
132+
border-bottom: none;
133+
}
134+
}
135+
136+
.options_preview__expand {
137+
position: absolute;
138+
top: 0.25rem;
139+
inset-inline-end: 0.25rem;
140+
z-index: 1;
141+
display: flex;
142+
align-items: center;
143+
justify-content: center;
144+
width: 44px;
145+
height: 44px;
146+
border-radius: var(--border-radius-large);
147+
background-color: var(--color-background-hover);
148+
border: 2px solid var(--color-border);
149+
color: var(--color-main-text);
150+
pointer-events: none;
151+
opacity: 0;
152+
transition: opacity 0.2s;
153+
}
154+
155+
&:hover .options_preview__expand {
156+
opacity: 1;
157+
}
158+
.options_preview__more {
159+
text-align: center;
160+
font-weight: 600;
161+
}
162+
}
163+
164+
.options_preview__modal {
165+
list-style: none;
166+
padding: 1rem;
167+
margin: 0;
168+
169+
.options_preview__item {
170+
padding: 0.4rem 0;
171+
border-bottom: 1px solid var(--color-border);
172+
173+
&:last-child {
174+
border-bottom: none;
175+
}
176+
}
177+
}
178+
</style>

‎src/components/Poll/PollDescription.vue‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<!--
2+
- SPDX-FileCopyrightText: 2018 Nextcloud contributors
3+
- SPDX-License-Identifier: AGPL-3.0-or-later
4+
-->
5+
6+
<script setup lang="ts">
7+
import { ref } from 'vue'
8+
import { t } from '@nextcloud/l10n'
9+
10+
import NcModal from '@/components/Base/modules/CustomNcModal.vue'
11+
import MagnifyExpandIcon from 'vue-material-design-icons/MagnifyExpand.vue'
12+
13+
import MarkDownDescription from '@/components/Poll/MarkDownDescription.vue'
14+
import { usePollStore } from '@/stores/poll'
15+
16+
defineOptions({
17+
inheritAttrs: false,
18+
})
19+
20+
const pollStore = usePollStore()
21+
22+
const descriptionExpanded = ref(false)
23+
</script>
24+
25+
<template>
26+
<div
27+
v-if="pollStore.configuration.description"
28+
v-bind="$attrs"
29+
class="poll_description"
30+
role="button"
31+
:aria-label="t('polls', 'Expand description')"
32+
@click="descriptionExpanded = true">
33+
<span class="poll_description_expand" aria-hidden="true">
34+
<MagnifyExpandIcon :size="20" />
35+
</span>
36+
<MarkDownDescription />
37+
</div>
38+
39+
<NcModal
40+
v-if="descriptionExpanded"
41+
:name="pollStore.configuration.title"
42+
size="large"
43+
close-on-click-outside
44+
@close="descriptionExpanded = false">
45+
<MarkDownDescription />
46+
</NcModal>
47+
</template>
48+
49+
<style lang="scss" scoped>
50+
.poll_description {
51+
max-height: 13rem;
52+
position: relative;
53+
min-height: 8rem;
54+
overflow: hidden;
55+
cursor: zoom-in;
56+
57+
* {
58+
cursor: zoom-in;
59+
}
60+
61+
.markdown-description {
62+
height: 100%;
63+
overflow: hidden;
64+
background: none;
65+
}
66+
67+
.poll_description_expand {
68+
position: absolute;
69+
top: 0.25rem;
70+
inset-inline-end: 0.25rem;
71+
z-index: 1;
72+
display: flex;
73+
align-items: center;
74+
justify-content: center;
75+
width: 44px;
76+
height: 44px;
77+
border-radius: var(--border-radius-large);
78+
background-color: var(--color-background-hover);
79+
border: 2px solid var(--color-border);
80+
color: var(--color-main-text);
81+
pointer-events: none;
82+
opacity: 0;
83+
transition: opacity 0.2s;
84+
}
85+
86+
&:hover .poll_description_expand {
87+
opacity: 1;
88+
}
89+
}
90+
91+
.modal-container__content .markdown-description {
92+
--markdown-description-bg: var(--color-main-background);
93+
}
94+
</style>

‎src/components/Poll/PollTitle.vue‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!--
2+
- SPDX-FileCopyrightText: 2018 Nextcloud contributors
3+
- SPDX-License-Identifier: AGPL-3.0-or-later
4+
-->
5+
6+
<script setup lang="ts">
7+
import { usePollStore } from '@/stores/poll'
8+
9+
const pollStore = usePollStore()
10+
</script>
11+
12+
<template>
13+
<h2 class="poll_title">
14+
{{ pollStore.configuration.title }}
15+
</h2>
16+
</template>
17+
18+
<style lang="scss" scoped>
19+
.poll_title {
20+
font-size: 1.5rem;
21+
font-weight: bold;
22+
margin: 0;
23+
}
24+
</style>

0 commit comments

Comments
 (0)