diff options
Diffstat (limited to 'app/javascript')
| -rw-r--r-- | app/javascript/flavours/glitch/features/emoji_picker/index.js | 15 | ||||
| -rw-r--r-- | app/javascript/flavours/glitch/packs/public.js | 8 | ||||
| -rw-r--r-- | app/javascript/flavours/glitch/packs/settings.js | 8 | ||||
| -rw-r--r-- | app/javascript/flavours/glitch/styles/admin.scss | 93 | ||||
| -rw-r--r-- | app/javascript/flavours/glitch/styles/footer.scss | 17 | ||||
| -rw-r--r-- | app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js | 15 | ||||
| -rw-r--r-- | app/javascript/packs/public.js | 8 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/admin.scss | 93 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/footer.scss | 17 |
9 files changed, 235 insertions, 39 deletions
diff --git a/app/javascript/flavours/glitch/features/emoji_picker/index.js b/app/javascript/flavours/glitch/features/emoji_picker/index.js index 78f691c98..5de9fe107 100644 --- a/app/javascript/flavours/glitch/features/emoji_picker/index.js +++ b/app/javascript/flavours/glitch/features/emoji_picker/index.js @@ -250,7 +250,7 @@ class EmojiPickerMenu extends React.PureComponent { state = { modifierOpen: false, - placement: null, + readyToFocus: false, }; handleDocumentClick = e => { @@ -262,6 +262,16 @@ class EmojiPickerMenu extends React.PureComponent { componentDidMount () { document.addEventListener('click', this.handleDocumentClick, false); document.addEventListener('touchend', this.handleDocumentClick, listenerOptions); + + // Because of https://github.com/react-bootstrap/react-bootstrap/issues/2614 we need + // to wait for a frame before focusing + requestAnimationFrame(() => { + this.setState({ readyToFocus: true }); + if (this.node) { + const element = this.node.querySelector('input[type="search"]'); + if (element) element.focus(); + } + }); } componentWillUnmount () { @@ -361,7 +371,7 @@ class EmojiPickerMenu extends React.PureComponent { showSkinTones={false} backgroundImageFn={backgroundImageFn} notFound={notFoundFn} - autoFocus + autoFocus={this.state.readyToFocus} emojiTooltip native={useSystemEmojiFont} /> @@ -396,6 +406,7 @@ class EmojiPickerDropdown extends React.PureComponent { state = { active: false, loading: false, + placement: null, }; setRef = (c) => { diff --git a/app/javascript/flavours/glitch/packs/public.js b/app/javascript/flavours/glitch/packs/public.js index a92f3d5a8..84ec9fce7 100644 --- a/app/javascript/flavours/glitch/packs/public.js +++ b/app/javascript/flavours/glitch/packs/public.js @@ -147,13 +147,7 @@ function main() { }); delegate(document, '.sidebar__toggle__icon', 'click', () => { - const target = document.querySelector('.sidebar ul'); - - if (target.style.display === 'block') { - target.style.display = 'none'; - } else { - target.style.display = 'block'; - } + document.querySelector('.sidebar ul').classList.toggle('visible'); }); // Empty the honeypot fields in JS in case something like an extension diff --git a/app/javascript/flavours/glitch/packs/settings.js b/app/javascript/flavours/glitch/packs/settings.js index 9c4d119c1..0a53e1c25 100644 --- a/app/javascript/flavours/glitch/packs/settings.js +++ b/app/javascript/flavours/glitch/packs/settings.js @@ -7,13 +7,7 @@ function main() { const { delegate } = require('@rails/ujs'); delegate(document, '.sidebar__toggle__icon', 'click', () => { - const target = document.querySelector('.sidebar ul'); - - if (target.style.display === 'block') { - target.style.display = 'none'; - } else { - target.style.display = 'block'; - } + document.querySelector('.sidebar ul').classList.toggle('visible'); }); } diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss index 66ce92ce2..33e115c1a 100644 --- a/app/javascript/flavours/glitch/styles/admin.scss +++ b/app/javascript/flavours/glitch/styles/admin.scss @@ -322,6 +322,10 @@ $content-width: 840px; & > ul { display: none; + + &.visible { + display: block; + } } ul a, @@ -594,12 +598,16 @@ body, } .log-entry { + display: block; line-height: 20px; padding: 15px; padding-left: 15px * 2 + 40px; background: $ui-base-color; border-bottom: 1px solid darken($ui-base-color, 8%); position: relative; + text-decoration: none; + color: $darker-text-color; + font-size: 14px; &:first-child { border-top-left-radius: 4px; @@ -612,15 +620,12 @@ body, border-bottom: 0; } - &:hover { + &:hover, + &:focus, + &:active { background: lighten($ui-base-color, 4%); } - &__header { - color: $darker-text-color; - font-size: 14px; - } - &__avatar { position: absolute; left: 15px; @@ -656,6 +661,18 @@ body, text-decoration: underline; } } + + &--inactive { + .log-entry__title { + text-decoration: line-through; + } + + a, + .username, + .target { + color: $darker-text-color; + } + } } a.name-tag, @@ -1191,6 +1208,17 @@ a.sparkline { font-weight: 600; padding: 4px 0; } + + a { + color: $ui-highlight-color; + text-decoration: none; + + &:hover, + &:focus, + &:active { + text-decoration: underline; + } + } } &--horizontal { @@ -1467,3 +1495,56 @@ a.sparkline { } } } + +.strike-card { + padding: 15px; + border-radius: 4px; + background: $ui-base-color; + font-size: 15px; + line-height: 20px; + word-wrap: break-word; + font-weight: 400; + color: $primary-text-color; + + p { + margin-bottom: 20px; + unicode-bidi: plaintext; + + &:last-child { + margin-bottom: 0; + } + } + + &__statuses-list { + border-radius: 4px; + border: 1px solid darken($ui-base-color, 8%); + font-size: 13px; + line-height: 18px; + overflow: hidden; + + &__item { + padding: 16px; + background: lighten($ui-base-color, 2%); + border-bottom: 1px solid darken($ui-base-color, 8%); + + &:last-child { + border-bottom: 0; + } + + &__meta { + color: $darker-text-color; + } + + a { + color: inherit; + text-decoration: none; + + &:hover, + &:focus, + &:active { + text-decoration: underline; + } + } + } + } +} diff --git a/app/javascript/flavours/glitch/styles/footer.scss b/app/javascript/flavours/glitch/styles/footer.scss index 00d290883..073ebda7e 100644 --- a/app/javascript/flavours/glitch/styles/footer.scss +++ b/app/javascript/flavours/glitch/styles/footer.scss @@ -90,6 +90,20 @@ .column-4 { display: none; } + + .column-2 h4 { + display: none; + } + } + } + + .legal-xs { + display: none; + text-align: center; + padding-top: 20px; + + @media screen and (max-width: $no-gap-breakpoint) { + display: block; } } @@ -105,7 +119,8 @@ } } - ul a { + ul a, + .legal-xs a { text-decoration: none; color: lighten($ui-base-color, 34%); diff --git a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js index 4a87714e6..f433e4de9 100644 --- a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js +++ b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js @@ -170,7 +170,7 @@ class EmojiPickerMenu extends React.PureComponent { state = { modifierOpen: false, - placement: null, + readyToFocus: false, }; handleDocumentClick = e => { @@ -182,6 +182,16 @@ class EmojiPickerMenu extends React.PureComponent { componentDidMount () { document.addEventListener('click', this.handleDocumentClick, false); document.addEventListener('touchend', this.handleDocumentClick, listenerOptions); + + // Because of https://github.com/react-bootstrap/react-bootstrap/issues/2614 we need + // to wait for a frame before focusing + requestAnimationFrame(() => { + this.setState({ readyToFocus: true }); + if (this.node) { + const element = this.node.querySelector('input[type="search"]'); + if (element) element.focus(); + } + }); } componentWillUnmount () { @@ -281,7 +291,7 @@ class EmojiPickerMenu extends React.PureComponent { showSkinTones={false} backgroundImageFn={backgroundImageFn} notFound={notFoundFn} - autoFocus + autoFocus={this.state.readyToFocus} emojiTooltip /> @@ -314,6 +324,7 @@ class EmojiPickerDropdown extends React.PureComponent { state = { active: false, loading: false, + placement: null, }; setRef = (c) => { diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js index 7ebe8b4d0..be467a8e2 100644 --- a/app/javascript/packs/public.js +++ b/app/javascript/packs/public.js @@ -151,13 +151,7 @@ function main() { }); delegate(document, '.sidebar__toggle__icon', 'click', () => { - const target = document.querySelector('.sidebar ul'); - - if (target.style.display === 'block') { - target.style.display = 'none'; - } else { - target.style.display = 'block'; - } + document.querySelector('.sidebar ul').classList.toggle('visible'); }); // Empty the honeypot fields in JS in case something like an extension diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index 66ce92ce2..33e115c1a 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -322,6 +322,10 @@ $content-width: 840px; & > ul { display: none; + + &.visible { + display: block; + } } ul a, @@ -594,12 +598,16 @@ body, } .log-entry { + display: block; line-height: 20px; padding: 15px; padding-left: 15px * 2 + 40px; background: $ui-base-color; border-bottom: 1px solid darken($ui-base-color, 8%); position: relative; + text-decoration: none; + color: $darker-text-color; + font-size: 14px; &:first-child { border-top-left-radius: 4px; @@ -612,15 +620,12 @@ body, border-bottom: 0; } - &:hover { + &:hover, + &:focus, + &:active { background: lighten($ui-base-color, 4%); } - &__header { - color: $darker-text-color; - font-size: 14px; - } - &__avatar { position: absolute; left: 15px; @@ -656,6 +661,18 @@ body, text-decoration: underline; } } + + &--inactive { + .log-entry__title { + text-decoration: line-through; + } + + a, + .username, + .target { + color: $darker-text-color; + } + } } a.name-tag, @@ -1191,6 +1208,17 @@ a.sparkline { font-weight: 600; padding: 4px 0; } + + a { + color: $ui-highlight-color; + text-decoration: none; + + &:hover, + &:focus, + &:active { + text-decoration: underline; + } + } } &--horizontal { @@ -1467,3 +1495,56 @@ a.sparkline { } } } + +.strike-card { + padding: 15px; + border-radius: 4px; + background: $ui-base-color; + font-size: 15px; + line-height: 20px; + word-wrap: break-word; + font-weight: 400; + color: $primary-text-color; + + p { + margin-bottom: 20px; + unicode-bidi: plaintext; + + &:last-child { + margin-bottom: 0; + } + } + + &__statuses-list { + border-radius: 4px; + border: 1px solid darken($ui-base-color, 8%); + font-size: 13px; + line-height: 18px; + overflow: hidden; + + &__item { + padding: 16px; + background: lighten($ui-base-color, 2%); + border-bottom: 1px solid darken($ui-base-color, 8%); + + &:last-child { + border-bottom: 0; + } + + &__meta { + color: $darker-text-color; + } + + a { + color: inherit; + text-decoration: none; + + &:hover, + &:focus, + &:active { + text-decoration: underline; + } + } + } + } +} diff --git a/app/javascript/styles/mastodon/footer.scss b/app/javascript/styles/mastodon/footer.scss index 00d290883..073ebda7e 100644 --- a/app/javascript/styles/mastodon/footer.scss +++ b/app/javascript/styles/mastodon/footer.scss @@ -90,6 +90,20 @@ .column-4 { display: none; } + + .column-2 h4 { + display: none; + } + } + } + + .legal-xs { + display: none; + text-align: center; + padding-top: 20px; + + @media screen and (max-width: $no-gap-breakpoint) { + display: block; } } @@ -105,7 +119,8 @@ } } - ul a { + ul a, + .legal-xs a { text-decoration: none; color: lighten($ui-base-color, 34%); |