kopia lustrzana https://github.com/nextcloud/social
Use more appropriate icon for visibility
Signed-off-by: Louis Chemineau <louis@chmn.me>pull/1715/head
Louis Chemineau
rodzic
eac9f58f41
commit
eb624f17b7
|
|
@ -1,102 +0,0 @@
|
|||
<!--
|
||||
- @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
|
||||
- @copyright Copyright (c) 2022 Carl Schwan <carl@carlschwan.eu>
|
||||
-
|
||||
- @author Julius Härtl <jus@bitgrid.net>
|
||||
-
|
||||
- @license GNU AGPL version 3 or any later version
|
||||
-
|
||||
- This program is free software: you can redistribute it and/or modify
|
||||
- it under the terms of the GNU Affero General Public License as
|
||||
- published by the Free Software Foundation, either version 3 of the
|
||||
- License, or (at your option) any later version.
|
||||
-
|
||||
- This program is distributed in the hope that it will be useful,
|
||||
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
- GNU Affero General Public License for more details.
|
||||
-
|
||||
- You should have received a copy of the GNU Affero General Public License
|
||||
- along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
-
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div v-click-outside="hidePopoverMenu" class="popovermenu-parent">
|
||||
<NcButton :title="t('social', 'Change visibility')"
|
||||
type="tertiary"
|
||||
:class="currentVisibilityIconClass"
|
||||
@click.prevent="togglePopoverMenu" />
|
||||
<div :class="{open: menuOpened}" class="popovermenu">
|
||||
<NcPopoverMenu :menu="visibilityPopover" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
|
||||
import NcPopoverMenu from '@nextcloud/vue/dist/Components/NcPopoverMenu.js'
|
||||
import visibilitiesInfo from '../VisibilitiesInfos.js'
|
||||
import { translate } from '@nextcloud/l10n'
|
||||
|
||||
export default {
|
||||
name: 'VisibilitySelect',
|
||||
components: {
|
||||
NcPopoverMenu,
|
||||
NcButton,
|
||||
},
|
||||
props: {
|
||||
visibility: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
menuOpened: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
/** @return {string} */
|
||||
currentVisibilityIconClass() {
|
||||
return visibilitiesInfo.find(({ id }) => this.visibility === id).icon
|
||||
},
|
||||
|
||||
/** @return {object[]} */
|
||||
visibilityPopover() {
|
||||
return visibilitiesInfo.map(visibilityInfo => {
|
||||
return {
|
||||
...visibilityInfo,
|
||||
action: () => this.switchType(visibilityInfo.id),
|
||||
active: this.visibility === visibilityInfo.id,
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
togglePopoverMenu() {
|
||||
this.menuOpened = !this.menuOpened
|
||||
},
|
||||
|
||||
hidePopoverMenu() {
|
||||
this.menuOpened = false
|
||||
},
|
||||
|
||||
switchType(visibility) {
|
||||
this.$emit('update:visibility', visibility)
|
||||
this.menuOpened = false
|
||||
localStorage.setItem('social.lastPostType', visibility)
|
||||
},
|
||||
|
||||
t: translate,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.popovermenu-parent {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.popovermenu {
|
||||
top: 55px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -14,10 +14,10 @@
|
|||
</span>
|
||||
</router-link>
|
||||
</div>
|
||||
<div v-if="visibility"
|
||||
<VisibilityIcon v-if="visibility"
|
||||
:title="visibility.text"
|
||||
class="post-visibility"
|
||||
:class="{ [visibility.icon]: true }"
|
||||
:title="visibility.text" />
|
||||
:visibility="visibility.id" />
|
||||
<a :data-timestamp="timestamp"
|
||||
class="post-timestamp live-relative-timestamp"
|
||||
:title="formattedDate"
|
||||
|
|
@ -105,7 +105,8 @@ import HeartOutline from 'vue-material-design-icons/HeartOutline.vue'
|
|||
import logger from '../services/logger.js'
|
||||
import moment from '@nextcloud/moment'
|
||||
import MessageContent from './MessageContent.js'
|
||||
import visibilitiesInfo from './VisibilitiesInfos.js'
|
||||
import visibilitiesInfo from './Visibility/VisibilitiesInfos.js'
|
||||
import VisibilityIcon from './Visibility/VisibilityIcon.vue'
|
||||
|
||||
export default {
|
||||
name: 'TimelinePost',
|
||||
|
|
@ -119,6 +120,7 @@ export default {
|
|||
Heart,
|
||||
HeartOutline,
|
||||
MessageContent,
|
||||
VisibilityIcon,
|
||||
},
|
||||
mixins: [currentUser],
|
||||
props: {
|
||||
|
|
@ -284,6 +286,8 @@ export default {
|
|||
justify-content: space-between;
|
||||
|
||||
.post-author-wrapper {
|
||||
flex-grow: 1;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
@ -299,7 +303,6 @@ export default {
|
|||
}
|
||||
|
||||
.post-visibility {
|
||||
flex-grow: 1;
|
||||
opacity: 0.5;
|
||||
background-position: right;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,34 +1,32 @@
|
|||
import { translate as t } from '@nextcloud/l10n'
|
||||
|
||||
const visibilityToClass = {
|
||||
public: 'icon-link',
|
||||
followers: 'icon-contacts-dark',
|
||||
direct: 'icon-external',
|
||||
unlisted: 'icon-password',
|
||||
}
|
||||
|
||||
/**
|
||||
* @typedef {object} Visibility
|
||||
* @property {string} id - One of 'public', 'followers', 'direct', 'unlisted'
|
||||
* @property {string} text - Short label of the visibility
|
||||
* @property {string} longtext - Description of the visibility
|
||||
*/
|
||||
|
||||
/** @type {Visibility[]} */
|
||||
export default [
|
||||
{
|
||||
id: 'public',
|
||||
icon: visibilityToClass.public,
|
||||
text: t('social', 'Public'),
|
||||
longtext: t('social', 'Post to public timelines'),
|
||||
},
|
||||
{
|
||||
id: 'unlisted',
|
||||
icon: visibilityToClass.unlisted,
|
||||
text: t('social', 'Unlisted'),
|
||||
longtext: t('social', 'Do not post to public timelines'),
|
||||
},
|
||||
{
|
||||
id: 'followers',
|
||||
icon: visibilityToClass.followers,
|
||||
text: t('social', 'Followers'),
|
||||
longtext: t('social', 'Post to followers only'),
|
||||
},
|
||||
{
|
||||
id: 'direct',
|
||||
icon: visibilityToClass.direct,
|
||||
text: t('social', 'Direct'),
|
||||
longtext: t('social', 'Post to mentioned users only'),
|
||||
},
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!--
|
||||
- @copyright Copyright (c) 2023 Louis Chmn <louis@chmn.me>
|
||||
-
|
||||
- @2023 Louis Chmn <louis@chmn.me>
|
||||
-
|
||||
- @license GNU AGPL version 3 or any later version
|
||||
-
|
||||
- This program is free software: you can redistribute it and/or modify
|
||||
- it under the terms of the GNU Affero General Public License as
|
||||
- published by the Free Software Foundation, either version 3 of the
|
||||
- License, or (at your option) any later version.
|
||||
-
|
||||
- This program is distributed in the hope that it will be useful,
|
||||
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
- GNU Affero General Public License for more details.
|
||||
-
|
||||
- You should have received a copy of the GNU Affero General Public License
|
||||
- along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
-
|
||||
-->
|
||||
|
||||
<template>
|
||||
<Earth v-if="visibility === 'public'" :size="22" />
|
||||
<AccountMultiple v-else-if="visibility === 'followers'" :size="22" />
|
||||
<LockOpen v-else-if="visibility === 'unlisted'" :size="22" />
|
||||
<At v-else-if="visibility === 'direct'" :size="22" />
|
||||
</template>
|
||||
<script>
|
||||
import Earth from 'vue-material-design-icons/Earth.vue'
|
||||
import LockOpen from 'vue-material-design-icons/LockOpen.vue'
|
||||
import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
|
||||
import At from 'vue-material-design-icons/At.vue'
|
||||
|
||||
export default {
|
||||
name: 'VisibilityIcon',
|
||||
components: {
|
||||
Earth,
|
||||
LockOpen,
|
||||
AccountMultiple,
|
||||
At,
|
||||
},
|
||||
props: {
|
||||
visibility: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!--
|
||||
- @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
|
||||
- @copyright Copyright (c) 2022 Carl Schwan <carl@carlschwan.eu>
|
||||
-
|
||||
- @author Julius Härtl <jus@bitgrid.net>
|
||||
-
|
||||
- @license GNU AGPL version 3 or any later version
|
||||
-
|
||||
- This program is free software: you can redistribute it and/or modify
|
||||
- it under the terms of the GNU Affero General Public License as
|
||||
- published by the Free Software Foundation, either version 3 of the
|
||||
- License, or (at your option) any later version.
|
||||
-
|
||||
- This program is distributed in the hope that it will be useful,
|
||||
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
- GNU Affero General Public License for more details.
|
||||
-
|
||||
- You should have received a copy of the GNU Affero General Public License
|
||||
- along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
-
|
||||
-->
|
||||
|
||||
<template>
|
||||
<NcActions type="tertiary" :menu-title="selectedVisibilityDetails.text" :aria-label="t('social', 'Choose a visibility')">
|
||||
<template #icon>
|
||||
<VisibilityIcon :visibility="selectedVisibilityDetails.id" :size="20" />
|
||||
</template>
|
||||
<NcActionButton v-for="visibilityDetails of visibilitiesInfo"
|
||||
:key="visibilityDetails.id"
|
||||
:class="{'selected-visibility': visibilityDetails.id === selectedVisibilityDetails.id}"
|
||||
:close-after-click="true"
|
||||
@click="switchType(visibilityDetails)">
|
||||
<template #icon>
|
||||
<VisibilityIcon :visibility="visibilityDetails.id" :size="20" />
|
||||
</template>
|
||||
{{ visibilityDetails.longtext }}
|
||||
</NcActionButton>
|
||||
</NcActions>
|
||||
</template>
|
||||
<script>
|
||||
import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
|
||||
import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
|
||||
import { translate } from '@nextcloud/l10n'
|
||||
import visibilitiesInfo from './VisibilitiesInfos.js'
|
||||
import VisibilityIcon from './VisibilityIcon.vue'
|
||||
|
||||
export default {
|
||||
name: 'VisibilitySelect',
|
||||
components: {
|
||||
NcActions,
|
||||
NcActionButton,
|
||||
VisibilityIcon,
|
||||
},
|
||||
props: {
|
||||
visibility: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visibilitiesInfo,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
/** @return {import('./VisibilitiesInfos.js').Visibility} */
|
||||
selectedVisibilityDetails() {
|
||||
return visibilitiesInfo.find(({ id }) => this.visibility === id)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
switchType(visibility) {
|
||||
this.$emit('update:visibility', visibility.id)
|
||||
// this.menuOpened = false
|
||||
localStorage.setItem('social.lastPostType', visibility.id)
|
||||
},
|
||||
|
||||
t: translate,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.selected-visibility {
|
||||
border: 1px solid var(--color-success);
|
||||
border-left-width: 4px;
|
||||
border-radius: 6px;
|
||||
background: var(--color-background-hover);
|
||||
}
|
||||
</style>
|
||||
Ładowanie…
Reference in New Issue