From e20895f251d28b3631b1f5768302517a5b687b04 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 5 Dec 2017 23:02:27 +0100 Subject: Add list of lists component to web UI (#5811) * Add list of lists component to web UI * Add list adding * Add list removing * List editor modal * Add API account search limited by following=true relation * Rework list editor modal * Remove mandatory pagination of GET /api/v1/lists/:id/accounts * Adjust search input placeholder * Fix rspec (#5890) * i18n: (zh-CN) Add missing translations for #5811 (#5891) * i18n: (zh-CN) yarn manage:translations -- zh-CN * i18n: (zh-CN) Add missing translations for #5811 * Fix some issues - Display loading/missing state for list timelines - Order lists alphabetically in overview - Fix async list editor reset - Redirect to /lists after deleting unpinned list - Redirect to / after pinning a list * Remove dead list columns when a list is deleted or fetch returns 404 --- app/javascript/styles/mastodon/components.scss | 95 ++++++++++++++++++++++++++ 1 file changed, 95 insertions(+) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 26ff8bf00..5eeefae4d 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -2359,6 +2359,10 @@ button.icon-button.active i.fa-retweet { margin-left: 0; } +.column-header__links .text-btn { + margin-right: 10px; +} + .column-header__button { background: lighten($ui-base-color, 4%); border: 0; @@ -2398,6 +2402,14 @@ button.icon-button.active i.fa-retweet { &.animating { overflow-y: hidden; } + + hr { + height: 0; + background: transparent; + border: 0; + border-top: 1px solid lighten($ui-base-color, 12%); + margin: 10px 0; + } } .column-header__collapsible-inner { @@ -4440,3 +4452,86 @@ noscript { margin-bottom: 0; } } + +.column-inline-form { + padding: 7px 15px; + padding-right: 5px; + display: flex; + justify-content: flex-start; + align-items: center; + background: lighten($ui-base-color, 4%); + + label { + flex: 1 1 auto; + + input { + width: 100%; + margin-bottom: 6px; + } + } + + .icon-button { + flex: 0 0 auto; + margin-left: 5px; + } +} + +.drawer__backdrop { + cursor: pointer; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba($base-overlay-background, 0.5); +} + +.list-editor { + background: $ui-base-color; + flex-direction: column; + border-radius: 8px; + box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); + width: 40vh; + overflow: hidden; + + h4 { + padding: 15px 0; + background: lighten($ui-base-color, 13%); + font-weight: 500; + font-size: 16px; + text-align: center; + border-radius: 8px 8px 0 0; + } + + .drawer__pager { + height: 50vh; + } + + .drawer__inner { + border-radius: 0 0 8px 8px; + + &.backdrop { + width: calc(100% - 60px); + box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); + border-radius: 0 0 0 8px; + } + } + + &__accounts { + overflow-y: auto; + } + + .account__display-name { + &:hover strong { + text-decoration: none; + } + } + + .account__avatar { + cursor: default; + } + + .search { + margin-bottom: 0; + } +} -- cgit From a9ca5ce920ba3a793ab966912002b4609e29e76b Mon Sep 17 00:00:00 2001 From: Yamagishi Kazutoshi Date: Wed, 6 Dec 2017 20:18:10 +0900 Subject: Handle submit event of new list form (#5895) --- .../mastodon/features/lists/components/new_list_form.js | 12 +++++------- app/javascript/styles/mastodon/components.scss | 4 ++++ 2 files changed, 9 insertions(+), 7 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/mastodon/features/lists/components/new_list_form.js b/app/javascript/mastodon/features/lists/components/new_list_form.js index 0054e5264..eed6efc25 100644 --- a/app/javascript/mastodon/features/lists/components/new_list_form.js +++ b/app/javascript/mastodon/features/lists/components/new_list_form.js @@ -36,10 +36,9 @@ export default class NewListForm extends React.PureComponent { this.props.onChange(e.target.value); } - handleKeyUp = e => { - if (e.keyCode === 13) { - this.props.onSubmit(); - } + handleSubmit = e => { + e.preventDefault(); + this.props.onSubmit(); } handleClick = () => { @@ -53,7 +52,7 @@ export default class NewListForm extends React.PureComponent { const title = intl.formatMessage(messages.title); return ( -
+
@@ -73,7 +71,7 @@ export default class NewListForm extends React.PureComponent { title={title} onClick={this.handleClick} /> -
+ ); } diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 5eeefae4d..a582d2628 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -4467,6 +4467,10 @@ noscript { input { width: 100%; margin-bottom: 6px; + + &:focus { + outline: 0; + } } } -- cgit From 063a1c2a8bfaa76215537a8ce7d433cda5ce9755 Mon Sep 17 00:00:00 2001 From: Yamagishi Kazutoshi Date: Wed, 6 Dec 2017 20:18:27 +0900 Subject: Fix emoji picker scrollbar (regression from #5046) (#5901) --- app/javascript/styles/mastodon/components.scss | 5 ----- app/javascript/styles/mastodon/emoji_picker.scss | 5 +++++ 2 files changed, 5 insertions(+), 5 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index a582d2628..8a1f90e3f 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -440,11 +440,6 @@ position: absolute; right: 5px; top: 5px; - - ::-webkit-scrollbar-track:hover, - ::-webkit-scrollbar-track:active { - background-color: rgba($base-overlay-background, 0.3); - } } } diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.scss index 2b46d30fc..4161cc045 100644 --- a/app/javascript/styles/mastodon/emoji_picker.scss +++ b/app/javascript/styles/mastodon/emoji_picker.scss @@ -95,6 +95,11 @@ padding: 0 6px 6px; background: $simple-background-color; will-change: transform; + + &::-webkit-scrollbar-track:hover, + &::-webkit-scrollbar-track:active { + background-color: rgba($base-overlay-background, 0.3); + } } .emoji-mart-search { -- cgit From 281c577cf8cdbfccdb06daf6ede285b9aecc15f4 Mon Sep 17 00:00:00 2001 From: Lynx Kotoura Date: Thu, 7 Dec 2017 01:53:25 +0900 Subject: Fix extra space between status text and username (#5902) --- app/javascript/styles/mastodon/components.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 8a1f90e3f..7bcd04ac0 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -512,7 +512,6 @@ font-weight: 400; overflow: hidden; white-space: pre-wrap; - padding-top: 5px; &.status__content--with-spoiler { white-space: normal; @@ -525,7 +524,7 @@ .emojione { width: 20px; height: 20px; - margin: -5px 0 0; + margin: -3px 0 0; } p { @@ -761,7 +760,7 @@ .status__action-bar { align-items: center; display: flex; - margin-top: 5px; + margin-top: 10px; } .status__action-bar-button { @@ -794,7 +793,7 @@ .emojione { width: 24px; height: 24px; - margin: -5px 0 0; + margin: -3px 0 0; } } -- cgit From a20509b41e87219e6cf147bf880980794bff44da Mon Sep 17 00:00:00 2001 From: Lynx Kotoura Date: Thu, 7 Dec 2017 03:48:48 +0900 Subject: Fix list editor modal on narrow devices (#5904) --- app/javascript/styles/mastodon/components.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 7bcd04ac0..d72f53f36 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -4489,9 +4489,13 @@ noscript { flex-direction: column; border-radius: 8px; box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); - width: 40vh; + width: 380px; overflow: hidden; + @media screen and (max-width: 420px) { + width: 90%; + } + h4 { padding: 15px 0; background: lighten($ui-base-color, 13%); -- cgit