Roll up changes for 2.7.0 (also on feature branches)

app/javascript/mastodon/components/status.js

@@ -308,14 +308,15 @@ class Status extends ImmutablePureComponent {
 
             <StatusContent status={status} onClick={this.handleClick} expanded={!status.get('hidden')} onExpandedToggle={this.handleExpandedToggle} collapsable />
 
-            {media}
-
             {showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) && (
               <button className='status__content__read-more-button' onClick={this.handleClick}>
+                <i className='fa fa-fw fa-sort-amount-desc status__prepend-icon' />
                 <FormattedMessage id='status.show_thread' defaultMessage='Show thread' />
               </button>
             )}
 
+            {media}
+
             <StatusActionBar status={status} account={account} {...other} />
           </div>
         </div>

app/javascript/mastodon/components/status_action_bar.js

@@ -211,7 +211,7 @@ class StatusActionBar extends ImmutablePureComponent {
 
     return (
       <div className='status__action-bar'>
-        <div className='status__action-bar__counter'><IconButton className='status__action-bar-button' disabled={anonymousAccess} title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} />/div>
+        <IconButton className='status__action-bar-button' disabled={anonymousAccess} title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} />
         <IconButton className='status__action-bar-button' disabled={anonymousAccess || !publicStatus} active={status.get('reblogged')} pressed={status.get('reblogged')} title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
         <IconButton className='status__action-bar-button star-icon' disabled={anonymousAccess} animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='floppy-o' onClick={this.handleFavouriteClick} />
         {shareButton}

app/javascript/styles/cybre-base.scss

@@ -33,6 +33,16 @@
   }
 }
 
+/* Less emphatic show more */
+.status__content__read-more-button {
+  font-size: 14px;
+  color: $dark-text-color;
+
+  .status__prepend-icon {
+    padding-right: 4px;
+  }
+}
+
 /* Show a little arrowey thing after the time in a
  * status to signal that you can click it to see
  * a detailed view */

app/javascript/styles/cybre-light.scss

@@ -7,6 +7,7 @@ $ui-secondary-color: #ead0d6; // "lightest"
 $ui-primary-color: #bf5677; // "lighter"
 $ui-highlight-color: #bf5677; // "vibrant"
 $primary-text-color: #382b32;
+$dark-text-color: #ca748f;
 $secondary-text-color: #382b32;
 
 $header-color: $ui-primary-color;
@@ -761,6 +762,16 @@ button.icon-button {
           }
         }
       }
+      a {
+        &.selected {
+          background-color: $ui-primary-color;
+          color: $white;
+
+          &:hover {
+            background-color: lighten($ui-primary-color, 10%);
+          }
+        }
+      }
     }
   }
 }

app/javascript/styles/win95.scss

@@ -92,6 +92,9 @@ $ui-highlight-color: $win95-window-header;
 
 @import 'cybre-base';
 
