mirrors
/
sakura
mirror of https://github.com/mashirozx/sakura.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Change composer display

next
mashirozx 2021-08-08 10:57:15 +08:00
parent 14f56dab39
commit c0daba0090
6 changed files with 126 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/functions.php
View File

@ -5,7 +5,7 @@
define('SAKURA_VERSION', wp_get_theme()->get('Version'));
define('SAKURA_TEXT_DOMAIN', wp_get_theme()->get('TextDomain'));
define('SAKURA_DEVEPLOMENT', false);
define('SAKURA_DEVEPLOMENT', true);
define('SAKURA_DEVEPLOMENT_HOST', 'http://127.0.0.1:9000');
// PHP loaders

13
src/components/content/components/comment/Comment.vue
View File

@ -160,7 +160,9 @@ export default defineComponent({
.createComment({ authorEmail, authorName, authorUrl, content, parent, post })
.then((res) => {
const _commentData = cloneDeep(commentData.value) as Comment[]
_commentData.push(camelcaseKeys(res.data))
const response = camelcaseKeys(res.data)
response['noDisplayDelay'] = true
_commentData.push(response)
setCommentData(_commentData)
setTotalCount(totalCount.value + 1)
// console.log(res.data, commentData.value)
@ -326,17 +328,16 @@ export default defineComponent({
width: 100%;
}
.error__wrapper {
padding-top: 12px;
width: 100%;
}
.pagination__wrapper {
padding-top: 12px;
align-self: center;
}
.composer__wrapper {
width: 100%;
}
.comment-list__title {
padding-top: 0;
width: 100%;
margin: 0 auto;
color: #7d7d7d;
@ -354,14 +355,14 @@ export default defineComponent({
// }
}
}
// .comment-list__wrapper {
// }
.comment-list__wrapper {
padding: 0;
}
.updating-status__wrapper {
width: 100%;
padding: 0;
.content__wrapper {
width: 100%;
padding-bottom: 12px;
.content {
width: calc(100% - 24px);
padding: 12px;

40
src/components/content/components/comment/CommentList.vue
View File

@ -1,7 +1,12 @@
<template>
<div class="comment-list__container">
<transition-group name="comment-list" tag="div">
<div class="item__wrapper" v-for="(item, index) in $props.data" :key="index + item.id">
<div
class="item__wrapper"
v-for="(item, index) in $props.data"
:key="index + item.id"
:style="{ '--animation-timeout': `${1 + (item.noDisplayDelay ? 0 : index) * 0.2}s` }"
>
<CommentListItem :data="item"></CommentListItem>
</div>
</transition-group>
@ -19,23 +24,26 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
.comment-list {
&-enter-active {
animation: lightSpeedInLeft /* animate.css */ 1s ease-in;
.comment-list__container {
.comment-list {
&-enter-active {
animation: lightSpeedInLeft /* animate.css */ var(--animation-timeout) ease-in;
}
// &-leave-active {
// position: absolute;
// transform-origin: center center;
// animation: lightSpeedOutRight /* animate.css */ 1s ease-in;
// }
&-move {
transition: transform 0.3s ease;
transition-delay: 0.3s;
}
}
// &-leave-active {
// position: absolute;
// transform-origin: center center;
// animation: lightSpeedOutRight /* animate.css */ 1s ease-in;
// }
&-move {
transition: transform 0.3s ease;
transition-delay: 0.3s;
}
}
.item__wrapper {
&:not(:first-child) {
.item__wrapper {
padding-top: 12px;
&:last-child {
padding-bottom: 12px;
}
}
}
</style>

109
src/components/content/components/comment/Composer.vue
View File

@ -40,41 +40,68 @@
<div class="row__wrapper--privacy">
<Toggler :show="shouldShowPrivacyOptions">
<div class="options__wrapper">
<div class="option visibility">
<span>
<i class="fas fa-lock"></i>
{{ messages.privacy.visibility.title }}
</span>
<div class="option visibility" v-tippy="{ content: messages.privacy.visibility.title }">
<Switcher
v-model:checked="privacyIsPrivate"
positiveLabel=""
negativeLabel=""
></Switcher>
:disableRipple="true"
>
<template #label-positive>
<span>
<i class="fas fa-lock"></i>
{{ messages.privacy.visibility.positive }}
</span>
</template>
<template #label-negative>
<span>
<i class="fas fa-unlock"></i>
{{ messages.privacy.visibility.negative }}
</span>
</template>
</Switcher>
</div>
<!-- <i class="fas fa-unlock"></i> -->
<!-- <i class="fas fa-globe"></i> -->
<div class="option anynomous">
<span>
<i class="fas fa-user-secret"></i>
{{ messages.privacy.anynomous.title }}
</span>
<div class="option anynomous" v-tippy="{ content: messages.privacy.anynomous.title }">
<Switcher
v-model:checked="privacyIsAnynomous"
positiveLabel=""
negativeLabel=""
></Switcher>
:disableRipple="true"
>
<template #label-positive>
<span>
<i class="fas fa-user-secret"></i>
{{ messages.privacy.anynomous.positive }}
</span>
</template>
<template #label-negative>
<span>
<i class="fas fa-user-tie"></i>
{{ messages.privacy.anynomous.negative }}
</span>
</template>
</Switcher>
</div>
<!-- <i class="fas fa-theater-masks"></i> -->
<div class="option inform">
<span>
<i class="fas fa-envelope"></i>
{{ messages.privacy.email.title }}
</span>
<div class="option inform" v-tippy="{ content: messages.privacy.email.title }">
<Switcher
v-model:checked="privacyShouldInform"
positiveLabel=""
negativeLabel=""
></Switcher>
:disableRipple="true"
>
<template #label-positive>
<span>
<i class="fas fa-bell"></i>
{{ messages.privacy.email.positive }}
</span>
</template>
<template #label-negative>
<span>
<i class="fas fa-bell-slash"></i>
{{ messages.privacy.email.negative }}
</span>
</template>
</Switcher>
</div>
</div>
</Toggler>
@ -198,19 +225,44 @@ export default defineComponent({
anynomous: {
title: intl.formatMessage({
id: 'posts.comment.composer.privacy.anynomous.title',
defaultMessage: 'Comment as anynomous user',
defaultMessage: 'Whether to comment as an anynomous user?',
}),
positive: intl.formatMessage({
id: 'posts.comment.composer.privacy.anynomous.positive',
defaultMessage: 'Anynomous',
}),
negative: intl.formatMessage({
id: 'posts.comment.composer.privacy.anynomous.negative',
defaultMessage: 'Autonym',
}),
},
visibility: {
title: intl.formatMessage({
id: 'posts.comment.composer.privacy.visibility.title',
defaultMessage: 'Secret comment (only admins and peoples mentioned can see)',
defaultMessage:
'Whether to create secret comment that only admins and peoples mentioned can see?',
}),
positive: intl.formatMessage({
id: 'posts.comment.composer.privacy.anynomous.positive',
defaultMessage: 'Secret',
}),
negative: intl.formatMessage({
id: 'posts.comment.composer.privacy.anynomous.negative',
defaultMessage: 'Public',
}),
},
email: {
title: intl.formatMessage({
id: 'posts.comment.composer.privacy.email.title',
defaultMessage: 'Inform me with email when receive reply',
defaultMessage: 'Whether to inform you with email when receiving reply?',
}),
positive: intl.formatMessage({
id: 'posts.comment.composer.privacy.email.positive',
defaultMessage: 'Subscribe',
}),
negative: intl.formatMessage({
id: 'posts.comment.composer.privacy.email.negative',
defaultMessage: 'Unsubscribe',
}),
},
},
@ -363,9 +415,18 @@ export default defineComponent({
}
}
&--privacy {
padding-top: 0;
width: 100%;
.options__wrapper {
width: 100%;
padding-top: 12px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: 6px;
.option {
--flex-flow: row-reverse nowrap;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;

12
src/components/switcher/Switcher.vue
View File

@ -13,7 +13,7 @@
<div class="mdc-switch__shadow">
<div class="mdc-elevation-overlay"></div>
</div>
<div class="mdc-switch__ripple"></div>
<div v-show="!$props.disableRipple" class="mdc-switch__ripple"></div>
<div class="mdc-switch__icons">
<svg class="mdc-switch__icon mdc-switch__icon--on" viewBox="0 0 24 24">
<path d="M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z" />
@ -27,6 +27,9 @@
</button>
<label class="label" :for="`switch-${id}`">
{{ checked ? $props.positiveLabel : $props.negativeLabel }}
<slot name="label"></slot>
<slot name="label-positive" v-if="checked"></slot>
<slot name="label-negative" v-else></slot>
</label>
</div>
</template>
@ -43,6 +46,7 @@ export default defineComponent({
negativeLabel: { type: String, default: 'current off' },
checked: { type: Boolean, default: true },
disabled: { type: Boolean, default: false },
disableRipple: { type: Boolean, default: false },
},
emits: ['update:checked'],
setup(props, { emit }) {
@ -93,13 +97,15 @@ export default defineComponent({
<style lang="scss" scoped>
@use './theme';
@use '@/styles/mixins/polyfills';
.switcher__container {
@include theme.variables;
height: 56px;
display: flex;
flex-direction: row;
flex-flow: var(--flex-flow, row nowrap);
justify-content: flex-start;
align-items: center;
@include polyfills.flex-gap(6px, 'row nowrap');
&.disabled {
cursor: not-allowed;
.label {
@ -108,7 +114,7 @@ export default defineComponent({
}
.label {
user-select: none;
padding-left: 10px;
// padding-left: 10px;
}
}
</style>

2
src/layouts/components/header/NavDrawer.vue
View File

@ -101,8 +101,6 @@ export default defineComponent({
`${collapseContent.scrollHeight}px`
)
}
} else {
console.log('open')
}
}