From 8183d2ed556c37245066789d8d6bb3c6966da670 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Mon, 3 Sep 2018 20:22:13 +0200 Subject: [Glitch] Do not override ctrl/cmd+click in media gallery --- app/javascript/flavours/glitch/components/media_gallery.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/components/media_gallery.js b/app/javascript/flavours/glitch/components/media_gallery.js index 3faf0b453..a68d983b8 100644 --- a/app/javascript/flavours/glitch/components/media_gallery.js +++ b/app/javascript/flavours/glitch/components/media_gallery.js @@ -70,7 +70,7 @@ class Item extends React.PureComponent { handleClick = (e) => { const { index, onClick } = this.props; - if (e.button === 0) { + if (e.button === 0 && !(e.ctrlKey || e.metaKey)) { e.preventDefault(); onClick(index); } -- cgit From be644e3b7cd441650d2657914917df08104e3b46 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Mon, 3 Sep 2018 20:46:00 +0200 Subject: Media gallery styling closer to upstream's --- .../flavours/glitch/components/media_gallery.js | 9 ++++++--- .../features/status/components/detailed_status.js | 1 + app/javascript/flavours/glitch/styles/_mixins.scss | 1 + .../flavours/glitch/styles/components/media.scss | 20 ++++++++++++-------- 4 files changed, 20 insertions(+), 11 deletions(-) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/components/media_gallery.js b/app/javascript/flavours/glitch/components/media_gallery.js index a68d983b8..fa27757f3 100644 --- a/app/javascript/flavours/glitch/components/media_gallery.js +++ b/app/javascript/flavours/glitch/components/media_gallery.js @@ -163,7 +163,8 @@ class Item extends React.PureComponent { sizes={sizes} alt={attachment.get('description')} title={attachment.get('description')} - style={{ objectPosition: `${x}% ${y}%` }} /> + style={{ objectPosition: `${x}% ${y}%` }} + /> ); } else if (attachment.get('type') === 'gifv') { @@ -191,7 +192,7 @@ class Item extends React.PureComponent { } return ( -
+
{thumbnail}
); @@ -261,6 +262,8 @@ export default class MediaGallery extends React.PureComponent { if (this.isStandaloneEligible() && width) { style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']); + } else if (width) { + style.height = width / (16/9); } if (!visible) { @@ -280,7 +283,7 @@ export default class MediaGallery extends React.PureComponent { } } - const computedClass = classNames('media-gallery', `size-${size}`, { 'full-width': fullwidth }); + const computedClass = classNames('media-gallery', { 'full-width': fullwidth }); return (
diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.js b/app/javascript/flavours/glitch/features/status/components/detailed_status.js index ee9eb02c6..2e61e6d8c 100644 --- a/app/javascript/flavours/glitch/features/status/components/detailed_status.js +++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.js @@ -77,6 +77,7 @@ export default class DetailedStatus extends ImmutablePureComponent { sensitive={status.get('sensitive')} media={status.get('media_attachments')} letterbox={settings.getIn(['media', 'letterbox'])} + fullwidth={settings.getIn(['media', 'fullwidth'])} onOpenMedia={this.props.onOpenMedia} /> ); diff --git a/app/javascript/flavours/glitch/styles/_mixins.scss b/app/javascript/flavours/glitch/styles/_mixins.scss index 102723e39..3ccecb874 100644 --- a/app/javascript/flavours/glitch/styles/_mixins.scss +++ b/app/javascript/flavours/glitch/styles/_mixins.scss @@ -48,5 +48,6 @@ width: inherit; max-width: none; height: 250px; + border-radius: 0px; } } diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss index 5a49c07fa..ef7525941 100644 --- a/app/javascript/flavours/glitch/styles/components/media.scss +++ b/app/javascript/flavours/glitch/styles/components/media.scss @@ -78,17 +78,11 @@ box-sizing: border-box; margin-top: 8px; overflow: hidden; + border-radius: 4px; position: relative; - background: $base-shadow-color; width: 100%; height: 110px; - .detailed-status & { - margin-left: -14px; - width: calc(100% + 28px); - height: 250px; - } - @include fullwidth-gallery; } @@ -98,6 +92,12 @@ display: block; float: left; position: relative; + border-radius: 4px; + overflow: hidden; + + .full-width & { + border-radius: 0; + } &.standalone { .media-gallery__item-gifv-thumbnail { @@ -105,13 +105,17 @@ top: 0; } } + + &.letterbox { + background: $base-shadow-color; + } } .media-gallery__item-thumbnail { cursor: zoom-in; display: block; text-decoration: none; - height: 100%; + color: $secondary-text-color; line-height: 0; &, -- cgit From 9998271a5bdc892b2c949f049a5f736239d290e7 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Mon, 3 Sep 2018 21:25:41 +0200 Subject: Fix full-width margins --- app/javascript/flavours/glitch/styles/_mixins.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/styles/_mixins.scss b/app/javascript/flavours/glitch/styles/_mixins.scss index 3ccecb874..2e317c382 100644 --- a/app/javascript/flavours/glitch/styles/_mixins.scss +++ b/app/javascript/flavours/glitch/styles/_mixins.scss @@ -43,8 +43,8 @@ @mixin fullwidth-gallery { &.full-width { - margin-left: -22px; - margin-right: -22px; + margin-left: -14px; + margin-right: -14px; width: inherit; max-width: none; height: 250px; -- cgit From 8622dccaf1a2380562284999c395592032a8f5ba Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Mon, 3 Sep 2018 21:28:40 +0200 Subject: Disable focus points for letterboxed media --- app/javascript/flavours/glitch/components/media_gallery.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/components/media_gallery.js b/app/javascript/flavours/glitch/components/media_gallery.js index fa27757f3..1de12c5e0 100644 --- a/app/javascript/flavours/glitch/components/media_gallery.js +++ b/app/javascript/flavours/glitch/components/media_gallery.js @@ -163,7 +163,7 @@ class Item extends React.PureComponent { sizes={sizes} alt={attachment.get('description')} title={attachment.get('description')} - style={{ objectPosition: `${x}% ${y}%` }} + style={{ objectPosition: letterbox ? null : `${x}% ${y}%` }} /> ); -- cgit From b6ce5fa3fb88936c45325f5290d4ec1871ca3edf Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Tue, 4 Sep 2018 14:43:11 +0200 Subject: Fix emoji autosuggest when using a CDN for assets --- .../glitch/features/composer/textarea/suggestions/item/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/features/composer/textarea/suggestions/item/index.js b/app/javascript/flavours/glitch/features/composer/textarea/suggestions/item/index.js index 331692398..1b7ae8904 100644 --- a/app/javascript/flavours/glitch/features/composer/textarea/suggestions/item/index.js +++ b/app/javascript/flavours/glitch/features/composer/textarea/suggestions/item/index.js @@ -11,7 +11,7 @@ import { unicodeMapping } from 'flavours/glitch/util/emoji'; import { assignHandlers } from 'flavours/glitch/util/react_helpers'; // Gets our asset host from the environment, if available. -const assetHost = ((process || {}).env || {}).CDN_HOST || ''; +const assetHost = process.env.CDN_HOST || ''; // Handlers. const handlers = { -- cgit From 36f50be30582b67fe906125e8613e15e3520f423 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Mon, 3 Sep 2018 19:18:56 +0200 Subject: [Glitch] Add white outline to black emoji Inspired from 0bfa0f237495249a322cd3a1100b394211755e8c --- app/javascript/flavours/glitch/styles/accessibility.scss | 13 +++++++++++++ app/javascript/flavours/glitch/styles/index.scss | 1 + 2 files changed, 14 insertions(+) create mode 100644 app/javascript/flavours/glitch/styles/accessibility.scss (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/styles/accessibility.scss b/app/javascript/flavours/glitch/styles/accessibility.scss new file mode 100644 index 000000000..4fe5c8b1c --- /dev/null +++ b/app/javascript/flavours/glitch/styles/accessibility.scss @@ -0,0 +1,13 @@ +$emojis-requiring-outlines: '8ball' 'ant' 'back' 'black_circle' 'black_heart' 'black_large_square' 'black_medium_small_square' 'black_medium_square' 'black_nib' 'black_small_square' 'bomb' 'bowling' 'bust_in_silhouette' 'busts_in_silhouette' 'camera' 'camera_with_flash' 'clubs' 'copyright' 'curly_loop' 'currency_exchange' 'dark_sunglasses' 'eight_pointed_black_star' 'electric_plug' 'end' 'female-guard' 'film_projector' 'fried_egg' 'gorilla' 'guardsman' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign' 'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'hocho' 'hole' 'joystick' 'kaaba' 'lower_left_ballpoint_pen' 'lower_left_fountain_pen' 'male-guard' 'microphone' 'mortar_board' 'movie_camera' 'musical_score' 'on' 'registered' 'soon' 'spades' 'speaking_head_in_silhouette' 'spider' 'telephone_receiver' 'tm' 'top' 'tophat' 'turkey' 'vhs' 'video_camera' 'video_game' 'water_buffalo' 'waving_black_flag' 'wavy_dash' !default; + +%emoji-outline { + filter: drop-shadow(1px 1px 0 $primary-text-color) drop-shadow(-1px 1px 0 $primary-text-color) drop-shadow(1px -1px 0 $primary-text-color) drop-shadow(-1px -1px 0 $primary-text-color); +} + +.emojione { + @each $emoji in $emojis-requiring-outlines { + &[title=':#{$emoji}:'] { + @extend %emoji-outline; + } + } +} diff --git a/app/javascript/flavours/glitch/styles/index.scss b/app/javascript/flavours/glitch/styles/index.scss index 8e3ff43e3..3cb592499 100644 --- a/app/javascript/flavours/glitch/styles/index.scss +++ b/app/javascript/flavours/glitch/styles/index.scss @@ -19,5 +19,6 @@ @import 'about'; @import 'tables'; @import 'admin'; +@import 'accessibility'; @import 'rtl'; @import 'dashboard'; -- cgit From 6e771bf6800b47ce299825225f086ebf7aa28a68 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Mon, 3 Sep 2018 22:05:32 +0200 Subject: Light theme overhaul --- .../flavours/glitch/styles/mastodon-light.scss | 219 +-------------- .../glitch/styles/mastodon-light/diff.scss | 294 +++++++++++++++++++++ .../glitch/styles/mastodon-light/variables.scss | 36 +++ 3 files changed, 332 insertions(+), 217 deletions(-) create mode 100644 app/javascript/flavours/glitch/styles/mastodon-light/diff.scss create mode 100644 app/javascript/flavours/glitch/styles/mastodon-light/variables.scss (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/styles/mastodon-light.scss b/app/javascript/flavours/glitch/styles/mastodon-light.scss index 029d5dde2..8fc132651 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light.scss @@ -1,218 +1,3 @@ -// Set variables -$ui-base-color: #d9e1e8; -$ui-base-lighter-color: darken($ui-base-color, 57%); -$ui-highlight-color: #2b90d9; -$ui-primary-color: darken($ui-highlight-color, 28%); -$ui-secondary-color: #282c37; - -$primary-text-color: black; -$base-overlay-background: $ui-base-color; - -$login-button-color: white; -$account-background-color: white; - -// Import defaults +@import 'mastodon-light/variables'; @import 'index'; - -// Change the color of the log in button -.button { - &.button-alternative-2 { - color: $login-button-color; - } -} - -// Change columns' default background colors -.column { - > .scrollable { - background: lighten($ui-base-color, 13%); - } -} - -.status.collapsed .status__content:after { - background: linear-gradient(rgba(lighten($ui-base-color, 13%), 0), rgba(lighten($ui-base-color, 13%), 1)); -} - -.drawer__inner { - background: $ui-base-color; -} - -.drawer > .contents { - background: $ui-base-color url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto !important; - - .mastodon { - filter: contrast(75%) brightness(75%) !important; - } -} - -// Change the default appearance of the content warning button -.status__content { - - .status__content__spoiler-link { - - background: darken($ui-base-color, 30%); - - &:hover { - background: darken($ui-base-color, 35%); - text-decoration: none; - } - - } - -} - -// Change the default appearance of the action buttons -.icon-button { - - &:hover, - &:active, - &:focus { - color: darken($ui-base-color, 40%); - transition: color 200ms ease-out; - } - - &.disabled { - color: darken($ui-base-color, 30%); - } - -} - -.status { - &.status-direct { - .icon-button.disabled { - color: darken($ui-base-color, 30%); - } - } -} - -// Change the colors used in the dropdown menu -.dropdown-menu { - background: $ui-base-color; -} - -.dropdown-menu__arrow { - - &.left { - border-left-color: $ui-base-color; - } - - &.top { - border-top-color: $ui-base-color; - } - - &.bottom { - border-bottom-color: $ui-base-color; - } - - &.right { - border-right-color: $ui-base-color; - } - -} - -.dropdown-menu__item { - a { - background: $ui-base-color; - color: $ui-secondary-color; - } -} - -// Change the default color of several parts of the compose form -.composer { - - .composer--spoiler input, .composer--textarea textarea { - color: darken($ui-base-color, 80%); - - &:disabled { background: darken($simple-background-color, 10%) } - - &::placeholder { - color: darken($ui-base-color, 70%); - } - } - - strong { - color: lighten($ui-secondary-color, 65%); - } - - .composer--options { - background: darken($ui-base-color, 10%); - box-shadow: unset; - } - - .composer--options--dropdown--content--item { - color: $ui-primary-color; - - strong { - color: $ui-primary-color; - } - - } - -} - -// Change the default color used for the text in an empty column or on the error column -.empty-column-indicator, -.error-column { - color: darken($ui-base-color, 60%); -} - -// Change the default colors used on some parts of the profile pages -.activity-stream-tabs { - - background: $account-background-color; - - a { - &.active { - color: $ui-primary-color; - } - } - -} - -.activity-stream { - - .entry { - background: $account-background-color; - } - - .status.light { - - .status__content { - color: $primary-text-color; - } - - .display-name { - strong { - color: $primary-text-color; - } - } - - } - -} - -.accounts-grid { - .account-grid-card { - - .controls { - .icon-button { - color: $ui-secondary-color; - } - } - - .name { - a { - color: $primary-text-color; - } - } - - .username { - color: $ui-secondary-color; - } - - .account__header__content { - color: $primary-text-color; - } - - } -} - +@import 'mastodon-light/diff'; diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss new file mode 100644 index 000000000..00d2411a1 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss @@ -0,0 +1,294 @@ +// Notes! +// Sass color functions, "darken" and "lighten" are automatically replaced. + +.glitch.local-settings { + background: $ui-base-color; + + &__navigation { + background: darken($ui-base-color, 8%); + } + + &__navigation__item { + background: darken($ui-base-color, 8%); + + &:hover { + background: $ui-base-color; + } + } +} + +.notification__dismiss-overlay { + .wrappy { + box-shadow: unset; + } + + .ckbox { + text-shadow: unset; + } +} + +.status.status-direct { + background: darken($ui-base-color, 8%); + + &.collapsed> .status__content:after { + background: linear-gradient(rgba(darken($ui-base-color, 8%), 0), rgba(darken($ui-base-color, 8%), 1)); + } +} + +.focusable:focus.status.status-direct { + background: darken($ui-base-color, 4%); + + &.collapsed> .status__content:after { + background: linear-gradient(rgba(darken($ui-base-color, 4%), 0), rgba(darken($ui-base-color, 4%), 1)); + } +} + +// Change columns' default background colors +.column { + > .scrollable { + background: darken($ui-base-color, 13%); + } +} + +.status.collapsed .status__content:after { + background: linear-gradient(rgba(darken($ui-base-color, 13%), 0), rgba(darken($ui-base-color, 13%), 1)); +} + +.drawer__inner { + background: $ui-base-color; +} + +.drawer > .contents { + background: $ui-base-color url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto !important; + + .mastodon { + filter: contrast(75%) brightness(75%) !important; + } +} + +// Change the default appearance of the content warning button +.status__content { + + .status__content__spoiler-link { + + background: lighten($ui-base-color, 30%); + + &:hover { + background: lighten($ui-base-color, 35%); + text-decoration: none; + } + + } + +} + +// Change the colors used in the dropdown menu +.dropdown-menu { + background: $ui-base-color; +} + +.dropdown-menu__arrow { + + &.left { + border-left-color: $ui-base-color; + } + + &.top { + border-top-color: $ui-base-color; + } + + &.bottom { + border-bottom-color: $ui-base-color; + } + + &.right { + border-right-color: $ui-base-color; + } + +} + +.dropdown-menu__item { + a { + background: $ui-base-color; + color: $ui-secondary-color; + } +} + +// Change the default color of several parts of the compose form +.composer { + + .composer--spoiler input, .composer--textarea textarea { + color: lighten($ui-base-color, 80%); + + &:disabled { background: lighten($simple-background-color, 10%) } + + &::placeholder { + color: lighten($ui-base-color, 70%); + } + } + + .composer--options { + background: lighten($ui-base-color, 10%); + box-shadow: unset; + + & > hr { + display: none; + } + } + + .composer--options--dropdown--content--item { + color: $ui-primary-color; + + strong { + color: $ui-primary-color; + } + + } + +} + +.dropdown-menu__separator { + border-bottom-color: lighten($ui-base-color, 12%); +} + +.status__content, +.reply-indicator__content { + a { + color: $highlight-text-color; + } +} + +.emoji-mart-bar { + border-color: darken($ui-base-color, 4%); + + &:first-child { + background: lighten($ui-base-color, 10%); + } +} + +.emoji-mart-search input { + background: rgba($ui-base-color, 0.3); + border-color: $ui-base-color; +} + +.composer--textarea--suggestions { + background: lighten($ui-base-color, 10%) +} + +.composer--textarea--suggestions--item { + &:hover, + &:focus, + &:active, + &.selected { + background: darken($ui-base-color, 4%); + } +} + +.react-toggle-track { + background: $ui-secondary-color; +} + +.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { + background: lighten($ui-secondary-color, 10%); +} + +.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { + background: darken($ui-highlight-color, 10%); +} + +// Change the background colors of modals +.actions-modal, +.boost-modal, +.confirmation-modal, +.mute-modal, +.report-modal, +.embed-modal, +.error-modal, +.onboarding-modal { + background: $ui-base-color; +} + +.boost-modal__action-bar, +.confirmation-modal__action-bar, +.mute-modal__action-bar, +.onboarding-modal__paginator, +.error-modal__footer { + background: darken($ui-base-color, 6%); + + .onboarding-modal__nav, + .error-modal__nav { + &:hover, + &:focus, + &:active { + background-color: darken($ui-base-color, 12%); + } + } +} + +// Change the default color used for the text in an empty column or on the error column +.empty-column-indicator, +.error-column { + color: lighten($ui-base-color, 60%); +} + +// Change the default colors used on some parts of the profile pages +.activity-stream-tabs { + + background: $account-background-color; + + a { + &.active { + color: $ui-primary-color; + } + } + +} + +.activity-stream { + + .entry { + background: $account-background-color; + } + + .status.light { + + .status__content { + color: $primary-text-color; + } + + .display-name { + strong { + color: $primary-text-color; + } + } + + } + +} + +.accounts-grid { + .account-grid-card { + + .controls { + .icon-button { + color: $ui-secondary-color; + } + } + + .name { + a { + color: $primary-text-color; + } + } + + .username { + color: $ui-secondary-color; + } + + .account__header__content { + color: $primary-text-color; + } + + } +} + diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss b/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss new file mode 100644 index 000000000..36f51f067 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss @@ -0,0 +1,36 @@ +// Dependent colors +$black: #000000; +$white: #ffffff; + +$classic-base-color: #282c37; +$classic-primary-color: #9baec8; +$classic-secondary-color: #d9e1e8; +$classic-highlight-color: #2b90d9; + +$ui-base-color: $classic-secondary-color !default; +$ui-base-lighter-color: darken($ui-base-color, 57%); +$ui-highlight-color: $classic-highlight-color !default; +$ui-primary-color: $classic-primary-color !default; +$ui-secondary-color: $classic-base-color !default; + +$primary-text-color: $black !default; +$darker-text-color: $classic-base-color !default; +$dark-text-color: #444b5d; +$action-button-color: #606984; + +$base-overlay-background: $white !default; + +$inverted-text-color: $black !default; +$lighter-text-color: $classic-base-color !default; +$light-text-color: #444b5d; + +$account-background-color: $white !default; + +//Invert darkened and lightened colors +@function darken($color, $amount) { + @return hsl(hue($color), saturation($color), lightness($color) + $amount); +} + +@function lighten($color, $amount) { + @return hsl(hue($color), saturation($color), lightness($color) - $amount); +} -- cgit From f1a73fd5f414ebbfbcb2f1484be9dcb083a72c0f Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Tue, 4 Sep 2018 13:46:30 +0200 Subject: Outline white/grey/blue emojis --- app/javascript/flavours/glitch/styles/mastodon-light/variables.scss | 2 ++ 1 file changed, 2 insertions(+) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss b/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss index 36f51f067..1b060b58d 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss @@ -34,3 +34,5 @@ $account-background-color: $white !default; @function lighten($color, $amount) { @return hsl(hue($color), saturation($color), lightness($color) - $amount); } + +$emojis-requiring-outlines: 'alien' 'baseball' 'chains' 'chicken' 'cloud' 'crescent_moon' 'dash' 'dove_of_peace' 'eyes' 'first_quarter_moon' 'first_quarter_moon_with_face' 'fish_cake' 'full_moon' 'full_moon_with_face' 'ghost' 'goat' 'grey_exclamation' 'grey_question' 'ice_skate' 'last_quarter_moon' 'last_quarter_moon_with_face' 'lightning' 'loud_sound' 'moon' 'mute' 'page_with_curl' 'rain_cloud' 'ram' 'rice' 'rice_ball' 'rooster' 'sheep' 'skull' 'skull_and_crossbones' 'snow_cloud' 'sound' 'speaker' 'speech_balloon' 'thought_balloon' 'volleyball' 'waning_crescent_moon' 'waning_gibbous_moon' 'waving_white_flag' 'waxing_crescent_moon' 'white_circle' 'white_large_square' 'white_medium_small_square' 'white_medium_square' 'white_small_square' 'wind_blowing_face'; -- cgit From 3d5a789bbb890ffb4e9c63fa436f9db9b7cb70db Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Tue, 4 Sep 2018 18:11:13 +0200 Subject: Fix “sensitive” media warning and upload form colors in Mastodon-light MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../glitch/styles/mastodon-light/diff.scss | 24 ++++++++++++++++++++++ 1 file changed, 24 insertions(+) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss index 00d2411a1..aba8baf70 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss @@ -82,6 +82,12 @@ } +// Change the background colors of media and video spoilers +.media-spoiler, +.video-player__spoiler { + background: $ui-base-color; +} + // Change the colors used in the dropdown menu .dropdown-menu { background: $ui-base-color; @@ -147,6 +153,24 @@ } +.composer--upload_form--actions .icon-button { + color: lighten($white, 7%); + + &:active, + &:focus, + &:hover { + color: $white; + } +} + +.composer--upload_form--item > div input { + color: lighten($white, 7%); + + &::placeholder { + color: lighten($white, 10%); + } +} + .dropdown-menu__separator { border-bottom-color: lighten($ui-base-color, 12%); } -- cgit From c0275cdcb2a4191da2e09bed77ccb2a271888d04 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Tue, 4 Sep 2018 18:25:28 +0200 Subject: Fix interactions between CW and sensitive flag when spoilersAlwaysOn is set --- app/javascript/flavours/glitch/features/composer/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/features/composer/index.js b/app/javascript/flavours/glitch/features/composer/index.js index bc409f0a3..77f9ee0c1 100644 --- a/app/javascript/flavours/glitch/features/composer/index.js +++ b/app/javascript/flavours/glitch/features/composer/index.js @@ -485,8 +485,8 @@ class Composer extends React.Component { onUpload={onUpload} privacy={privacy} resetFileKey={resetFileKey} - sensitive={sensitive} - spoiler={spoiler} + sensitive={sensitive || (spoilersAlwaysOn && spoilerText && spoilerText.length > 0)} + spoiler={spoilersAlwaysOn ? (spoilerText && spoilerText.length > 0) : spoiler} /> Date: Tue, 4 Sep 2018 22:34:52 +0200 Subject: Fix videos being cropped --- app/javascript/flavours/glitch/styles/components/media.scss | 1 - app/javascript/flavours/glitch/styles/components/status.scss | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss index ef7525941..40a144de4 100644 --- a/app/javascript/flavours/glitch/styles/components/media.scss +++ b/app/javascript/flavours/glitch/styles/components/media.scss @@ -298,7 +298,6 @@ max-width: 100vw; max-height: 80vh; z-index: 1; - object-fit: cover; position: relative; } diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index fbc26ed2a..b841d73c4 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -736,7 +736,7 @@ .status__video-player-video { height: 100%; - object-fit: cover; + object-fit: contain; position: relative; top: 50%; transform: translateY(-50%); -- cgit From d8b2f15b23773880ffd5cee52b8c9a78c2e2bc53 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Tue, 4 Sep 2018 18:50:45 +0200 Subject: Pause video playback if toot is collapsed or CWs folded (fixes #146) --- app/javascript/flavours/glitch/components/status.js | 1 + app/javascript/flavours/glitch/features/video/index.js | 7 +++++++ 2 files changed, 8 insertions(+) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js index 9f47abfef..f3709f653 100644 --- a/app/javascript/flavours/glitch/components/status.js +++ b/app/javascript/flavours/glitch/components/status.js @@ -430,6 +430,7 @@ export default class Status extends ImmutablePureComponent { sensitive={status.get('sensitive')} letterbox={settings.getIn(['media', 'letterbox'])} fullwidth={settings.getIn(['media', 'fullwidth'])} + preventPlayback={isCollapsed || !isExpanded} onOpenVideo={this.handleOpenVideo} />)} diff --git a/app/javascript/flavours/glitch/features/video/index.js b/app/javascript/flavours/glitch/features/video/index.js index 7e284a0bc..44aba797c 100644 --- a/app/javascript/flavours/glitch/features/video/index.js +++ b/app/javascript/flavours/glitch/features/video/index.js @@ -101,6 +101,7 @@ export default class Video extends React.PureComponent { fullwidth: PropTypes.bool, detailed: PropTypes.bool, inline: PropTypes.bool, + preventPlayback: PropTypes.bool, intl: PropTypes.object.isRequired, }; @@ -215,6 +216,12 @@ export default class Video extends React.PureComponent { document.removeEventListener('MSFullscreenChange', this.handleFullscreenChange, true); } + componentDidUpdate (prevProps) { + if (this.video && this.state.revealed && this.props.preventPlayback && !prevProps.preventPlayback) { + this.video.pause(); + } + } + handleFullscreenChange = () => { this.setState({ fullscreen: isFullscreen() }); } -- cgit From 77e7da7d0dee3988666a410af665f19ee4f29bc7 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Wed, 5 Sep 2018 11:36:24 +0200 Subject: Port SCSS changes from 78fa926ed560e6a9738144bec7e152fa42104139 --- app/javascript/flavours/glitch/styles/stream_entries.scss | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/styles/stream_entries.scss b/app/javascript/flavours/glitch/styles/stream_entries.scss index cf82be073..9e8ad268b 100644 --- a/app/javascript/flavours/glitch/styles/stream_entries.scss +++ b/app/javascript/flavours/glitch/styles/stream_entries.scss @@ -3,6 +3,7 @@ border-radius: 4px; overflow: hidden; margin-bottom: 10px; + text-align: left; @media screen and (max-width: $no-gap-breakpoint) { margin-bottom: 0; @@ -63,6 +64,10 @@ } } } + + &--highlighted .entry { + background: lighten($ui-base-color, 8%); + } } .button.logo-button { -- cgit From 4b29a41f1d2ec02e8b5dc19134c4d63fd6465952 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Wed, 5 Sep 2018 11:42:04 +0200 Subject: Port SCSS changes from 85bb32c410a975bf6154a78a82797f82713e2428 --- app/javascript/flavours/glitch/styles/stream_entries.scss | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/styles/stream_entries.scss b/app/javascript/flavours/glitch/styles/stream_entries.scss index 9e8ad268b..6d90da7ff 100644 --- a/app/javascript/flavours/glitch/styles/stream_entries.scss +++ b/app/javascript/flavours/glitch/styles/stream_entries.scss @@ -37,7 +37,8 @@ &:last-child { .detailed-status, - .status { + .status, + .load-more { border-bottom: 0; border-radius: 0 0 4px 4px; } @@ -45,13 +46,15 @@ &:first-child { .detailed-status, - .status { + .status, + .load-more { border-radius: 4px 4px 0 0; } &:last-child { .detailed-status, - .status { + .status, + .load-more { border-radius: 4px; } } @@ -59,7 +62,8 @@ @media screen and (max-width: 740px) { .detailed-status, - .status { + .status, + .load-more { border-radius: 0 !important; } } -- cgit From 258e8b77349a307f9f8ab923fcd0ba4fdaf001a6 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Wed, 5 Sep 2018 11:42:54 +0200 Subject: Port SCSS changes from 19b07ba260a64b300a81890119af0970df0eb994 --- app/javascript/flavours/glitch/styles/stream_entries.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/styles/stream_entries.scss b/app/javascript/flavours/glitch/styles/stream_entries.scss index 6d90da7ff..c458fcb79 100644 --- a/app/javascript/flavours/glitch/styles/stream_entries.scss +++ b/app/javascript/flavours/glitch/styles/stream_entries.scss @@ -110,6 +110,18 @@ } } + &.button--destructive { + &:active, + &:focus, + &:hover { + background: $error-red; + + svg path:last-child { + fill: $error-red; + } + } + } + @media screen and (max-width: $no-gap-breakpoint) { svg { display: none; -- cgit From 7f2f59dae64f927ca6a5719a7d7589d18e304310 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Wed, 5 Sep 2018 11:46:01 +0200 Subject: Fix public profile's “show more” links styling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/javascript/flavours/glitch/styles/components/index.scss | 2 ++ 1 file changed, 2 insertions(+) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 36417cde8..834839632 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -837,8 +837,10 @@ line-height: inherit; margin: 0; padding: 15px; + box-sizing: border-box; width: 100%; clear: both; + text-decoration: none; &:hover { background: lighten($ui-base-color, 2%); -- cgit