diff options
author | dartcafe <github@dartcafe.de> | 2021-02-28 15:18:27 +0300 |
---|---|---|
committer | dartcafe <github@dartcafe.de> | 2021-03-02 16:45:46 +0300 |
commit | 982c6c169e8e5935f9f664ba76c21f87ba330482 (patch) | |
tree | 89ba53e213fdc8c816d99460e360f231e46b5dcd /src/js | |
parent | 496bd621b8ccd62e9d0beee6ac7f6b6affea9832 (diff) |
converting mobile and desktop view to list-view and table-view
Signed-off-by: dartcafe <github@dartcafe.de>
Diffstat (limited to 'src/js')
-rw-r--r-- | src/js/assets/icons/anonymous.svg | 7 | ||||
-rw-r--r-- | src/js/assets/icons/back.svg | 3 | ||||
-rw-r--r-- | src/js/assets/icons/list-view.svg | 3 | ||||
-rw-r--r-- | src/js/assets/icons/table-view.svg | 3 | ||||
-rw-r--r-- | src/js/assets/scss/icons.scss | 13 | ||||
-rw-r--r-- | src/js/components/Base/Counter.vue | 2 | ||||
-rw-r--r-- | src/js/components/Calendar/CalendarPeek.vue | 2 | ||||
-rw-r--r-- | src/js/components/Settings/FeatureSettings.vue | 12 | ||||
-rw-r--r-- | src/js/components/VoteTable/VoteTable.vue | 8 | ||||
-rw-r--r-- | src/js/components/VoteTable/VoteTableHeaderItem.vue | 8 | ||||
-rw-r--r-- | src/js/store/modules/settings.js | 34 | ||||
-rw-r--r-- | src/js/views/Vote.vue | 18 |
12 files changed, 82 insertions, 31 deletions
diff --git a/src/js/assets/icons/anonymous.svg b/src/js/assets/icons/anonymous.svg new file mode 100644 index 00000000..9bd2d46a --- /dev/null +++ b/src/js/assets/icons/anonymous.svg @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg" height="16" version="1.1" width="16" viewbox="0 0 16 16"> + <g + transform="matrix(0.02467591,0,0,0.02467591,1.609349,0.97068923)"> + <path + d="m 511.086,187.131 c -37.584,-20.402 -77.071,-34.679 -120.667,-33.221 -24.969,0.843 -49.149,6.877 -73.324,12.632 -13.353,3.173 -26.705,6.403 -39.988,9.887 -4.051,1.066 -8.036,1.528 -11.982,1.682 -3.943,-0.147 -7.929,-0.616 -11.976,-1.682 -13.287,-3.484 -26.635,-6.714 -39.992,-9.887 -24.178,-5.75 -48.355,-11.789 -73.324,-12.632 -43.6,-1.458 -83.086,12.823 -120.667,33.221 -17.105,9.285 -21.56,17.524 -18.052,32.65 4.172,17.987 9.73,35.785 17.702,52.374 7.078,14.739 14.834,29.23 23.48,43.306 14.003,22.785 29.139,43.353 55.571,52.846 16.043,5.759 32.413,8.97 49.392,7.948 9.458,-0.574 18.027,-4.621 26.472,-8.807 8.387,-4.163 16.956,-8 24.498,-13.623 7.488,-5.587 15.45,-10.791 21.951,-17.408 0,0 26.892,-26.174 44.946,-30.196 18.064,4.027 44.946,30.196 44.946,30.196 6.501,6.617 14.464,11.821 21.959,17.408 7.537,5.623 16.115,9.455 24.497,13.623 8.438,4.186 17.007,8.232 26.472,8.807 16.979,1.021 33.347,-2.189 49.392,-7.948 26.43,-9.488 41.574,-30.061 55.566,-52.846 8.648,-14.071 16.4,-28.566 23.48,-43.306 7.967,-16.589 13.525,-34.382 17.702,-52.374 3.504,-15.126 -0.953,-23.365 -18.054,-32.65 z M 132.998,288.92 C 99.066,277.378 81.464,238.886 81.464,238.886 c 0,0 37.416,-19.77 71.348,-8.233 33.932,11.537 51.527,50.029 51.527,50.029 0,0 -37.414,19.775 -71.341,8.238 z m 264.258,0 c -33.93,11.537 -71.35,-8.237 -71.35,-8.237 0,0 17.604,-38.492 51.538,-50.029 33.925,-11.537 71.341,8.233 71.341,8.233 0,0 -17.594,38.491 -51.529,50.033 z" /> + </g> +</svg> diff --git a/src/js/assets/icons/back.svg b/src/js/assets/icons/back.svg index c9e56bcf..7f7db51d 100644 --- a/src/js/assets/icons/back.svg +++ b/src/js/assets/icons/back.svg @@ -1,4 +1,3 @@ <svg xmlns="http://www.w3.org/2000/svg" height="16" version="1.1" width="16" viewbox="0 0 16 16"> - <path - d="m 7.4983269,0.5 c 0.8974,0 1.3404,1.0909 0.6973,1.7168 L 3.4119269,7 H 14.984927 c 1.3523,-0.019125 1.3523,2.0191 0,2 H 3.4129269 l 4.7832,4.7832 c 0.98163,0.94251 -0.47155,2.3957 -1.4141,1.4141 l -6.49109997,-6.49 c -0.387,-0.3878 -0.391,-1.0228 0,-1.414 L 6.7815269,0.803 c 0.1883,-0.1935 0.4468,-0.30268 0.7168,-0.3027 z" /> + <path d="m 7.4983269,0.5 c 0.8974,0 1.3404,1.0909 0.6973,1.7168 L 3.4119269,7 H 14.984927 c 1.3523,-0.019125 1.3523,2.0191 0,2 H 3.4129269 l 4.7832,4.7832 c 0.98163,0.94251 -0.47155,2.3957 -1.4141,1.4141 l -6.49109997,-6.49 c -0.387,-0.3878 -0.391,-1.0228 0,-1.414 L 6.7815269,0.803 c 0.1883,-0.1935 0.4468,-0.30268 0.7168,-0.3027 z" /> </svg> diff --git a/src/js/assets/icons/list-view.svg b/src/js/assets/icons/list-view.svg new file mode 100644 index 00000000..2aff8b9f --- /dev/null +++ b/src/js/assets/icons/list-view.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" height="16" version="1.1" width="16" viewbox="0 0 16 16"> + <path style="stroke-width:0.01602012" d="M 1.3612776,0.415548 C 0.84010773,0.400604 0.4,0.851437 0.4,1.347809 v 13.302908 c 0,0.496372 0.42740373,0.947173 0.9612776,0.933808 V 15.6 H 14.587434 C 15.146663,15.6 15.6,15.174974 15.6,14.650676 V 1.349325 C 15.6,0.825026 15.146663,0.4 14.587438,0.4 H 1.3612776 Z M 14.8,12.000085 v 2.799768 H 3.9999981 V 12.000085 Z M 14.8,8.4 v 2.799915 H 3.9999981 V 8.4 Z m -1.1e-5,-7.2 V 4 H 4.0000019 V 1.2 Z M 14.8,4.8 V 7.6 H 3.9999981 V 4.8 Z" /> +</svg> diff --git a/src/js/assets/icons/table-view.svg b/src/js/assets/icons/table-view.svg new file mode 100644 index 00000000..3960d8a8 --- /dev/null +++ b/src/js/assets/icons/table-view.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" height="16" version="1.1" width="16" viewbox="0 0 16 16"> + <path style="stroke-width:0.01602012" d="M 15.584452,1.3612776 C 15.599396,0.84010773 15.148563,0.4 14.652191,0.4 H 1.3492833 C 0.85291094,0.4 0.40211039,0.82740373 0.4154746,1.3612776 H 0.4 V 14.587434 C 0.4,15.146663 0.82502596,15.6 1.3493243,15.6 H 14.650675 C 15.174974,15.6 15.6,15.146663 15.6,14.587438 V 1.3612776 Z M 5.2001695,14.799989 H 1.2000091 v -2.8 h 3.9998214 z m -3.39e-4,-3.59986 -3.9998214,-2.61e-4 -1.377e-4,-2.7998756 h 3.9999591 z m 0,-3.6001328 H 1.2001469 v -2.8 H 5.1998305 Z M 10,14.799989 H 6 v -2.8 h 4 z m 0,-3.59986 H 6 V 8.3999924 h 4 z M 10,7.5999962 H 6 v -2.8 h 4 z m 4.8,7.1999928 h -4 v -2.8 h 4 z m 0,-3.59986 h -4 V 8.3999924 h 4 z m 0,-3.6001328 h -4 v -2.8 h 4 z" /> +</svg> diff --git a/src/js/assets/scss/icons.scss b/src/js/assets/scss/icons.scss index 4ecaa2bb..d12fb47e 100644 --- a/src/js/assets/scss/icons.scss +++ b/src/js/assets/scss/icons.scss @@ -4,7 +4,10 @@ --icon-polls: url('../icons/polls.svg'); --icon-polls--fff: url('../icons/polls-fff.svg'); --icon-circles: url('../icons/circles.svg'); + --icon-clock: url('../icons/clock.svg'); + --icon-clock--fff: url('../icons/clock-fff.svg'); --icon-circles--fff: url('../icons/circles-fff.svg'); + --icon-polls-anonymous: url('../icons/anonymous.svg'); --icon-polls-back: url('../icons/back.svg'); --icon-polls-back--fff: url('../icons/back-fff.svg'); --icon-polls-confirmed: url('../icons/confirmed.svg'); @@ -24,6 +27,8 @@ --icon-polls-mail: url('../icons/mail.svg'); --icon-polls-mail--fff: url('../icons/mail-fff.svg'); --icon-polls-sidebar-toggle: url('../icons/sidebar-toggle.svg'); + --icon-polls-table-view: url('../icons/table-view.svg'); + --icon-polls-list-view: url('../icons/list-view.svg'); --icon-polls-sidebar-toggle--fff: url('../icons/sidebar-toggle-fff.svg'); --icon-polls-loading: url('../icons/loading-small.gif'); --icon-polls-open: url('../icons/open.svg'); @@ -118,6 +123,14 @@ background-image: var(--icon-polls-handle); } +.icon-table-view { + background-image: var(--icon-polls-table-view); +} + +.icon-list-view { + background-image: var(--icon-polls-list-view); +} + .theme--dark { .icon-polls { background-image: var(--icon-polls--fff); diff --git a/src/js/components/Base/Counter.vue b/src/js/components/Base/Counter.vue index 2ff72cf1..f43c8786 100644 --- a/src/js/components/Base/Counter.vue +++ b/src/js/components/Base/Counter.vue @@ -151,7 +151,7 @@ export default { } -.mobile .counter { +.list-view .counter { flex: 0; } diff --git a/src/js/components/Calendar/CalendarPeek.vue b/src/js/components/Calendar/CalendarPeek.vue index 8f16f7dc..a8ed9b4e 100644 --- a/src/js/components/Calendar/CalendarPeek.vue +++ b/src/js/components/Calendar/CalendarPeek.vue @@ -143,7 +143,7 @@ export default { margin: 4px auto; } -.mobile .calendar-peek__caption { +.list-view .calendar-peek__caption { display: none; } diff --git a/src/js/components/Settings/FeatureSettings.vue b/src/js/components/Settings/FeatureSettings.vue index 62692768..4485f5ff 100644 --- a/src/js/components/Settings/FeatureSettings.vue +++ b/src/js/components/Settings/FeatureSettings.vue @@ -98,25 +98,25 @@ export default { defaultViewTextPoll: { get() { - return (this.settings.defaultViewTextPoll === 'mobile') + return (this.settings.defaultViewTextPoll === 'list-view') }, set(value) { if (value) { - this.writeValue({ defaultViewTextPoll: 'mobile' }) + this.writeValue({ defaultViewTextPoll: 'list-view' }) } else { - this.writeValue({ defaultViewTextPoll: 'desktop' }) + this.writeValue({ defaultViewTextPoll: 'table-view' }) } }, }, defaultViewDatePoll: { get() { - return (this.settings.defaultViewDatePoll === 'mobile') + return (this.settings.defaultViewDatePoll === 'list-view') }, set(value) { if (value) { - this.writeValue({ defaultViewDatePoll: 'mobile' }) + this.writeValue({ defaultViewDatePoll: 'list-view' }) } else { - this.writeValue({ defaultViewDatePoll: 'desktop' }) + this.writeValue({ defaultViewDatePoll: 'table-view' }) } }, }, diff --git a/src/js/components/VoteTable/VoteTable.vue b/src/js/components/VoteTable/VoteTable.vue index 0aeb53cc..9965fb53 100644 --- a/src/js/components/VoteTable/VoteTable.vue +++ b/src/js/components/VoteTable/VoteTable.vue @@ -47,8 +47,8 @@ <Counter v-else :show-maybe="!!poll.allowMaybe" :option="option" - :counter-style="viewMode === 'desktop' ? 'iconStyle' : 'barStyle'" - :show-no="viewMode === 'mobile'" /> + :counter-style="viewMode === 'table-view' ? 'iconStyle' : 'barStyle'" + :show-no="viewMode === 'list-view'" /> <CalendarPeek v-if="poll.type === 'datePoll' && getCurrentUser() && settings.calendarPeek" :option="option" /> <div v-for="(participant) in participants" :key="participant.userId" class="vote-item-wrapper" :class="{currentuser: participant.userId === acl.userId}"> @@ -110,7 +110,7 @@ export default { props: { viewMode: { type: String, - default: 'desktop', + default: 'table-view', }, ranked: { type: Boolean, @@ -260,7 +260,7 @@ export default { } } -.vote-table.mobile { +.vote-table.list-view { flex-direction: column; .counter { diff --git a/src/js/components/VoteTable/VoteTableHeaderItem.vue b/src/js/components/VoteTable/VoteTableHeaderItem.vue index dd8a123a..e0f810b7 100644 --- a/src/js/components/VoteTable/VoteTableHeaderItem.vue +++ b/src/js/components/VoteTable/VoteTableHeaderItem.vue @@ -45,7 +45,7 @@ export default { }, viewMode: { type: String, - default: 'desktop', + default: 'table-view', }, }, @@ -61,21 +61,21 @@ export default { }), optionStyle() { - if (this.viewMode === 'desktop') { + if (this.viewMode === 'table-view') { return 'dateBox' } else { return 'textBox' } }, counterStyle() { - if (this.viewMode === 'desktop') { + if (this.viewMode === 'table-view') { return 'iconStyle' } else { return 'barStyle' } }, showNo() { - return (this.viewMode === 'mobile') + return (this.viewMode === 'list-view') }, isWinner() { // highlight best option until poll is closed and diff --git a/src/js/store/modules/settings.js b/src/js/store/modules/settings.js index 64d069a5..53d3441d 100644 --- a/src/js/store/modules/settings.js +++ b/src/js/store/modules/settings.js @@ -33,13 +33,13 @@ const defaultSettings = () => { imageUrl: '', glassyNavigation: false, glassySidebar: false, - defaultViewTextPoll: 'mobile', - defaultViewDatePoll: 'desktop', + defaultViewTextPoll: 'list-view', + defaultViewDatePoll: 'table-view', }, availableCalendars: [], viewModes: [ - 'mobile', - 'desktop', + 'list-view', + 'table-view', ], } } @@ -53,6 +53,20 @@ const mutations = { }, setPreference(state, payload) { + + if (payload.defaultViewTextPoll === 'desktop') { + payload.defaultViewTextPoll = 'table-view' + } + if (payload.defaultViewTextPoll === 'mobile') { + payload.defaultViewTextPoll = 'list-view' + } + if (payload.defaultViewDatePoll === 'desktop') { + payload.defaultViewDatePoll = 'table-view' + } + if (payload.defaultViewDatePoll === 'mobile') { + payload.defaultViewDatePoll = 'list-view' + } + Object.keys(payload).filter(key => key in state.user).forEach(key => { state.user[key] = payload[key] }) @@ -70,6 +84,18 @@ const actions = { const endPoint = 'apps/polls/preferences/get' try { const response = await axios.get(generateUrl(endPoint)) + if (response.data.preferences.defaultViewTextPoll === 'desktop') { + response.data.preferences.defaultViewTextPoll = 'table-view' + } + if (response.data.preferences.defaultViewTextPoll === 'mobile') { + response.data.preferences.defaultViewTextPoll = 'list-view' + } + if (response.data.preferences.defaultViewDatePoll === 'desktop') { + response.data.preferences.defaultViewDatePoll = 'table-view' + } + if (response.data.preferences.defaultViewDatePoll === 'mobile') { + response.data.preferences.defaultViewDatePoll = 'list-view' + } context.commit('setPreference', response.data.preferences) } catch { context.commit('reset') diff --git a/src/js/views/Vote.vue b/src/js/views/Vote.vue index c71e0d2f..1c1dd971 100644 --- a/src/js/views/Vote.vue +++ b/src/js/views/Vote.vue @@ -165,7 +165,7 @@ export default { if (window.innerWidth > 480) { return this.settings.user.defaultViewTextPoll } else { - return 'mobile' + return 'list-view' } } }, @@ -177,7 +177,7 @@ export default { if (window.innerWidth > 480) { return this.settings.user.defaultViewDatePoll } else { - return 'mobile' + return 'list-view' } } }, @@ -188,7 +188,7 @@ export default { } else if (this.poll.type === 'datePoll') { return this.viewDatePoll } else { - return 'desktop' + return 'table-view' } }, @@ -227,10 +227,10 @@ export default { }, viewCaption() { - if (this.viewMode === 'desktop') { - return t('polls', 'Switch to mobile view') + if (this.viewMode === 'table-view') { + return t('polls', 'Switch to list view') } else { - return t('polls', 'Switch to desktop view') + return t('polls', 'Switch to table view') } }, orderCaption() { @@ -266,10 +266,10 @@ export default { }, toggleViewIcon() { - if (this.viewMode === 'desktop') { - return 'icon-phone' + if (this.viewMode === 'table-view') { + return 'icon-list-view' } else { - return 'icon-desktop' + return 'icon-table-view' } }, |