diff options
Diffstat (limited to 'src/client')
11 files changed, 55 insertions, 113 deletions
diff --git a/src/client/app/common/views/components/cw-button.vue b/src/client/app/common/views/components/cw-button.vue new file mode 100644 index 0000000000..06087edc93 --- /dev/null +++ b/src/client/app/common/views/components/cw-button.vue @@ -0,0 +1,44 @@ +<template> +<button class="nrvgflfuaxwgkxoynpnumyookecqrrvh" @click="toggle">{{ value ? '%i18n:@hide%' : '%i18n:@show%' }}</button> +</template> + +<script lang="ts"> +import Vue from 'vue'; + +export default Vue.extend({ + props: { + value: { + type: Boolean, + required: true + } + }, + + methods: { + toggle() { + this.$emit('input', !this.value); + } + } +}); +</script> + +<style lang="stylus" scoped> +root(isDark) + display inline-block + padding 4px 8px + font-size 0.7em + color isDark ? #393f4f : #fff + background isDark ? #687390 : #b1b9c1 + border-radius 2px + cursor pointer + user-select none + + &:hover + background isDark ? #707b97 : #bbc4ce + +.nrvgflfuaxwgkxoynpnumyookecqrrvh[data-darkmode] + root(true) + +.nrvgflfuaxwgkxoynpnumyookecqrrvh:not([data-darkmode]) + root(false) + +</style> diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts index 75c6086d7c..6f8152cea2 100644 --- a/src/client/app/common/views/components/index.ts +++ b/src/client/app/common/views/components/index.ts @@ -1,5 +1,6 @@ import Vue from 'vue'; +import cwButton from './cw-button.vue'; import tagCloud from './tag-cloud.vue'; import trends from './trends.vue'; import analogClock from './analog-clock.vue'; @@ -42,6 +43,7 @@ import uiSelect from './ui/select.vue'; import formButton from './ui/form/button.vue'; import formRadio from './ui/form/radio.vue'; +Vue.component('mk-cw-button', cwButton); Vue.component('mk-tag-cloud', tagCloud); Vue.component('mk-trends', trends); Vue.component('mk-analog-clock', analogClock); diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue index a0ad089f92..7307eeb7dc 100644 --- a/src/client/app/desktop/views/components/note-detail.vue +++ b/src/client/app/desktop/views/components/note-detail.vue @@ -39,7 +39,7 @@ <div class="body"> <p v-if="p.cw != null" class="cw"> <span class="text" v-if="p.cw != ''">{{ p.cw }}</span> - <span class="toggle" @click="showContent = !showContent">{{ showContent ? '%i18n:@hide%' : '%i18n:@see-more%' }}</span> + <mk-cw-button v-model="showContent"/> </p> <div class="content" v-show="p.cw == null || showContent"> <div class="text"> @@ -352,19 +352,6 @@ root(isDark) > .text margin-right 8px - > .toggle - display inline-block - padding 4px 8px - font-size 0.7em - color isDark ? #393f4f : #fff - background isDark ? #687390 : #b1b9c1 - border-radius 2px - cursor pointer - user-select none - - &:hover - background isDark ? #707b97 : #bbc4ce - > .content > .text cursor default diff --git a/src/client/app/desktop/views/components/note-preview.vue b/src/client/app/desktop/views/components/note-preview.vue index e7e878849b..6c84165356 100644 --- a/src/client/app/desktop/views/components/note-preview.vue +++ b/src/client/app/desktop/views/components/note-preview.vue @@ -6,7 +6,7 @@ <div class="body"> <p v-if="note.cw != null" class="cw"> <span class="text" v-if="note.cw != ''">{{ note.cw }}</span> - <span class="toggle" @click="showContent = !showContent">{{ showContent ? '%i18n:@hide%' : '%i18n:@see-more%' }}</span> + <mk-cw-button v-model="showContent"/> </p> <div class="content" v-show="note.cw == null || showContent"> <mk-sub-note-content class="text" :note="note"/> @@ -76,19 +76,6 @@ root(isDark) > .text margin-right 8px - > .toggle - display inline-block - padding 4px 8px - font-size 0.7em - color isDark ? #393f4f : #fff - background isDark ? #687390 : #b1b9c1 - border-radius 2px - cursor pointer - user-select none - - &:hover - background isDark ? #707b97 : #bbc4ce - > .content > .text cursor default diff --git a/src/client/app/desktop/views/components/notes.note.sub.vue b/src/client/app/desktop/views/components/notes.note.sub.vue index 15944bebd1..8f01ddd43c 100644 --- a/src/client/app/desktop/views/components/notes.note.sub.vue +++ b/src/client/app/desktop/views/components/notes.note.sub.vue @@ -6,7 +6,7 @@ <div class="body"> <p v-if="note.cw != null" class="cw"> <span class="text" v-if="note.cw != ''">{{ note.cw }}</span> - <span class="toggle" @click="showContent = !showContent">{{ showContent ? '%i18n:@hide%' : '%i18n:@see-more%' }}</span> + <mk-cw-button v-model="showContent"/> </p> <div class="content" v-show="note.cw == null || showContent"> <mk-sub-note-content class="text" :note="note"/> @@ -77,19 +77,6 @@ root(isDark) > .text margin-right 8px - > .toggle - display inline-block - padding 4px 8px - font-size 0.7em - color isDark ? #393f4f : #fff - background isDark ? #687390 : #b1b9c1 - border-radius 2px - cursor pointer - user-select none - - &:hover - background isDark ? #707b97 : #bbc4ce - > .content > .text cursor default diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue index e1bc8be5a5..46a866f9a7 100644 --- a/src/client/app/desktop/views/components/notes.note.vue +++ b/src/client/app/desktop/views/components/notes.note.vue @@ -18,7 +18,7 @@ <div class="body"> <p v-if="p.cw != null" class="cw"> <span class="text" v-if="p.cw != ''">{{ p.cw }}</span> - <span class="toggle" @click="showContent = !showContent">{{ showContent ? '%i18n:@hide%' : '%i18n:@see-more%' }}</span> + <mk-cw-button v-model="showContent"/> </p> <div class="content" v-show="p.cw == null || showContent"> <div class="text"> @@ -401,19 +401,6 @@ root(isDark) > .text margin-right 8px - > .toggle - display inline-block - padding 4px 8px - font-size 0.7em - color isDark ? #393f4f : #fff - background isDark ? #687390 : #b1b9c1 - border-radius 2px - cursor pointer - user-select none - - &:hover - background isDark ? #707b97 : #bbc4ce - > .content > .text diff --git a/src/client/app/desktop/views/pages/deck/deck.note.vue b/src/client/app/desktop/views/pages/deck/deck.note.vue index ec4b9182b7..980fb03136 100644 --- a/src/client/app/desktop/views/pages/deck/deck.note.vue +++ b/src/client/app/desktop/views/pages/deck/deck.note.vue @@ -18,7 +18,7 @@ <div class="body"> <p v-if="p.cw != null" class="cw"> <span class="text" v-if="p.cw != ''">{{ p.cw }}</span> - <span class="toggle" @click="showContent = !showContent">{{ showContent ? '%i18n:@less%' : '%i18n:@more%' }}</span> + <mk-cw-button v-model="showContent"/> </p> <div class="content" v-show="p.cw == null || showContent"> <div class="text"> diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue index 752e44fd60..68be9f8ac4 100644 --- a/src/client/app/mobile/views/components/note-detail.vue +++ b/src/client/app/mobile/views/components/note-detail.vue @@ -37,7 +37,7 @@ <div class="body"> <p v-if="p.cw != null" class="cw"> <span class="text" v-if="p.cw != ''">{{ p.cw }}</span> - <span class="toggle" @click="showContent = !showContent">{{ showContent ? '%i18n:@hide%' : '%i18n:@see-more%' }}</span> + <mk-cw-button v-model="showContent"/> </p> <div class="content" v-show="p.cw == null || showContent"> <div class="text"> @@ -352,19 +352,6 @@ root(isDark) > .text margin-right 8px - > .toggle - display inline-block - padding 4px 8px - font-size 0.7em - color isDark ? #393f4f : #fff - background isDark ? #687390 : #b1b9c1 - border-radius 2px - cursor pointer - user-select none - - &:hover - background isDark ? #707b97 : #bbc4ce - > .content > .text diff --git a/src/client/app/mobile/views/components/note-preview.vue b/src/client/app/mobile/views/components/note-preview.vue index a85434407f..4c03593a9e 100644 --- a/src/client/app/mobile/views/components/note-preview.vue +++ b/src/client/app/mobile/views/components/note-preview.vue @@ -6,7 +6,7 @@ <div class="body"> <p v-if="note.cw != null" class="cw"> <span class="text" v-if="note.cw != ''">{{ note.cw }}</span> - <span class="toggle" @click="showContent = !showContent">{{ showContent ? '%i18n:@hide%' : '%i18n:@see-more%' }}</span> + <mk-cw-button v-model="showContent"/> </p> <div class="content" v-show="note.cw == null || showContent"> <mk-sub-note-content class="text" :note="note"/> @@ -93,19 +93,6 @@ root(isDark) > .text margin-right 8px - > .toggle - display inline-block - padding 4px 8px - font-size 0.7em - color isDark ? #393f4f : #fff - background isDark ? #687390 : #b1b9c1 - border-radius 2px - cursor pointer - user-select none - - &:hover - background isDark ? #707b97 : #bbc4ce - > .content > .text cursor default diff --git a/src/client/app/mobile/views/components/note.sub.vue b/src/client/app/mobile/views/components/note.sub.vue index 77527a1498..c25f827dad 100644 --- a/src/client/app/mobile/views/components/note.sub.vue +++ b/src/client/app/mobile/views/components/note.sub.vue @@ -6,7 +6,7 @@ <div class="body"> <p v-if="note.cw != null" class="cw"> <span class="text" v-if="note.cw != ''">{{ note.cw }}</span> - <span class="toggle" @click="showContent = !showContent">{{ showContent ? '%i18n:@hide%' : '%i18n:@see-more%' }}</span> + <mk-cw-button v-model="showContent"/> </p> <div class="content" v-show="note.cw == null || showContent"> <mk-sub-note-content class="text" :note="note"/> @@ -100,19 +100,6 @@ root(isDark) > .text margin-right 8px - > .toggle - display inline-block - padding 4px 8px - font-size 0.7em - color isDark ? #393f4f : #fff - background isDark ? #687390 : #b1b9c1 - border-radius 2px - cursor pointer - user-select none - - &:hover - background isDark ? #707b97 : #bbc4ce - > .content > .text margin 0 diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue index c608451e51..8787b39a93 100644 --- a/src/client/app/mobile/views/components/note.vue +++ b/src/client/app/mobile/views/components/note.vue @@ -18,7 +18,7 @@ <div class="body"> <p v-if="p.cw != null" class="cw"> <span class="text" v-if="p.cw != ''">{{ p.cw }}</span> - <span class="toggle" @click="showContent = !showContent">{{ showContent ? '%i18n:@less%' : '%i18n:@more%' }}</span> + <mk-cw-button v-model="showContent"/> </p> <div class="content" v-show="p.cw == null || showContent"> <div class="text"> @@ -350,19 +350,6 @@ root(isDark) > .text margin-right 8px - > .toggle - display inline-block - padding 4px 8px - font-size 0.7em - color isDark ? #393f4f : #fff - background isDark ? #687390 : #b1b9c1 - border-radius 2px - cursor pointer - user-select none - - &:hover - background isDark ? #707b97 : #bbc4ce - > .content > .text |