diff options
Diffstat (limited to 'src/components/status')
| -rw-r--r-- | src/components/status/status.js | 49 | ||||
| -rw-r--r-- | src/components/status/status.scss | 26 | ||||
| -rw-r--r-- | src/components/status/status.vue | 70 |
3 files changed, 88 insertions, 57 deletions
diff --git a/src/components/status/status.js b/src/components/status/status.js index e48b2eb8..f7a0ff83 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -17,6 +17,47 @@ import { highlightClass, highlightStyle } from '../../services/user_highlighter/ import { muteWordHits } from '../../services/status_parser/status_parser.js' import { unescape, uniqBy } from 'lodash' +import { library } from '@fortawesome/fontawesome-svg-core' +import { + faEnvelope, + faLock, + faLockOpen, + faGlobeEurope, + faTimes, + faRetweet, + faReply, + faExternalLinkSquareAlt, + faPlusSquare, + faSmileBeam, + faEllipsisH, + faStar, + faEyeSlash, + faEye, + faThumbtack +} from '@fortawesome/free-solid-svg-icons' +import { + faStar as faStarRegular +} from '@fortawesome/free-regular-svg-icons' + +library.add( + faEnvelope, + faGlobeEurope, + faLock, + faLockOpen, + faTimes, + faRetweet, + faReply, + faExternalLinkSquareAlt, + faPlusSquare, + faStar, + faStarRegular, + faSmileBeam, + faEllipsisH, + faEyeSlash, + faEye, + faThumbtack +) + const Status = { name: 'Status', components: { @@ -227,13 +268,13 @@ const Status = { visibilityIcon (visibility) { switch (visibility) { case 'private': - return 'icon-lock' + return 'lock' case 'unlisted': - return 'icon-lock-open-alt' + return 'lock-open' case 'direct': - return 'icon-mail-alt' + return 'envelope' default: - return 'icon-globe' + return 'globe-europe' } }, showError (error) { diff --git a/src/components/status/status.scss b/src/components/status/status.scss index 66a91c1e..cd5366ed 100644 --- a/src/components/status/status.scss +++ b/src/components/status/status.scss @@ -200,7 +200,6 @@ $status-margin: 0.75em; } .reply-to { - display: flex; position: relative; } @@ -208,7 +207,6 @@ $status-margin: 0.75em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - margin-left: 0.2em; } .replies-separator { @@ -232,16 +230,10 @@ $status-margin: 0.75em; .repeat-info { padding: 0.4em $status-margin; - line-height: 22px; - - .right-side { - display: flex; - align-content: center; - flex-wrap: wrap; - } - i { - padding: 0 0.2em; + .repeat-icon { + color: $fallback--cGreen; + color: var(--cGreen, $fallback--cGreen); } } @@ -291,18 +283,6 @@ $status-margin: 0.75em; } } - .button-reply { - &:not(.-disabled) { - cursor: pointer; - } - - &:not(.-disabled):hover, - &.-active { - color: $fallback--cBlue; - color: var(--cBlue, $fallback--cBlue); - } - } - .muted { padding: 0.25em 0.6em; height: 1.2em; diff --git a/src/components/status/status.vue b/src/components/status/status.vue index ffae32fc..b9b967cc 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -10,17 +10,20 @@ class="alert error" > {{ error }} - <i - class="button-icon icon-cancel" + <span + class="button-icon" @click="clearError" - /> + > + <FAIcon icon="times" /> + </span> </div> <template v-if="muted && !isPreview"> <div class="status-container muted"> <small class="status-username"> - <i + <FAIcon v-if="muted && retweet" - class="button-icon icon-retweet" + class="button-icon repeat-icon" + icon="retweet" /> <router-link :to="userProfileLink"> {{ status.user.screen_name }} @@ -46,9 +49,11 @@ </small> <a href="#" - class="unmute" + class="unmute button-icon" @click.prevent="toggleMute" - ><i class="button-icon icon-eye-off" /></a> + > + <FAIcon icon="eye-slash" class="button-icon" size="lg" /> + </a> </div> </template> <template v-else> @@ -56,7 +61,7 @@ v-if="showPinned" class="pin" > - <i class="fa icon-pin faint" /> + <FAIcon icon="thumbtack" class="faint" /> <span class="faint">{{ $t('status.pinned') }}</span> </div> <div @@ -86,8 +91,9 @@ :to="retweeterProfileLink" >{{ retweeter }}</router-link> </span> - <i - class="fa icon-retweet retweeted" + <FAIcon + icon="retweet" + class="repeat-icon" :title="$t('tool_tip.repeat')" /> {{ $t('timeline.repeated') }} @@ -167,15 +173,13 @@ :auto-update="60" /> </router-link> - <div + <span v-if="status.visibility" - class="button-icon visibility-icon" - > - <i - :class="visibilityIcon(status.visibility)" - :title="status.visibility | capitalize" - /> - </div> + class="visibility-icon" + :title="status.visibility | capitalize" + > + <FAIcon class="button-icon" :icon="visibilityIcon(status.visibility)" size="lg" /> + </span> <a v-if="!status.is_local && !isPreview" :href="status.external_url" @@ -183,22 +187,23 @@ class="source_url" title="Source" > - <i class="button-icon icon-link-ext-alt" /> + <FAIcon class="button-icon" icon="external-link-square-alt" size="lg" /> + </a> + <a + v-if="expandable && !isPreview" + href="#" + title="Expand" + @click.prevent="toggleExpanded" + > + <FAIcon class="button-icon" icon="plus-square" size="lg" /> </a> - <template v-if="expandable && !isPreview"> - <a - href="#" - title="Expand" - @click.prevent="toggleExpanded" - > - <i class="button-icon icon-plus-squared" /> - </a> - </template> <a v-if="unmuted" href="#" @click.prevent="toggleMute" - ><i class="button-icon icon-eye-off" /></a> + > + <FAIcon icon="eye-slash" class="button-icon" size="lg" /> + </a> </span> </div> @@ -220,7 +225,12 @@ :aria-label="$t('tool_tip.reply')" @click.prevent="gotoOriginal(status.in_reply_to_status_id)" > - <i class="button-icon reply-button icon-reply" /> + <FAIcon + class="button-icon" + icon="reply" + size="lg" + flip="horizontal" + /> <span class="faint-link reply-to-text" > |