diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/public_and_external_timeline/public_and_external_timeline.js | 6 | ||||
| -rw-r--r-- | src/components/public_timeline/public_timeline.js | 7 | ||||
| -rw-r--r-- | src/components/status/status.js | 17 | ||||
| -rw-r--r-- | src/components/status/status.vue | 133 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.js | 5 | ||||
| -rw-r--r-- | src/components/user_card_content/user_card_content.vue | 8 |
6 files changed, 117 insertions, 59 deletions
diff --git a/src/components/public_and_external_timeline/public_and_external_timeline.js b/src/components/public_and_external_timeline/public_and_external_timeline.js index 138118ad..0db6efae 100644 --- a/src/components/public_and_external_timeline/public_and_external_timeline.js +++ b/src/components/public_and_external_timeline/public_and_external_timeline.js @@ -5,6 +5,12 @@ const PublicAndExternalTimeline = { }, computed: { timeline () { return this.$store.state.statuses.timelines.publicAndExternal } + }, + created () { + this.$store.dispatch('startFetching', 'publicAndExternal') + }, + destroyed () { + this.$store.dispatch('stopFetching', 'publicAndExternal') } } diff --git a/src/components/public_timeline/public_timeline.js b/src/components/public_timeline/public_timeline.js index cac422ec..9b866be8 100644 --- a/src/components/public_timeline/public_timeline.js +++ b/src/components/public_timeline/public_timeline.js @@ -5,7 +5,14 @@ const PublicTimeline = { }, computed: { timeline () { return this.$store.state.statuses.timelines.public } + }, + created () { + this.$store.dispatch('startFetching', 'public') + }, + destroyed () { + this.$store.dispatch('stopFetching', 'public') } + } export default PublicTimeline diff --git a/src/components/status/status.js b/src/components/status/status.js index 40589ea5..030e22b5 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -3,6 +3,7 @@ import FavoriteButton from '../favorite_button/favorite_button.vue' import RetweetButton from '../retweet_button/retweet_button.vue' import DeleteButton from '../delete_button/delete_button.vue' import PostStatusForm from '../post_status_form/post_status_form.vue' +import UserCardContent from '../user_card_content/user_card_content.vue' const Status = { props: [ @@ -11,7 +12,9 @@ const Status = { ], data: () => ({ replying: false, - expanded: false + expanded: false, + unmuted: false, + userExpanded: false }), computed: { retweet () { return !!this.statusoid.retweeted_status }, @@ -25,14 +28,16 @@ const Status = { }, loggedIn () { return !!this.$store.state.users.currentUser - } + }, + muted () { return !this.unmuted && this.status.user.muted } }, components: { Attachment, FavoriteButton, RetweetButton, DeleteButton, - PostStatusForm + PostStatusForm, + UserCardContent }, methods: { toggleReplying () { @@ -40,6 +45,12 @@ const Status = { }, toggleExpanded () { this.$emit('toggleExpanded') + }, + toggleMute () { + this.unmuted = !this.unmuted + }, + toggleUserExpanded () { + this.userExpanded = !this.userExpanded } } } diff --git a/src/components/status/status.vue b/src/components/status/status.vue index f113fb7e..0c004936 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -1,70 +1,84 @@ <template> <div class="status-el base00-background" v-if="!status.deleted"> - <div v-if="retweet" class="media container retweet-info"> - <div class="media-left"> - <i class='fa icon-retweet retweeted'></i> + <template v-if="muted"> + <div class="media status container muted"> + <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small> + <a href="#" class="unmute" @click.prevent="toggleMute"><i class="icon-eye-off"></i></a> </div> - <div class="media-body"> - Retweeted by {{retweeter}} - </div> - </div> - <div class="media status container"> - <div class="media-left"> - <a :href="status.user.statusnet_profile_url"> - <img class='avatar' :src="status.user.profile_image_url_original"> - </a> + </template> + <template v-if="!muted"> + <div v-if="retweet" class="media container retweet-info"> + <div class="media-left"> + <i class='fa icon-retweet retweeted'></i> + </div> + <div class="media-body"> + Retweeted by {{retweeter}} + </div> </div> - <div class="media-body"> - <div class="user-content"> - <h4 class="media-heading"> - {{status.user.name}} - <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small> - <small v-if="status.in_reply_to_screen_name"> > - <router-link :to="{ name: 'user-profile', params: { id: status.in_reply_to_user_id } }"> - {{status.in_reply_to_screen_name}} - </router-link> - </small> - - - <small> - <router-link :to="{ name: 'conversation', params: { id: status.id } }"> - <timeago :since="status.created_at" :auto-update="60"></timeago> - </router-link> - </small> - <template v-if="expandable"> + <div class="media status container"> + <div class="media-left"> + <a :href="status.user.statusnet_profile_url"> + <img @click.prevent="toggleUserExpanded" class='avatar' :src="status.user.profile_image_url_original"> + </a> + </div> + <div class="media-body"> + <div class="base05 base05=border usercard" v-if="userExpanded"> + <user-card-content :user="status.user"></user-card-content> + </div> + <div class="user-content"> + <h4 class="media-heading"> + {{status.user.name}} + <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small> + <small v-if="status.in_reply_to_screen_name"> > + <router-link :to="{ name: 'user-profile', params: { id: status.in_reply_to_user_id } }"> + {{status.in_reply_to_screen_name}} + </router-link> + </small> - <small> - <a href="#" @click.prevent="toggleExpanded" >Expand</a> + <router-link :to="{ name: 'conversation', params: { id: status.id } }"> + <timeago :since="status.created_at" :auto-update="60"></timeago> + </router-link> </small> - </template> - <small v-if="!status.is_local" class="source_url"> - <a :href="status.external_url" target="_blank" >Source</a> - </small> - </h4> + <template v-if="expandable"> + - + <small> + <a href="#" @click.prevent="toggleExpanded" ><i class="icon-plus-squared"></i></a> + </small> + <small v-if="status.user.muted"> + <a href="#" @click.prevent="toggleMute" ><i class="icon-eye-off"></i></a> + </small> + </template> + <small v-if="!status.is_local" class="source_url"> + <a :href="status.external_url" target="_blank" ><i class="icon-binoculars"></i></a> + </small> + </h4> - <div class="status-content" v-html="status.statusnet_html"></div> + <div class="status-content" v-html="status.statusnet_html"></div> - <div v-if='status.attachments' class='attachments'> - <attachment :status-id="status.id" :nsfw="status.nsfw" :attachment="attachment" v-for="attachment in status.attachments"> - </attachment> + <div v-if='status.attachments' class='attachments'> + <attachment :status-id="status.id" :nsfw="status.nsfw" :attachment="attachment" v-for="attachment in status.attachments"> + </attachment> + </div> </div> - </div> - <div v-if="loggedIn"> - <div class='status-actions'> - <div> - <a href="#" v-on:click.prevent="toggleReplying"> - <i class='fa icon-reply'></i> - </a> + <div v-if="loggedIn"> + <div class='status-actions'> + <div> + <a href="#" v-on:click.prevent="toggleReplying"> + <i class='fa icon-reply'></i> + </a> + </div> + <retweet-button :status=status></retweet-button> + <favorite-button :status=status></favorite-button> + <delete-button :status=status></delete-button> </div> - <retweet-button :status=status></retweet-button> - <favorite-button :status=status></favorite-button> - <delete-button :status=status></delete-button> - </div> - <post-status-form v-if="replying" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" v-on:posted="toggleReplying"></post-status-form> + <post-status-form v-if="replying" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" v-on:posted="toggleReplying"></post-status-form> + </div> </div> </div> - </div> + </template> </div> </template> @@ -128,4 +142,19 @@ padding-right: 1em; border-bottom: 1px solid; } + .muted button { + margin-left: auto; + } + + a.unmute { + display: block; + margin-left: auto; + } + + .usercard { + border-style: solid; + border-width: 1px; + border-radius: 1em; + margin-bottom: 1em; + } </style> diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index 8a8cc2a0..954e2ff0 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -1,5 +1,3 @@ -import StyleSetter from '../../services/style_setter/style_setter.js' - export default { data: () => ({ availableStyles: [], @@ -13,8 +11,7 @@ export default { }, watch: { selected () { - const fullPath = `/static/css/${this.selected}` - StyleSetter.setStyle(fullPath) + this.$store.dispatch('setOption', { name: 'theme', value: this.selected }) } } } diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index 9a21f404..2c32406b 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -3,6 +3,10 @@ <div class="base00-background panel-heading text-center" v-bind:style="style"> <div class='user-info'> <img :src="user.profile_image_url"> + <div v-if='user.muted' class='muteinfo'>Muted</div> + <div class='muteinfo' v-if='isOtherUser'> + <button @click="toggleMute">Mute/Unmute</button> + </div> <span class="glyphicon glyphicon-user"></span> <div class='user-name'>{{user.name}}</div> <div class='user-screen-name'>@{{user.screen_name}}</div> @@ -70,6 +74,10 @@ const store = this.$store store.state.api.backendInteractor.unfollowUser(this.user.id) .then((unfollowedUser) => store.commit('addNewUsers', [unfollowedUser])) + }, + toggleMute () { + const store = this.$store + store.commit('setMuted', {user: this.user, muted: !this.user.muted}) } } } |