From e2dc0d85fc820a86c04694d27f5550796612c443 Mon Sep 17 00:00:00 2001 From: shpuld Date: Sun, 9 Jun 2019 14:07:54 +0300 Subject: [PATCH] replace vue-timeago with custom timeago --- package.json | 1 - src/App.scss | 38 +- src/components/notification/notification.js | 6 +- src/components/notification/notification.vue | 4 +- src/components/poll/poll.vue | 8 - .../poll/poll_results/poll_results.vue | 63 +- src/components/poll/poll_vote/poll_vote.vue | 77 +- src/components/status/status.js | 5 +- src/components/status/status.vue | 2 +- src/components/timeago/timeago.vue | 52 + src/i18n/ca.json | 34 + src/i18n/cs.json | 34 + src/i18n/en.json | 34 + src/i18n/fi.json | 34 + src/i18n/ga.json | 34 + src/i18n/ja.json | 34 + src/i18n/ja_pedantic.json | 34 + src/i18n/oc.json | 34 + src/main.js | 9 - src/services/date_utils/date_utils.js | 45 + static/timeago-ca.json | 10 - static/timeago-cs.json | 10 - static/timeago-en.json | 10 - static/timeago-ga.json | 10 - static/timeago-ja.json | 10 - static/timeago-oc.json | 10 - .../services/date_utils/date_utils.spec.js | 40 + yarn.lock | 1142 ----------------- 28 files changed, 565 insertions(+), 1259 deletions(-) create mode 100644 src/components/timeago/timeago.vue create mode 100644 src/services/date_utils/date_utils.js delete mode 100644 static/timeago-ca.json delete mode 100644 static/timeago-cs.json delete mode 100644 static/timeago-en.json delete mode 100644 static/timeago-ga.json delete mode 100644 static/timeago-ja.json delete mode 100644 static/timeago-oc.json create mode 100644 test/unit/specs/services/date_utils/date_utils.spec.js diff --git a/package.json b/package.json index 30a317b2..12e24690 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,6 @@ "vue-popperjs": "^2.0.3", "vue-router": "^3.0.1", "vue-template-compiler": "^2.3.4", - "vue-timeago": "^3.1.2", "vuelidate": "^0.7.4", "vuex": "^3.0.1", "whatwg-fetch": "^2.0.3" diff --git a/src/App.scss b/src/App.scss index 52a786ad..cc00ec31 100644 --- a/src/App.scss +++ b/src/App.scss @@ -182,7 +182,43 @@ input, textarea, .select { flex: 1; } - &[type=radio], + &[type=radio] { + display: none; + &:checked + label::before { + box-shadow: 0px 0px 2px black inset, 0px 0px 0px 4px $fallback--fg inset; + box-shadow: var(--inputShadow), 0px 0px 0px 4px var(--fg, $fallback--fg) inset; + background-color: var(--link, $fallback--link); + } + &:disabled { + &, + & + label, + & + label::before { + opacity: .5; + } + } + + label::before { + display: inline-block; + content: ''; + transition: box-shadow 200ms; + width: 1.1em; + height: 1.1em; + border-radius: 100%; // Radio buttons should always be circle + box-shadow: 0px 0px 2px black inset; + box-shadow: var(--inputShadow); + margin-right: .5em; + background-color: $fallback--fg; + background-color: var(--input, $fallback--fg); + vertical-align: top; + text-align: center; + line-height: 1.1em; + font-size: 1.1em; + box-sizing: border-box; + color: transparent; + overflow: hidden; + box-sizing: border-box; + } + } + &[type=checkbox] { display: none; &:checked + label::before { diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js index e59e7497..896c6d52 100644 --- a/src/components/notification/notification.js +++ b/src/components/notification/notification.js @@ -1,6 +1,7 @@ import Status from '../status/status.vue' import UserAvatar from '../user_avatar/user_avatar.vue' import UserCard from '../user_card/user_card.vue' +import Timeago from '../timeago/timeago.vue' import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' @@ -13,7 +14,10 @@ const Notification = { }, props: [ 'notification' ], components: { - Status, UserAvatar, UserCard + Status, + UserAvatar, + UserCard, + Timeago }, methods: { toggleUserExpanded () { diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index 3427b9c5..5ad365ad 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -30,12 +30,12 @@
- +
- +
diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue index 64f7d740..dd65935e 100644 --- a/src/components/poll/poll.vue +++ b/src/components/poll/poll.vue @@ -3,13 +3,11 @@ v-if="currentUserHasVoted" :poll="poll" :status-id="statusId" - v-on:poll-refreshed="handlePollUpdate" /> @@ -26,17 +24,11 @@ export default { }, computed: { currentUserHasVoted () { - console.log('currentUserHasVoted poll', this.poll) return this.poll.voted }, voted () { return this.poll.voted } }, - methods: { - handlePollUpdate (poll) { - // this.poll = poll - } - } } diff --git a/src/components/poll/poll_results/poll_results.vue b/src/components/poll/poll_results/poll_results.vue index 3238431a..8ec48196 100644 --- a/src/components/poll/poll_results/poll_results.vue +++ b/src/components/poll/poll_results/poll_results.vue @@ -3,19 +3,24 @@
-
{{percentageForOption(pollOption.votes_count)}}%
-
{{pollOption.title}}
-
+ v-for="(option, index) in poll.options" + :key="index" + :title="`${option.votes_count}/${totalVotesCount} ${$t('polls.votes')}`" + > +
+ {{percentageForOption(option.votes_count)}}% + {{option.title}} +
+
+
-
- Refresh ·  -
- {{totalVotesCount}} {{ $t("polls.votes") }} + {{totalVotesCount}} {{ $t("polls.votes") }} ·  +
+
@@ -25,9 +30,6 @@ export default { name: 'PollResults', props: ['poll', 'statusId'], - created () { - console.log(this.poll) - }, computed: { totalVotesCount () { return this.poll.votes_count @@ -35,7 +37,7 @@ export default { }, methods: { percentageForOption (count) { - return (this.totalVotesCount === 0 ? 0 : (count / this.totalVotesCount * 100)).toFixed(1) + return this.totalVotesCount === 0 ? 0 : Math.round(count / this.totalVotesCount * 100) }, fetchPoll () { this.$store.dispatch('refreshPoll', { id: this.statusId, pollId: this.poll.id }) @@ -45,18 +47,39 @@ export default {