diff options
Diffstat (limited to 'src/components')
4 files changed, 140 insertions, 133 deletions
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index 89091f8e..8a4e2489 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -32,6 +32,8 @@ const PostStatusForm = { }, mounted () { this.resize(this.$refs.textarea) + const textLength = this.$refs.textarea.value.length + this.$refs.textarea.setSelectionRange(textLength, textLength) if (this.replyTo) { this.$refs.textarea.focus() @@ -250,7 +252,8 @@ const PostStatusForm = { } this.$emit('posted') let el = this.$el.querySelector('textarea') - el.style.height = '16px' + el.style.height = 'auto' + el.style.height = undefined this.error = null } else { this.error = data.error @@ -298,13 +301,15 @@ const PostStatusForm = { e.dataTransfer.dropEffect = 'copy' }, resize (e) { - if (!e.target) { return } - const vertPadding = Number(window.getComputedStyle(e.target)['padding-top'].substr(0, 1)) + - Number(window.getComputedStyle(e.target)['padding-bottom'].substr(0, 1)) - e.target.style.height = 'auto' - e.target.style.height = `${e.target.scrollHeight - vertPadding}px` - if (e.target.value === '') { - e.target.style.height = '16px' + const target = e.target || e + if (!(target instanceof window.Element)) { return } + const vertPadding = Number(window.getComputedStyle(target)['padding-top'].substr(0, 1)) + + Number(window.getComputedStyle(target)['padding-bottom'].substr(0, 1)) + // Auto is needed to make textbox shrink when removing lines + target.style.height = 'auto' + target.style.height = `${target.scrollHeight - vertPadding}px` + if (target.value === '') { + target.style.height = null } }, clearError () { diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index 1f5c9ab6..3804302b 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -2,22 +2,25 @@ <div id="heading" class="profile-panel-background" :style="headingStyle"> <div class="panel-heading text-center"> <div class='user-info'> - <router-link :to="{ name: 'user-settings' }" style="float: right; margin-top:16px;" v-if="!isOtherUser"> - <i class="button-icon icon-cog usersettings" :title="$t('tool_tip.user_settings')"></i> - </router-link> - <a :href="user.statusnet_profile_url" target="_blank" class="floater" v-if="isOtherUser"> - <i class="icon-link-ext usersettings"></i> - </a> <div class='container'> <router-link :to="userProfileLink(user)"> <StillImage class="avatar" :class='{ "better-shadow": betterShadow }' :src="user.profile_image_url_original"/> </router-link> <div class="name-and-screen-name"> - <div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div> - <div :title="user.name" class='user-name' v-else>{{user.name}}</div> + <div class="top-line"> + <div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div> + <div :title="user.name" class='user-name' v-else>{{user.name}}</div> + <router-link :to="{ name: 'user-settings' }" v-if="!isOtherUser"> + <i class="button-icon icon-cog usersettings" :title="$t('tool_tip.user_settings')"></i> + </router-link> + <a :href="user.statusnet_profile_url" target="_blank" v-if="isOtherUser"> + <i class="icon-link-ext usersettings"></i> + </a> + </div> + <router-link class='user-screen-name' :to="userProfileLink(user)"> - <span>@{{user.screen_name}}</span><span v-if="user.locked"><i class="icon icon-lock"></i></span> - <span v-if="!hideUserStatsLocal" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span> + <span class="handle">@{{user.screen_name}}</span><span v-if="user.locked"><i class="icon icon-lock"></i></span> + <span v-if="!hideUserStatsLocal && !hideBio" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span> </router-link> </div> </div> @@ -25,7 +28,7 @@ <div v-if="user.follows_you && loggedIn && isOtherUser" class="following"> {{ $t('user_card.follows_you') }} </div> - <div class="floater" v-if="isOtherUser && (loggedIn || !switcher)"> + <div class="highlighter" v-if="isOtherUser && (loggedIn || !switcher)"> <!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to --> <input class="userHighlightText" type="text" :id="'userHighlightColorTx'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/> <input class="userHighlightCl" type="color" :id="'userHighlightColor'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/> @@ -139,7 +142,7 @@ border-bottom-right-radius: 0; .panel-heading { - padding: 0.6em 0em; + padding: .6em 0; text-align: center; box-shadow: none; } @@ -158,10 +161,10 @@ .user-info { color: $fallback--lightText; color: var(--lightText, $fallback--lightText); - padding: 0 16px; + padding: 0 26px; .container { - padding: 16px 10px 6px 10px; + padding: 16px 0 6px; display: flex; max-height: 56px; @@ -218,11 +221,15 @@ vertical-align: middle; object-fit: contain } + .top-line { + display: flex; + } } .user-name{ text-overflow: ellipsis; overflow: hidden; + flex: 1 0 auto; } .user-screen-name { @@ -232,27 +239,73 @@ font-weight: light; font-size: 15px; padding-right: 0.1em; + width: 100%; + display: flex; + + .dailyAvg { + min-width: 1px; + flex: 0 0 auto; + } + + .handle { + min-width: 1px; + flex: 0 1 auto; + text-overflow: ellipsis; + overflow: hidden; + } } .user-meta { - margin-bottom: .4em; + margin-bottom: .15em; + display: flex; + align-items: baseline; + font-size: 14px; + line-height: 22px; + flex-wrap: wrap; .following { - font-size: 14px; - flex: 0 0 100%; + flex: 1 0 auto; margin: 0; - padding-left: 16px; + margin-bottom: .25em; text-align: left; - float: left; - } - .floater { - margin: 0; } - &::after { - display: block; - content: ''; - clear: both; + .highlighter { + flex: 0 1 auto; + display: flex; + flex-wrap: wrap; + margin-right: -.5em; + align-self: start; + + .userHighlightCl { + padding: 2px 10px; + flex: 1 0 auto; + } + + .userHighlightSel, + .userHighlightSel.select { + padding-top: 0; + padding-bottom: 0; + flex: 1 0 auto; + } + .userHighlightSel.select i { + line-height: 22px; + } + + .userHighlightText { + width: 70px; + flex: 1 0 auto; + } + + .userHighlightCl, + .userHighlightText, + .userHighlightSel, + .userHighlightSel.select { + height: 22px; + vertical-align: top; + margin-right: .5em; + margin-bottom: .25em; + } } } .user-interactions { @@ -260,8 +313,13 @@ flex-flow: row wrap; justify-content: space-between; + margin-right: -.75em; + div { - flex: 1; + flex: 1 0 0; + margin-right: .75em; + margin-bottom: .6em; + white-space: nowrap; } .mute { @@ -280,8 +338,9 @@ } button { - width: 92%; + width: 100%; height: 100%; + margin: 0; } .remote-button { @@ -304,10 +363,11 @@ justify-content: space-between; color: $fallback--lightText; color: var(--lightText, $fallback--lightText); + flex-wrap: wrap; } .user-count { - flex: 1; + flex: 1 0 auto; padding: .5em 0 .5em 0; margin: 0 .5em; @@ -327,32 +387,5 @@ color: #CCC; } .floater { - float: right; - margin-top: 16px; - - .userHighlightCl { - padding: 2px 10px; - } - .userHighlightSel, - .userHighlightSel.select { - padding-top: 0; - padding-bottom: 0; - } - .userHighlightSel.select i { - line-height: 22px; - } - - .userHighlightText { - width: 70px; - } - - .userHighlightCl, - .userHighlightText, - .userHighlightSel, - .userHighlightSel.select { - height: 22px; - vertical-align: top; - margin-right: 0 - } } </style> diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.js b/src/components/who_to_follow_panel/who_to_follow_panel.js index c2df6899..b2183e6d 100644 --- a/src/components/who_to_follow_panel/who_to_follow_panel.js +++ b/src/components/who_to_follow_panel/who_to_follow_panel.js @@ -2,62 +2,31 @@ import apiService from '../../services/api/api.service.js' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' function showWhoToFollow (panel, reply) { - var users = reply - var cn - var index - var step = 7 - cn = Math.floor(Math.random() * step) - for (index = 0; index < 3; index++) { - var user - user = users[cn] - var img - if (user.avatar) { - img = user.avatar - } else { - img = '/images/avi.png' - } - var name = user.acct - if (index === 0) { - panel.img1 = img - panel.name1 = name - panel.$store.state.api.backendInteractor.externalProfile(name) - .then((externalUser) => { - if (!externalUser.error) { - panel.$store.commit('addNewUsers', [externalUser]) - panel.id1 = externalUser.id - } - }) - } else if (index === 1) { - panel.img2 = img - panel.name2 = name - panel.$store.state.api.backendInteractor.externalProfile(name) - .then((externalUser) => { - if (!externalUser.error) { - panel.$store.commit('addNewUsers', [externalUser]) - panel.id2 = externalUser.id - } - }) - } else if (index === 2) { - panel.img3 = img - panel.name3 = name - panel.$store.state.api.backendInteractor.externalProfile(name) - .then((externalUser) => { - if (!externalUser.error) { - panel.$store.commit('addNewUsers', [externalUser]) - panel.id3 = externalUser.id - } - }) - } - cn = (cn + step) % users.length - } + panel.usersToFollow.forEach((toFollow, index) => { + let randIndex = Math.floor(Math.random() * reply.length) + let user = reply[randIndex] + let img = user.avatar || '/images/avi.png' + let name = user.acct + + toFollow.img = img + toFollow.name = name + + panel.$store.state.api.backendInteractor.externalProfile(name) + .then((externalUser) => { + if (!externalUser.error) { + panel.$store.commit('addNewUsers', [externalUser]) + toFollow.id = externalUser.id + } + }) + }) } function getWhoToFollow (panel) { var credentials = panel.$store.state.users.currentUser.credentials if (credentials) { - panel.name1 = 'Loading...' - panel.name2 = 'Loading...' - panel.name3 = 'Loading...' + panel.usersToFollow.forEach(toFollow => { + toFollow.name = 'Loading...' + }) apiService.suggestions({credentials: credentials}) .then((reply) => { showWhoToFollow(panel, reply) @@ -67,27 +36,24 @@ function getWhoToFollow (panel) { const WhoToFollowPanel = { data: () => ({ - img1: '/images/avi.png', - name1: '', - id1: 0, - img2: '/images/avi.png', - name2: '', - id2: 0, - img3: '/images/avi.png', - name3: '', - id3: 0 + usersToFollow: new Array(3).fill().map(x => ( + { + img: '/images/avi.png', + name: '', + id: 0 + } + )) }), computed: { user: function () { return this.$store.state.users.currentUser.screen_name }, moreUrl: function () { - var host = window.location.hostname - var user = this.user - var suggestionsWeb = this.$store.state.instance.suggestionsWeb - var url - url = suggestionsWeb.replace(/{{host}}/g, encodeURIComponent(host)) - url = url.replace(/{{user}}/g, encodeURIComponent(user)) + const host = window.location.hostname + const user = this.user + const suggestionsWeb = this.$store.state.instance.suggestionsWeb + const url = suggestionsWeb.replace(/{{host}}/g, encodeURIComponent(host)) + .replace(/{{user}}/g, encodeURIComponent(user)) return url }, suggestionsEnabled () { diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.vue b/src/components/who_to_follow_panel/who_to_follow_panel.vue index a62e8360..ad6a028e 100644 --- a/src/components/who_to_follow_panel/who_to_follow_panel.vue +++ b/src/components/who_to_follow_panel/who_to_follow_panel.vue @@ -8,9 +8,12 @@ </div> <div class="panel-body who-to-follow"> <p> - <img v-bind:src="img1"/> <router-link :to="userProfileLink(id1, name1)">{{ name1 }}</router-link><br> - <img v-bind:src="img2"/> <router-link :to="userProfileLink(id2, name2)">{{ name2 }}</router-link><br> - <img v-bind:src="img3"/> <router-link :to="userProfileLink(id3, name3)">{{ name3 }}</router-link><br> + <span v-for="user in usersToFollow"> + <img v-bind:src="user.img" /> + <router-link v-bind:to="userProfileLink(user.id, user.name)"> + {{user.name}} + </router-link><br /> + </span> <img v-bind:src="$store.state.instance.logo"> <a v-bind:href="moreUrl" target="_blank">{{$t('who_to_follow.more')}}</a> </p> </div> |