+html {
+  scrollbar-color: $win95-mid-grey transparent;
+}
 
 body {
   font-size:13px;
@@ -112,7 +115,7 @@ body.admin {
 
 .tabs-bar {
   background: $win95-bg;
-  @include win95-outset()
+  @include win95-outset();
   height: 30px;
 }
 
@@ -190,7 +193,7 @@ body.admin {
 
 .column > .scrollable {
   background: $win95-bg;
-  @include win95-border-outset()
+  @include win95-border-outset();
   border-top-width:0px;
 }
 
@@ -204,7 +207,7 @@ body.admin {
   padding:0px;
   font-size:13px;
   background:#7f7f7f;
-  @include win95-border-outset()
+  @include win95-border-outset();
   border-bottom-width:0px;
   color:white;
   font-weight:bold;
@@ -246,7 +249,7 @@ body.admin {
 .column-header__button {
   background: $win95-bg;
   color: black;
-  @include win95-outset()
+  @include win95-outset();
 
   line-height:0px;
   font-size:14px;
@@ -271,7 +274,7 @@ body.admin {
   max-height: 20px;
   min-height: unset;
   margin: 2px;
-  @include win95-outset()
+  @include win95-outset();
   font-size: 13px;
   line-height: 17px;
   font-weight:bold;
@@ -284,7 +287,7 @@ body.admin {
 .column-back-button {
   background:$win95-bg;
   color:black;
-  @include win95-outset()
+  @include win95-outset();
   font-size:13px;
   font-weight:bold;
 
@@ -413,7 +416,7 @@ body.admin {
 
 .text-btn {
   background-color:$win95-bg;
-  @include win95-outset()
+  @include win95-outset();
   padding:4px;
 }
 
@@ -451,12 +454,11 @@ body.admin {
 .missing-indicator {
   background-color:$win95-bg;
   color:black;
-  @include win95-outset()
+  @include win95-outset();
 }
 
 .missing-indicator > div {
-  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAACXBIWXMAAC4jAAAuIwF4pT92AAAAF3pUWHRUaXRsZQAACJnLyy9Jyy/NSwEAD5IDblIFOhoAAAAXelRYdEF1dGhvcgAACJlLzijKz0vMAQALmgLoDsFj8gAAAQpJREFUOMuVlD0OwjAMhd2oQl04Axfo0IGBgYELcAY6cqQuSO0ZOEAZGBg6VKg74gwsEaoESRVHjusI8aQqzY8/PbtOEz1qkFSn2YevlaNOpLMJh2DwvixhuXtOa6/LCh51DUMEFkAsgAZD207Doin8mQ562JpRE5CHBAAhmIqD1L8AqzUUUJkxc6kr3AgAJ+NuvIWRdk7WcrKl0AUqcIBBHOiEbpS4m27mIL5Onfg3k0rgggeQuS2sDOGSahKR+glgqaGLgUJs951NN1q9D72cQqQWR9cr3sm9YcEssEuz6eEuZh2bu0aSOhQ1MBezu2O/+TVSvEFII3qLsZWrSA2AAUQIh1HpyP/kC++zjVSMj6ntAAAAAElFTkSuQmCC')
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAACXBIWXMAAC4jAAAuIwF4pT92AAAAF3pUWHRUaXRsZQAACJnLyy9Jyy/NSwEAD5IDblIFOhoAAAAXelRYdEF1dGhvcgAACJlLzijKz0vMAQALmgLoDsFj8gAAAQpJREFUOMuVlD0OwjAMhd2oQl04Axfo0IGBgYELcAY6cqQuSO0ZOEAZGBg6VKg74gwsEaoESRVHjusI8aQqzY8/PbtOEz1qkFSn2YevlaNOpLMJh2DwvixhuXtOa6/LCh51DUMEFkAsgAZD207Doin8mQ562JpRE5CHBAAhmIqD1L8AqzUUUJkxc6kr3AgAJ+NuvIWRdk7WcrKl0AUqcIBBHOiEbpS4m27mIL5Onfg3k0rgggeQuS2sDOGSahKR+glgqaGLgUJs951NN1q9D72cQqQWR9cr3sm9YcEssEuz6eEuZh2bu0aSOhQ1MBezu2O/+TVSvEFII3qLsZWrSA2AAUQIh1HpyP/kC++zjVSMj6ntAAAAAElFTkSuQmCC') no-repeat;
-    no-repeat;
   background-position:center center;
 }
 
@@ -466,6 +468,35 @@ body.admin {
   color: black;
 }
 
+.notification__filter-bar {
+  background: $win95-bg;
+  @include win95-border-outset-sides-only();
+  padding-top: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  border-bottom: 2px solid #efefef;
+  overflow-y: visible;
+
+  button {
+    background: transparent;
+    color: black;
+    padding: 4px 0;
+    align-self: end;
+    @include win95-tab();
+
+    &.active {
+      color: black;
+      top: 2px;
+      padding:8px 0;
+      background-color: $win95-bg;
+
+      &::before, &::after {
+        display:none;
+      }
+    }
+  }
+}
+
 .status__wrapper {
   border: 2px groove $win95-bg;
   margin:4px;
@@ -484,6 +515,10 @@ body.admin {
   &:focus, &:active {
     background:$win95-bg;
   }
+
+  &:not(.read) {
+    background: white;
+  }
 }
 .focusable:focus .status.status-direct {
   background:$win95-bg;
@@ -494,6 +529,14 @@ body.admin {
   .status__wrapper:focus, .status__content__text:focus {
     background-color: $win95-bg;
   }
+
+  .status.status-direct, .detailed-status {
+    &:not(.read) {
+      .status__content:focus {
+        background-color: white;
+      }
+    }
+  }
 }
 
 .status__content, .reply-indicator__content {
@@ -541,10 +584,6 @@ body.admin {
   color:blue;
 }
 
-.status__content {
-  padding-bottom: 40px;
-}
-
 .focusable:focus {
   background: $win95-bg;
   .detailed-status__action-bar {
@@ -601,7 +640,7 @@ body.admin {
 
 .icon-button {
   background:$win95-bg;
-  @include win95-border-outset()
+  @include win95-border-outset();
   padding:0px 0px 0px 0px;
   margin-right:4px;
 
@@ -635,7 +674,7 @@ body.admin {
 
 .icon-button.star-icon > i {
   background:$win95-bg;
-  @include win95-border-outset()
+  @include win95-border-outset();
   padding-bottom:3px;
 }
 
@@ -662,15 +701,15 @@ body.admin {
   padding-right:25px;
 }
 
-.status-card {
+.status-card, .status-card.compact, a.status-card, a.status-card.compact {
   border-radius:0px;
   background:white;
   border: 1px solid black;
   color:black;
-}
 
-.status-card:hover {
+  &:hover {
-  background-color:white;
+    background-color:white;
+  }
 }
 
 .status-card__title {
@@ -712,7 +751,7 @@ body.admin {
 
 .reply-indicator__content .status__content__spoiler-link, .status__content .status__content__spoiler-link {
   background:$win95-bg;
-  @include win95-outset()
+  @include win95-outset();
 }
 
 .reply-indicator__content .status__content__spoiler-link:hover, .status__content .status__content__spoiler-link:hover {
@@ -744,7 +783,7 @@ body.admin {
 
 .drawer__header {
   background: $win95-bg;
-  @include win95-border-outset()
+  @include win95-border-outset();
   justify-content:left;
   margin-bottom:0px;
   padding-bottom:2px;
@@ -753,7 +792,7 @@ body.admin {
 
 .drawer__tab {
   color:black;
-  @include win95-outset()
+  @include win95-outset();
   padding:5px;
   margin:2px;
   flex: 0 0 auto;
@@ -969,7 +1008,7 @@ body.admin {
 {
   box-shadow:unset;
   color:black;
-  @include win95-outset()
+  @include win95-outset();
   background: $win95-bg;
 }
 
@@ -981,32 +1020,34 @@ body.admin {
   font-weight:bold;
 }
 
-.compose-form__warning::before {
+.compose-form {
-  content:"Tip:";
+  .compose-form__warning::before {
-  font-weight:bold;
+    content:"Tip:";
-  display:block;
+    font-weight:bold;
-  position:absolute;
+    display:block;
-  top:-10px;
+    position:absolute;
-  background-color:$win95-bg;
+    top:-10px;
-  font-size:11px;
+    background-color:$win95-bg;
-  padding: 0px 5px;
+    font-size:11px;
-}
+    padding: 0px 5px;
+  }
 
-.compose-form__warning {
+  .compose-form__warning {
-  position:relative;
+    position:relative;
-  box-shadow:unset;
+    box-shadow:unset;
-  border:2px groove $win95-bg;
+    border:2px groove $win95-bg;
-  background-color:$win95-bg;
+    background-color:$win95-bg;
-  color:black;
+    color:black;
-}
+  }
 
-.compose-form__warning a {
+  .compose-form__warning a {
-  color:blue;
+    color:blue;
-}
+  }
 
-.compose-form__warning strong {
+  .compose-form__warning strong {
-  color:black;
+    color:black;
-  text-decoration:underline;
+    text-decoration:underline;
+  }
 }
 
 .compose-form__buttons button.active:last-child {
@@ -1077,7 +1118,7 @@ body.admin {
 
 .button {
   background-color:$win95-bg;
-  @include win95-outset()
+  @include win95-outset();
   border-radius:0px;
   color:black;
   font-weight:bold;
@@ -1389,7 +1430,7 @@ body.admin {
   background-image: url("../images/icon_tos.png");
   &:hover { background-image: url("../images/icon_tos.png"); }
 }
-.getting-started__footer ul li a[href="https://github.com/tootsuite/documentation#documentation"] {
+.getting-started__footer ul li a[href="https://docs.joinmastodon.org"] {
   background-image: url("../images/icon_docs.png");
   &:hover { background-image: url("../images/icon_docs.png"); }
 }
@@ -1638,7 +1679,7 @@ body.admin {
 
 .embed-modal, .error-modal, .onboarding-modal,
 .actions-modal, .boost-modal, .confirmation-modal, .report-modal {
-  @include win95-outset()
+  @include win95-outset();
   background:$win95-bg;
 }
 
@@ -1762,7 +1803,7 @@ body.admin {
 .admin-wrapper {
   position:relative;
   background: $win95-bg;
-  @include win95-outset()
+  @include win95-outset();
   width:70vw;
   height:80vh;
   margin:10vh auto;
@@ -1799,7 +1840,7 @@ body.admin {
 .admin-wrapper .content-wrapper {
   flex: 1 1 auto;
   width:calc(100% - 20px);
-  @include win95-border-outset()
+  @include win95-border-outset();
   position:relative;
   margin-left:10px;
   margin-right:10px;
@@ -2053,7 +2094,7 @@ a.table-action-link:hover,
 .simple_form .block-button
 {
   background: $win95-bg;
-  @include win95-outset()
+  @include win95-outset();
   color:black;
   font-weight: normal;
 

config/locales/en.yml

@@ -934,6 +934,7 @@ en:
     mastodon: Mastodon
     mastodon-light: Mastodon (light)
     win95: Windows 95
+    light: Cybre Lite
   time:
     formats:
       default: "%b %d, %Y, %H:%M"

config/locales/simple_form.en-CY.yml

@@ -2,63 +2,124 @@
 en-CY:
   simple_form:
     hints:
+      account_warning_preset:
+        text: You can use ping syntax, such as URLs, hashtags and mentions
+      admin_account_action:
+        send_email_notification: The user will receive an explanation of what happened with their account
+        text_html: Optional. You can use ping syntax. You can <a href="%{path}">add warning presets</a> to save time
+        type_html: Choose what to do with <strong>%{acct}</strong>
+        warning_preset_id: Optional. You can still add custom text to end of the preset
       defaults:
-        avatar: PNG, GIF or JPG. At most 2MB. Will be downscaled to 120x120px
+        autofollow: People who sign up through the invite will automatically follow you
-        display_name:
+        avatar: PNG, GIF or JPG. At most %{size}. Will be downscaled to %{dimensions}px
-          one: <span class="name-counter">1</span> character left
+        bot: This account mainly performs automated actions and might not be monitored
-          other: <span class="name-counter">%{count}</span> characters left
+        context: One or multiple contexts where the filter should apply
-        header: PNG, GIF or JPG. At most 2MB. Will be downscaled to 700x335px
+        digest: Only sent after a long period of inactivity and only if you have received any personal messages in your absence
-        locked: Requires you to manually approve followers and defaults ping privacy to followers-only
+        discoverable_html: The <a href="%{path}" target="_blank">directory</a> lets people find accounts based on interests and activity. Requires at least %{min_followers} followers
-        note:
+        email: You will be sent a confirmation e-mail
-          one: <span class="note-counter">1</span> character left
+        fields: You can have up to 4 items displayed as a table on your profile
-          other: <span class="note-counter">%{count}</span> characters left
+        header: PNG, GIF or JPG. At most %{size}. Will be downscaled to %{dimensions}px
+        inbox_url: Copy the URL from the frontpage of the relay you want to use
+        irreversible: Filtered pings will disappear irreversibly, even if filter is later removed
+        locale: The language of the user interface, e-mails and push notifications
+        locked: Requires you to manually approve followers
+        password: Use at least 8 characters
+        phrase: Will be matched regardless of casing in text or content warning of a pings
+        scopes: Which APIs the application will be allowed to access. If you select a top-level scope, you don't need to select individual ones.
+        setting_aggregate_reblogs: Do not show new relays for pings that have been recently relayed (only affects newly-received relays)
+        setting_default_language: The language of your pings can be detected automatically, but it's not always accurate
+        setting_display_media_default: Hide media marked as sensitive
+        setting_display_media_hide_all: Always hide all media
+        setting_display_media_show_all: Always show media marked as sensitive
+        setting_hide_network: Who you follow and who follows you will not be shown on your profile
         setting_noindex: Affects your public profile and status pages
         setting_theme: Affects how Mastodon looks when you're logged in from any device.
+        username: Your username will be unique on %{domain}
+        whole_word: When the keyword or phrase is alphanumeric only, it will only be applied if it matches the whole word
       imports:
         data: CSV file exported from another Mastodon instance
       sessions:
-        otp: Enter the Two-factor code from your phone or use one of your recovery codes.
+        otp: 'Enter the two-factor code generated by your phone app or use one of your recovery codes:'
       user:
-        filtered_languages: Selected languages will be removed from your public timelines.
+        chosen_languages: When checked, only pings in selected languages will be displayed in public timelines
     labels:
+      account:
+        fields:
+          name: Label
+          value: Content
+      account_warning_preset:
+        text: Preset text
+      admin_account_action:
+        send_email_notification: Notify the user per e-mail
+        text: Custom warning
+        type: Action
+        types:
+          disable: Disable
+          none: Do nothing
+          silence: Silence
+          suspend: Suspend and irreversibly delete account data
+        warning_preset_id: Use a warning preset
       defaults:
+        autofollow: Invite to follow your account
         avatar: Avatar
+        bot: This is a bot account
+        chosen_languages: Filter languages
         confirm_new_password: Confirm new password
         confirm_password: Confirm password
+        context: Filter contexts
         current_password: Current password
         data: Data
+        discoverable: List this account on the directory
         display_name: Display name
         email: E-mail address
-        filtered_languages: Filtered languages
+        expires_in: Expire after
+        fields: Profile metadata
         header: Header
-        locale: Language
+        inbox_url: URL of the relay inbox
+        irreversible: Drop instead of hide
+        locale: Interface language
         locked: Lock account
+        max_uses: Max number of uses
         new_password: New password
         note: Bio
         otp_attempt: Two-factor code
         password: Password
+        phrase: Keyword or phrase
+        setting_aggregate_reblogs: Group relays in timelines
         setting_auto_play_gif: Auto-play animated GIFs
-        setting_boost_modal: Show confirmation dialog before boosting
+        setting_boost_modal: Show confirmation dialog before relaying
+        setting_default_language: Posting language
         setting_default_privacy: Post privacy
         setting_default_sensitive: Always mark media as sensitive
         setting_delete_modal: Show confirmation dialog before deleting a ping
+        setting_display_media: Media display
+        setting_display_media_default: Default
+        setting_display_media_hide_all: Hide all
+        setting_display_media_show_all: Show all
+        setting_expand_spoilers: Always expand pings marked with content warnings
+        setting_hide_network: Hide your network
         setting_noindex: Opt-out of search engine indexing
-        setting_system_font_ui: Use a heuristic-based approximation of what Mastodon thinks your system font might be
+        setting_reduce_motion: Reduce motion in animations
+        setting_system_font_ui: Use system's default font
         setting_theme: Site theme
         setting_unfollow_modal: Show confirmation dialog before unfollowing someone
         severity: Severity
         type: Import type
         username: Username
+        username_or_email: Username or Email
+        whole_word: Whole word
       interactions:
         must_be_follower: Block notifications from non-followers
         must_be_following: Block notifications from people you don't follow
+        must_be_following_dm: Block direct messages from people you don't follow
       notification_emails:
         digest: Send digest e-mails
-        favourite: Send e-mail when someone florps your ping
+        favourite: Send e-mail when someone favourites your status
         follow: Send e-mail when someone follows you
         follow_request: Send e-mail when someone requests to follow you
         mention: Send e-mail when someone mentions you
-        reblog: Send e-mail when someone boosts your ping
+        reblog: Send e-mail when someone relays your status
+        report: Send e-mail when a new report is submitted
     'no': 'No'
     required:
       mark: "*"