From 61d78ff11b18df641958f0492ff0f00512e31543 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 27 Jul 2020 22:49:57 +0300 Subject: [PATCH 01/12] separate status scss into another file --- src/components/status/status.scss | 434 +++++++++++++++++++++++++++++ src/components/status/status.vue | 437 +----------------------------- 2 files changed, 435 insertions(+), 436 deletions(-) create mode 100644 src/components/status/status.scss diff --git a/src/components/status/status.scss b/src/components/status/status.scss new file mode 100644 index 00000000..05edd1bf --- /dev/null +++ b/src/components/status/status.scss @@ -0,0 +1,434 @@ + +@import '../../_variables.scss'; + +$status-margin: 0.75em; + +.status-body { + flex: 1; + min-width: 0; +} + +.status-pin { + padding: $status-margin $status-margin 0; + display: flex; + align-items: center; + justify-content: flex-end; +} + +.media-left { + margin-right: $status-margin; +} + +.status-el { + border-left-width: 0px; + min-width: 0; + border-color: $fallback--border; + border-color: var(--border, $fallback--border); + + border-left: 4px $fallback--cRed; + border-left: 4px var(--cRed, $fallback--cRed); + + &_focused { + background-color: $fallback--lightBg; + background-color: var(--selectedPost, $fallback--lightBg); + color: $fallback--text; + color: var(--selectedPostText, $fallback--text); + --lightText: var(--selectedPostLightText, $fallback--light); + --faint: var(--selectedPostFaintText, $fallback--faint); + --faintLink: var(--selectedPostFaintLink, $fallback--faint); + --postLink: var(--selectedPostPostLink, $fallback--faint); + --postFaintLink: var(--selectedPostFaintPostLink, $fallback--faint); + --icon: var(--selectedPostIcon, $fallback--icon); + } + + .timeline & { + border-bottom-width: 1px; + border-bottom-style: solid; + } + + .media-body { + flex: 1; + padding: 0; + } + + .status-usercard { + margin-bottom: $status-margin; + } + + .user-name { + white-space: nowrap; + font-size: 14px; + overflow: hidden; + flex-shrink: 0; + max-width: 85%; + font-weight: bold; + + img.emoji { + width: 14px; + height: 14px; + vertical-align: middle; + object-fit: contain + } + } + + .status-favicon { + height: 18px; + width: 18px; + margin-right: 0.4em; + } + + .media-heading { + padding: 0; + vertical-align: bottom; + flex-basis: 100%; + margin-bottom: 0.5em; + + small { + font-weight: lighter; + } + + .heading-name-row { + padding: 0; + display: flex; + justify-content: space-between; + line-height: 18px; + + a { + display: inline-block; + word-break: break-all; + } + + .name-and-account-name { + display: flex; + min-width: 0; + } + + .user-name { + flex-shrink: 1; + margin-right: 0.4em; + overflow: hidden; + text-overflow: ellipsis; + } + + .account-name { + min-width: 1.6em; + margin-right: 0.4em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + flex: 1 1 0; + } + } + + .heading-right { + display: flex; + flex-shrink: 0; + } + + .timeago { + margin-right: 0.2em; + } + + .heading-reply-row { + position: relative; + align-content: baseline; + font-size: 12px; + line-height: 18px; + max-width: 100%; + display: flex; + flex-wrap: wrap; + align-items: stretch; + + > .reply-to-and-accountname > a { + overflow: hidden; + max-width: 100%; + text-overflow: ellipsis; + white-space: nowrap; + word-break: break-all; + } + } + + .reply-to-and-accountname { + display: flex; + height: 18px; + margin-right: 0.5em; + max-width: 100%; + .icon-reply { + transform: scaleX(-1); + } + } + + .reply-info { + display: flex; + } + + .reply-to-popover { + min-width: 0; + } + + .reply-to { + display: flex; + } + + .reply-to-text { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + margin: 0 0.4em 0 0.2em; + } + + .strikethrough { + text-decoration: line-through; + } + + .replies-separator { + margin-left: 0.4em; + } + + .replies { + line-height: 18px; + font-size: 12px; + display: flex; + flex-wrap: wrap; + & > * { + margin-right: 0.4em; + } + } + + .reply-link { + height: 17px; + } + } + + .retweet-info { + padding: 0.4em $status-margin; + margin: 0; + + .avatar.still-image { + border-radius: $fallback--avatarAltRadius; + border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); + margin-left: 28px; + width: 20px; + height: 20px; + } + + .media-body { + font-size: 1em; + line-height: 22px; + + display: flex; + align-content: center; + flex-wrap: wrap; + + .user-name { + font-weight: bold; + overflow: hidden; + text-overflow: ellipsis; + + img { + width: 14px; + height: 14px; + vertical-align: middle; + object-fit: contain + } + } + + i { + padding: 0 0.2em; + } + + a { + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + } +} + +.status-fadein { + animation-duration: 0.4s; + animation-name: fadein; +} + +@keyframes fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +.status-conversation { + border-left-style: solid; +} + +.status-actions { + position: relative; + width: 100%; + display: flex; + margin-top: $status-margin; + + > * { + max-width: 4em; + flex: 1; + } +} + +.button-icon.icon-reply { + &:not(.button-icon-disabled):hover, + &.button-icon-active { + color: $fallback--cBlue; + color: var(--cBlue, $fallback--cBlue); + } +} + +.button-icon.icon-reply { + &:not(.button-icon-disabled) { + cursor: pointer; + } +} + +.status:hover .animated.avatar { + canvas { + display: none; + } + img { + visibility: visible; + } +} + +.status { + display: flex; + padding: $status-margin; + &.is-retweet { + padding-top: 0; + } +} + +.status-conversation:last-child { + border-bottom: none; +} + +.muted { + padding: .25em .6em; + height: 1.2em; + line-height: 1.2em; + text-overflow: ellipsis; + overflow: hidden; + display: flex; + flex-wrap: nowrap; + + .username, .mute-thread, .mute-words { + word-wrap: normal; + word-break: normal; + white-space: nowrap; + } + + .username, .mute-words { + text-overflow: ellipsis; + overflow: hidden; + } + + .username { + flex: 0 1 auto; + margin-right: .2em; + } + + .mute-thread { + flex: 0 0 auto; + } + + .mute-words { + flex: 1 0 5em; + margin-left: .2em; + &::before { + content: ' ' + } + } + + .unmute { + flex: 0 0 auto; + margin-left: auto; + display: block; + margin-left: auto; + } +} + +.reply-body { + flex: 1; +} + +.favs-repeated-users { + margin-top: $status-margin; + + .stats { + width: 100%; + display: flex; + line-height: 1em; + + .stat-count { + margin-right: $status-margin; + user-select: none; + + &:hover .stat-title { + text-decoration: underline; + } + + .stat-title { + color: var(--faint, $fallback--faint); + font-size: 12px; + text-transform: uppercase; + position: relative; + } + + .stat-number { + font-weight: bolder; + font-size: 16px; + line-height: 1em; + } + } + + .avatar-row { + flex: 1; + overflow: hidden; + position: relative; + display: flex; + align-items: center; + + &::before { + content: ''; + position: absolute; + height: 100%; + width: 1px; + left: 0; + background-color: var(--faint, $fallback--faint); + } + } + } +} + +@media all and (max-width: 800px) { + .status-el { + .retweet-info { + .avatar.still-image { + margin-left: 20px; + } + } + } + .status { + max-width: 100%; + } + + .status .avatar.still-image { + width: 40px; + height: 40px; + + &.avatar-compact { + width: 32px; + height: 32px; + } + } +} diff --git a/src/components/status/status.vue b/src/components/status/status.vue index e1e56ec9..b1a53df6 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -375,439 +375,4 @@ - + From 65b6e23c00f09f3627e29987302cd16c9e069da2 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 28 Jul 2020 01:27:11 +0300 Subject: [PATCH 02/12] refactor status --- package.json | 7 +- .../chat_list_item/chat_list_item.scss | 2 +- src/components/conversation/conversation.vue | 33 +- .../notifications/notifications.scss | 15 +- src/components/status/status.scss | 639 ++++---- src/components/status/status.vue | 48 +- .../status_content/status_content.vue | 13 +- .../status_popover/status_popover.vue | 3 +- src/components/timeline/timeline.vue | 2 +- .../user_reporting_modal.vue | 3 +- yarn.lock | 1437 ++++++++++++++++- 11 files changed, 1786 insertions(+), 416 deletions(-) diff --git a/package.json b/package.json index 96231171..e289729c 100644 --- a/package.json +++ b/package.json @@ -22,8 +22,8 @@ "cropperjs": "^1.4.3", "diff": "^3.0.1", "escape-html": "^1.0.3", - "parse-link-header": "^1.0.1", "localforage": "^1.5.0", + "parse-link-header": "^1.0.1", "phoenix": "^1.3.0", "portal-vue": "^2.1.4", "v-click-outside": "^2.1.1", @@ -36,7 +36,6 @@ "vuex": "^3.0.1" }, "devDependencies": { - "karma-mocha-reporter": "^2.2.1", "@babel/core": "^7.7.5", "@babel/plugin-transform-runtime": "^7.7.6", "@babel/preset-env": "^7.7.6", @@ -80,6 +79,7 @@ "karma-coverage": "^1.1.1", "karma-firefox-launcher": "^1.1.0", "karma-mocha": "^1.2.0", + "karma-mocha-reporter": "^2.2.1", "karma-sinon-chai": "^2.0.2", "karma-sourcemap-loader": "^0.3.7", "karma-spec-reporter": "0.0.26", @@ -101,6 +101,9 @@ "shelljs": "^0.7.4", "sinon": "^2.1.0", "sinon-chai": "^2.8.0", + "stylelint": "^13.6.1", + "stylelint-config-standard": "^20.0.0", + "stylelint-rscss": "^0.4.0", "url-loader": "^1.1.2", "vue-loader": "^14.0.0", "vue-style-loader": "^4.0.0", diff --git a/src/components/chat_list_item/chat_list_item.scss b/src/components/chat_list_item/chat_list_item.scss index 617054ec..10ba45f2 100644 --- a/src/components/chat_list_item/chat_list_item.scss +++ b/src/components/chat_list_item/chat_list_item.scss @@ -77,7 +77,7 @@ border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); } - .status-body { + .StatusContent { img.emoji { width: 1.4em; height: 1.4em; diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 2e48240a..7e2c6a9d 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -1,7 +1,7 @@