From e0c1b5003ad9897c233cc91c9dd41f71e33da03a Mon Sep 17 00:00:00 2001 From: dartcafe Date: Mon, 26 Oct 2020 08:58:51 +0100 Subject: [PATCH] move some css from app to assets --- CHANGELOG.md | 1 + src/js/App.vue | 178 +------------------ src/js/assets/colors.scss | 10 ++ src/js/assets/experimental.scss | 44 +++++ src/js/assets/icons.scss | 104 +++++++++++ src/js/assets/{ => icons}/back.svg | 0 src/js/assets/{ => icons}/circles.svg | 0 src/js/assets/{ => icons}/clock.svg | 0 src/js/assets/{ => icons}/clone.svg | 0 src/js/assets/{ => icons}/closed.svg | 0 src/js/assets/{ => icons}/confirmed.svg | 0 src/js/assets/{ => icons}/handle.svg | 0 src/js/assets/{ => icons}/invisible.svg | 0 src/js/assets/{ => icons}/loading-small.gif | Bin src/js/assets/{ => icons}/mail.svg | 0 src/js/assets/{ => icons}/maybe-vote.svg | 0 src/js/assets/{ => icons}/move.svg | 0 src/js/assets/{ => icons}/no-vote.svg | 0 src/js/assets/{ => icons}/open.svg | 0 src/js/assets/{ => icons}/polls.svg | 0 src/js/assets/{ => icons}/sidebar-toggle.svg | 0 src/js/assets/{ => icons}/unconfirmed.svg | 0 src/js/assets/{ => icons}/visible.svg | 0 src/js/assets/{ => icons}/yes-vote.svg | 0 src/js/assets/scss/colors.scss | 10 ++ src/js/assets/scss/experimental.scss | 44 +++++ src/js/assets/scss/icons.scss | 118 ++++++++++++ src/js/assets/scss/transitions.scss | 23 +++ src/js/assets/transitions.scss | 23 +++ 29 files changed, 381 insertions(+), 174 deletions(-) create mode 100644 src/js/assets/colors.scss create mode 100644 src/js/assets/experimental.scss create mode 100644 src/js/assets/icons.scss rename src/js/assets/{ => icons}/back.svg (100%) rename src/js/assets/{ => icons}/circles.svg (100%) rename src/js/assets/{ => icons}/clock.svg (100%) rename src/js/assets/{ => icons}/clone.svg (100%) rename src/js/assets/{ => icons}/closed.svg (100%) rename src/js/assets/{ => icons}/confirmed.svg (100%) rename src/js/assets/{ => icons}/handle.svg (100%) rename src/js/assets/{ => icons}/invisible.svg (100%) rename src/js/assets/{ => icons}/loading-small.gif (100%) rename src/js/assets/{ => icons}/mail.svg (100%) rename src/js/assets/{ => icons}/maybe-vote.svg (100%) rename src/js/assets/{ => icons}/move.svg (100%) rename src/js/assets/{ => icons}/no-vote.svg (100%) rename src/js/assets/{ => icons}/open.svg (100%) rename src/js/assets/{ => icons}/polls.svg (100%) rename src/js/assets/{ => icons}/sidebar-toggle.svg (100%) rename src/js/assets/{ => icons}/unconfirmed.svg (100%) rename src/js/assets/{ => icons}/visible.svg (100%) rename src/js/assets/{ => icons}/yes-vote.svg (100%) create mode 100644 src/js/assets/scss/colors.scss create mode 100644 src/js/assets/scss/experimental.scss create mode 100644 src/js/assets/scss/icons.scss create mode 100644 src/js/assets/scss/transitions.scss create mode 100644 src/js/assets/transitions.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index e95892635..469f87cfc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ All notable changes to this project will be documented in this file. - [enhancement] #1153 - Add share, if logged in user enters hidden poll via public link (#1169) - [enhancement] #204 - Circles integration (#1128) - [refactor] Remove deprecated app.php (#1162) + - [refactor] Separate assets See also: https://github.com/nextcloud/polls/milestone/28?closed=1 diff --git a/src/js/App.vue b/src/js/App.vue index 215fe8df3..b69e2c6ba 100644 --- a/src/js/App.vue +++ b/src/js/App.vue @@ -41,6 +41,10 @@ import { Content } from '@nextcloud/vue' import { subscribe, unsubscribe } from '@nextcloud/event-bus' import { mapState } from 'vuex' import '@nextcloud/dialogs/styles/toast.scss' +import './assets/scss/icons.scss' +import './assets/scss/colors.scss' +import './assets/scss/transitions.scss' +import './assets/scss/experimental.scss' export default { name: 'App', @@ -138,107 +142,6 @@ export default { diff --git a/src/js/assets/colors.scss b/src/js/assets/colors.scss new file mode 100644 index 000000000..73c8b305b --- /dev/null +++ b/src/js/assets/colors.scss @@ -0,0 +1,10 @@ +:root { + --color-background-error: #f9c5c5; + --color-background-success: #d6fdda; + --color-polls-foreground-yes: #49bc49; + --color-polls-foreground-no: #f45573; + --color-polls-foreground-maybe: #ffc107; + --color-polls-background-yes: #ebf5d6; + --color-polls-background-no: #ffede9; + --color-polls-background-maybe: #fcf7e1; +} diff --git a/src/js/assets/experimental.scss b/src/js/assets/experimental.scss new file mode 100644 index 000000000..d12c4e447 --- /dev/null +++ b/src/js/assets/experimental.scss @@ -0,0 +1,44 @@ +// experimental colored background in the main area + +[class*='area__'] { + padding: 8px; + background-color: var(--color-main-background); + border-radius: var(--border-radius); + margin: 12px 6px; + min-width: 320px; +} + +.experimental { + &.app-polls.bgcolored { + .app-navigation { + border-right: 0px; + box-shadow: 2px 0 6px var(--color-box-shadow); + } + .app-content { + background-color: var(--color-primary-light); + [class*='area__'] { + box-shadow: 2px 2px 6px var(--color-box-shadow); + margin: 12px; + } + } + } + + // experimental background image + &.app-polls.bgimage { + .glassy { + backdrop-filter: blur(10px); + background-color: rgba(255, 255, 255, 0.5); + } + .app-navigation { + border-right: 0px; + box-shadow: 2px 0 6px var(--color-box-shadow); + } + .app-content { + background-color: transparent; + } + [class*='area__'] { + box-shadow: 2px 2px 6px var(--color-box-shadow); + margin: 12px; + } + } +} diff --git a/src/js/assets/icons.scss b/src/js/assets/icons.scss new file mode 100644 index 000000000..41d9fcc42 --- /dev/null +++ b/src/js/assets/icons.scss @@ -0,0 +1,104 @@ +:root { + --polls-vote-rows: 1; + --polls-vote-columns: 1; + --color-background-error: #f9c5c5; + --color-background-success: #d6fdda; + --color-polls-foreground-yes: #49bc49; + --color-polls-foreground-no: #f45573; + --color-polls-foreground-maybe: #ffc107; + --color-polls-background-yes: #ebf5d6; + --color-polls-background-no: #ffede9; + --color-polls-background-maybe: #fcf7e1; + --icon-polls: url('../icons/polls.svg'); + --icon-circles: url('../icons/circles.svg'); + --icon-polls-back: url('../icons/back.svg'); + --icon-polls-confirmed: url('../icons/confirmed.svg'); + --icon-polls-unconfirmed: url('../icons/unconfirmed.svg'); + --icon-polls-clone: url('../icons/clone.svg'); + --icon-polls-move: url('../icons/move.svg'); + --icon-polls-yes: url('../icons/yes-vote.svg'); + --icon-polls-no: url('../icons/no-vote.svg'); + --icon-polls-maybe: url('../icons/maybe-vote.svg'); + --icon-polls-handle: url('../icons/handle.svg'); + --icon-polls-mail: url('../icons/mail.svg'); + --icon-polls-sidebar-toggle: url('../icons/sidebar-toggle.svg'); + --icon-polls-loading: url('../icons/loading-small.gif'); + --icon-polls-open: url('../icons/open.svg'); + --icon-polls-closed: url('../icons/closed.svg'); + --icon-polls-public-poll: url('../icons/visible.svg'); + --icon-polls-hidden-poll: url('../icons/invisible.svg'); + + // filters to colorize background svg from black + // generated with https://codepen.io/jsm91/embed/ZEEawyZ?height=600&default-tab=result&embed-version=2 + --color-polls-foreground-filter-yes: invert(74%) sepia(7%) saturate(3830%) hue-rotate(68deg) brightness(85%) contrast(85%); + --color-polls-foreground-filter-no: invert(43%) sepia(100%) saturate(1579%) hue-rotate(318deg) brightness(99%) contrast(94%); + --color-polls-foreground-filter-maybe: invert(81%) sepia(22%) saturate(3383%) hue-rotate(353deg) brightness(101%) contrast(101%); +} + +.icon-polls { + background-image: var(--icon-polls); +} + +.icon-circles { + background-image: var(--icon-circles); +} + +.icon-polls-back { + background-image: var(--icon-polls-back); +} + +.icon-polls-confirmed { + background-image: var(--icon-polls-confirmed); +} + +.icon-polls-unconfirmed { + background-image: var(--icon-polls-unconfirmed); +} + +.icon-polls-move { + background-image: var(--icon-polls-move); +} + +.icon-polls-clone { + background-image: var(--icon-polls-clone); +} + +.icon-polls-yes { + background-image: var(--icon-polls-yes); +} + +.icon-polls-no { + background-image: var(--icon-polls-no); +} + +.icon-polls-maybe { + background-image: var(--icon-polls-maybe); +} + +.icon-polls-mail { + background-image: var(--icon-polls-mail); +} + +.icon-polls-open { + background-image: var(--icon-polls-open); +} + +.icon-polls-closed { + background-image: var(--icon-polls-closed); +} + +.icon-polls-public-poll { + background-image: var(--icon-polls-public-poll); +} + +.icon-polls-hidden-poll { + background-image: var(--icon-polls-hidden-poll); +} + +.icon-polls-sidebar-toggle { + background-image: var(--icon-polls-sidebar-toggle); +} + +.icon-handle { + background-image: var(--icon-polls-handle); +} diff --git a/src/js/assets/back.svg b/src/js/assets/icons/back.svg similarity index 100% rename from src/js/assets/back.svg rename to src/js/assets/icons/back.svg diff --git a/src/js/assets/circles.svg b/src/js/assets/icons/circles.svg similarity index 100% rename from src/js/assets/circles.svg rename to src/js/assets/icons/circles.svg diff --git a/src/js/assets/clock.svg b/src/js/assets/icons/clock.svg similarity index 100% rename from src/js/assets/clock.svg rename to src/js/assets/icons/clock.svg diff --git a/src/js/assets/clone.svg b/src/js/assets/icons/clone.svg similarity index 100% rename from src/js/assets/clone.svg rename to src/js/assets/icons/clone.svg diff --git a/src/js/assets/closed.svg b/src/js/assets/icons/closed.svg similarity index 100% rename from src/js/assets/closed.svg rename to src/js/assets/icons/closed.svg diff --git a/src/js/assets/confirmed.svg b/src/js/assets/icons/confirmed.svg similarity index 100% rename from src/js/assets/confirmed.svg rename to src/js/assets/icons/confirmed.svg diff --git a/src/js/assets/handle.svg b/src/js/assets/icons/handle.svg similarity index 100% rename from src/js/assets/handle.svg rename to src/js/assets/icons/handle.svg diff --git a/src/js/assets/invisible.svg b/src/js/assets/icons/invisible.svg similarity index 100% rename from src/js/assets/invisible.svg rename to src/js/assets/icons/invisible.svg diff --git a/src/js/assets/loading-small.gif b/src/js/assets/icons/loading-small.gif similarity index 100% rename from src/js/assets/loading-small.gif rename to src/js/assets/icons/loading-small.gif diff --git a/src/js/assets/mail.svg b/src/js/assets/icons/mail.svg similarity index 100% rename from src/js/assets/mail.svg rename to src/js/assets/icons/mail.svg diff --git a/src/js/assets/maybe-vote.svg b/src/js/assets/icons/maybe-vote.svg similarity index 100% rename from src/js/assets/maybe-vote.svg rename to src/js/assets/icons/maybe-vote.svg diff --git a/src/js/assets/move.svg b/src/js/assets/icons/move.svg similarity index 100% rename from src/js/assets/move.svg rename to src/js/assets/icons/move.svg diff --git a/src/js/assets/no-vote.svg b/src/js/assets/icons/no-vote.svg similarity index 100% rename from src/js/assets/no-vote.svg rename to src/js/assets/icons/no-vote.svg diff --git a/src/js/assets/open.svg b/src/js/assets/icons/open.svg similarity index 100% rename from src/js/assets/open.svg rename to src/js/assets/icons/open.svg diff --git a/src/js/assets/polls.svg b/src/js/assets/icons/polls.svg similarity index 100% rename from src/js/assets/polls.svg rename to src/js/assets/icons/polls.svg diff --git a/src/js/assets/sidebar-toggle.svg b/src/js/assets/icons/sidebar-toggle.svg similarity index 100% rename from src/js/assets/sidebar-toggle.svg rename to src/js/assets/icons/sidebar-toggle.svg diff --git a/src/js/assets/unconfirmed.svg b/src/js/assets/icons/unconfirmed.svg similarity index 100% rename from src/js/assets/unconfirmed.svg rename to src/js/assets/icons/unconfirmed.svg diff --git a/src/js/assets/visible.svg b/src/js/assets/icons/visible.svg similarity index 100% rename from src/js/assets/visible.svg rename to src/js/assets/icons/visible.svg diff --git a/src/js/assets/yes-vote.svg b/src/js/assets/icons/yes-vote.svg similarity index 100% rename from src/js/assets/yes-vote.svg rename to src/js/assets/icons/yes-vote.svg diff --git a/src/js/assets/scss/colors.scss b/src/js/assets/scss/colors.scss new file mode 100644 index 000000000..73c8b305b --- /dev/null +++ b/src/js/assets/scss/colors.scss @@ -0,0 +1,10 @@ +:root { + --color-background-error: #f9c5c5; + --color-background-success: #d6fdda; + --color-polls-foreground-yes: #49bc49; + --color-polls-foreground-no: #f45573; + --color-polls-foreground-maybe: #ffc107; + --color-polls-background-yes: #ebf5d6; + --color-polls-background-no: #ffede9; + --color-polls-background-maybe: #fcf7e1; +} diff --git a/src/js/assets/scss/experimental.scss b/src/js/assets/scss/experimental.scss new file mode 100644 index 000000000..d12c4e447 --- /dev/null +++ b/src/js/assets/scss/experimental.scss @@ -0,0 +1,44 @@ +// experimental colored background in the main area + +[class*='area__'] { + padding: 8px; + background-color: var(--color-main-background); + border-radius: var(--border-radius); + margin: 12px 6px; + min-width: 320px; +} + +.experimental { + &.app-polls.bgcolored { + .app-navigation { + border-right: 0px; + box-shadow: 2px 0 6px var(--color-box-shadow); + } + .app-content { + background-color: var(--color-primary-light); + [class*='area__'] { + box-shadow: 2px 2px 6px var(--color-box-shadow); + margin: 12px; + } + } + } + + // experimental background image + &.app-polls.bgimage { + .glassy { + backdrop-filter: blur(10px); + background-color: rgba(255, 255, 255, 0.5); + } + .app-navigation { + border-right: 0px; + box-shadow: 2px 0 6px var(--color-box-shadow); + } + .app-content { + background-color: transparent; + } + [class*='area__'] { + box-shadow: 2px 2px 6px var(--color-box-shadow); + margin: 12px; + } + } +} diff --git a/src/js/assets/scss/icons.scss b/src/js/assets/scss/icons.scss new file mode 100644 index 000000000..67fe0eae1 --- /dev/null +++ b/src/js/assets/scss/icons.scss @@ -0,0 +1,118 @@ +:root { + --polls-vote-rows: 1; + --polls-vote-columns: 1; + --color-background-error: #f9c5c5; + --color-background-success: #d6fdda; + --color-polls-foreground-yes: #49bc49; + --color-polls-foreground-no: #f45573; + --color-polls-foreground-maybe: #ffc107; + --color-polls-background-yes: #ebf5d6; + --color-polls-background-no: #ffede9; + --color-polls-background-maybe: #fcf7e1; + --icon-polls: url('../icons/polls.svg'); + --icon-circles: url('../icons/circles.svg'); + --icon-polls-back: url('../icons/back.svg'); + --icon-polls-confirmed: url('../icons/confirmed.svg'); + --icon-polls-unconfirmed: url('../icons/unconfirmed.svg'); + --icon-polls-clone: url('../icons/clone.svg'); + --icon-polls-move: url('../icons/move.svg'); + --icon-polls-yes: url('../icons/yes-vote.svg'); + --icon-polls-no: url('../icons/no-vote.svg'); + --icon-polls-maybe: url('../icons/maybe-vote.svg'); + --icon-polls-handle: url('../icons/handle.svg'); + --icon-polls-mail: url('../icons/mail.svg'); + --icon-polls-sidebar-toggle: url('../icons/sidebar-toggle.svg'); + --icon-polls-loading: url('../icons/loading-small.gif'); + --icon-polls-open: url('../icons/open.svg'); + --icon-polls-closed: url('../icons/closed.svg'); + --icon-polls-public-poll: url('../icons/visible.svg'); + --icon-polls-hidden-poll: url('../icons/invisible.svg'); + + // filters to colorize background svg from black + // generated with https://codepen.io/jsm91/embed/ZEEawyZ?height=600&default-tab=result&embed-version=2 + --color-polls-foreground-filter-yes: invert(74%) sepia(7%) saturate(3830%) hue-rotate(68deg) brightness(85%) contrast(85%); + --color-polls-foreground-filter-no: invert(43%) sepia(100%) saturate(1579%) hue-rotate(318deg) brightness(99%) contrast(94%); + --color-polls-foreground-filter-maybe: invert(81%) sepia(22%) saturate(3383%) hue-rotate(353deg) brightness(101%) contrast(101%); +} + +.icon-polls { + background-image: var(--icon-polls); +} + +.icon-circles { + background-image: var(--icon-circles); +} + +.icon-polls-back { + background-image: var(--icon-polls-back); +} + +.icon-polls-confirmed { + background-image: var(--icon-polls-confirmed); +} + +.icon-polls-unconfirmed { + background-image: var(--icon-polls-unconfirmed); +} + +.icon-polls-move { + background-image: var(--icon-polls-move); +} + +.icon-polls-clone { + background-image: var(--icon-polls-clone); +} + +.icon-polls-yes { + background-image: var(--icon-polls-yes); +} + +.icon-polls-no { + background-image: var(--icon-polls-no); +} + +.icon-polls-maybe { + background-image: var(--icon-polls-maybe); +} + +.icon-polls-mail { + background-image: var(--icon-polls-mail); +} + +.icon-polls-open { + background-image: var(--icon-polls-open); +} + +.icon-polls-closed { + background-image: var(--icon-polls-closed); +} + +.icon-polls-public-poll { + background-image: var(--icon-polls-public-poll); +} + +.icon-polls-hidden-poll { + background-image: var(--icon-polls-hidden-poll); +} + +.icon-polls-sidebar-toggle { + background-image: var(--icon-polls-sidebar-toggle); +} + +.title { + margin: 8px 0; +} + +.description { + white-space: pre-wrap; + margin: 8px 0; +} + +.linkified { + font-weight: bold; + text-decoration: underline; +} + +.icon-handle { + background-image: var(--icon-polls-handle); +} diff --git a/src/js/assets/scss/transitions.scss b/src/js/assets/scss/transitions.scss new file mode 100644 index 000000000..78b18767a --- /dev/null +++ b/src/js/assets/scss/transitions.scss @@ -0,0 +1,23 @@ +.transitions-active { + .list-enter-active, + .list-leave-active { + transition: all 0.5s ease; + } + + .list-enter, + .list-leave-to { + opacity: 0; + } + + .list-move { + transition: transform 0.5s; + } + + .fade-leave-active .fade-enter-active{ + transition: opacity 0.5s; + } + + .fade-enter, .fade-leave-to { + opacity: 0; + } +} diff --git a/src/js/assets/transitions.scss b/src/js/assets/transitions.scss new file mode 100644 index 000000000..78b18767a --- /dev/null +++ b/src/js/assets/transitions.scss @@ -0,0 +1,23 @@ +.transitions-active { + .list-enter-active, + .list-leave-active { + transition: all 0.5s ease; + } + + .list-enter, + .list-leave-to { + opacity: 0; + } + + .list-move { + transition: transform 0.5s; + } + + .fade-leave-active .fade-enter-active{ + transition: opacity 0.5s; + } + + .fade-enter, .fade-leave-to { + opacity: 0; + } +}