From b972478812316da2f5c0d24c60386d408e027424 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 13 Oct 2018 01:51:30 +0200 Subject: Improve style of notice/alert messages (#8973) --- app/javascript/styles/mastodon-light/diff.scss | 14 -------------- app/javascript/styles/mastodon/forms.scss | 13 ++++++++++++- 2 files changed, 12 insertions(+), 15 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss index ac161a004..78bc2dbb6 100644 --- a/app/javascript/styles/mastodon-light/diff.scss +++ b/app/javascript/styles/mastodon-light/diff.scss @@ -286,20 +286,6 @@ } } -.flash-message { - box-shadow: none; - - &.notice { - background: rgba($success-green, 0.5); - color: lighten($success-green, 12%); - } - - &.alert { - background: rgba($error-red, 0.5); - color: lighten($error-red, 12%); - } -} - .simple_form, .table-form { .warning { diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index be2bf7cea..eb94f2273 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -460,9 +460,20 @@ code { border-radius: 4px; padding: 15px 10px; margin-bottom: 30px; - box-shadow: 0 0 5px rgba($base-shadow-color, 0.2); text-align: center; + &.notice { + border: 1px solid rgba($valid-value-color, 0.5); + background: rgba($valid-value-color, 0.25); + color: $valid-value-color; + } + + &.alert { + border: 1px solid rgba($error-value-color, 0.5); + background: rgba($error-value-color, 0.25); + color: $error-value-color; + } + p { margin-bottom: 15px; } -- cgit From efd09e2ebba7e9f0135bd47c44a77e2fc421aa67 Mon Sep 17 00:00:00 2001 From: Masoud Abkenar Date: Mon, 15 Oct 2018 04:39:20 +0200 Subject: undo part of PR 8202 to fix RTL (#8979) --- app/javascript/styles/mastodon/stream_entries.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/stream_entries.scss b/app/javascript/styles/mastodon/stream_entries.scss index 14306c8bd..d8bd30377 100644 --- a/app/javascript/styles/mastodon/stream_entries.scss +++ b/app/javascript/styles/mastodon/stream_entries.scss @@ -3,7 +3,6 @@ border-radius: 4px; overflow: hidden; margin-bottom: 10px; - text-align: left; @media screen and (max-width: $no-gap-breakpoint) { margin-bottom: 0; -- cgit From d35801aaa2ad9d06345efa45cf524113469fdd02 Mon Sep 17 00:00:00 2001 From: Masoud Abkenar Date: Mon, 15 Oct 2018 16:09:08 +0200 Subject: Fixes 8987 broken alignment at "Remote interaction dialog" (#8988) --- app/javascript/styles/mastodon/forms.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index eb94f2273..337941a08 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -562,12 +562,12 @@ code { .oauth-prompt, .follow-prompt { margin-bottom: 30px; - text-align: center; color: $darker-text-color; h2 { font-size: 16px; margin-bottom: 30px; + text-align: center; } strong { -- cgit From f8c1b325410369806eb77a5c8d259971a87a6852 Mon Sep 17 00:00:00 2001 From: Masoud Abkenar Date: Thu, 18 Oct 2018 14:35:49 +0200 Subject: RTL: fix admin account margins in about page (#9005) --- app/javascript/styles/mastodon/rtl.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss index 9644f8e02..61a20013e 100644 --- a/app/javascript/styles/mastodon/rtl.scss +++ b/app/javascript/styles/mastodon/rtl.scss @@ -309,3 +309,15 @@ body.rtl { } } } + +.landing-page__information { + .account__display-name { + margin-right: 0; + margin-left: 5px; + } + + .account__avatar-wrapper { + margin-left: 12px; + margin-right: 0; + } +} -- cgit From 65b3804a6ccd40d359616b6157682ff88f85462f Mon Sep 17 00:00:00 2001 From: Masoud Abkenar Date: Thu, 18 Oct 2018 21:19:31 +0200 Subject: RTL: fix domain append at signup form (#9007) --- app/javascript/styles/mastodon/rtl.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss index 61a20013e..49d9765a8 100644 --- a/app/javascript/styles/mastodon/rtl.scss +++ b/app/javascript/styles/mastodon/rtl.scss @@ -219,7 +219,7 @@ body.rtl { padding-right: 0; } - .simple_form .input-with-append .append { + .simple_form .label_input__append { right: auto; left: 0; -- cgit From a38a452481d0f5207bb27ba7a2707c0028d2ac18 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 19 Oct 2018 01:47:29 +0200 Subject: Add unread indicator to conversations (#9009) --- app/controllers/api/v1/conversations_controller.rb | 20 +++++++++++++++++-- app/controllers/api/v1/reports_controller.rb | 1 - app/javascript/mastodon/actions/conversations.js | 11 +++++++++++ .../direct_timeline/components/conversation.js | 14 ++++++++++--- .../containers/conversation_container.js | 8 +++++++- app/javascript/mastodon/reducers/conversations.js | 10 ++++++++++ app/javascript/styles/mastodon/components.scss | 5 +++++ app/models/account_conversation.rb | 2 ++ app/serializers/rest/conversation_serializer.rb | 3 ++- config/initializers/doorkeeper.rb | 2 +- config/routes.rb | 7 ++++++- ...18205649_add_unread_to_account_conversations.rb | 23 ++++++++++++++++++++++ db/schema.rb | 3 ++- 13 files changed, 98 insertions(+), 11 deletions(-) create mode 100644 db/migrate/20181018205649_add_unread_to_account_conversations.rb (limited to 'app/javascript/styles') diff --git a/app/controllers/api/v1/conversations_controller.rb b/app/controllers/api/v1/conversations_controller.rb index 736cb21ca..b19f27ebf 100644 --- a/app/controllers/api/v1/conversations_controller.rb +++ b/app/controllers/api/v1/conversations_controller.rb @@ -3,9 +3,11 @@ class Api::V1::ConversationsController < Api::BaseController LIMIT = 20 - before_action -> { doorkeeper_authorize! :read, :'read:statuses' } + before_action -> { doorkeeper_authorize! :read, :'read:statuses' }, only: :index + before_action -> { doorkeeper_authorize! :write, :'write:conversations' }, except: :index before_action :require_user! - after_action :insert_pagination_headers + before_action :set_conversation, except: :index + after_action :insert_pagination_headers, only: :index respond_to :json @@ -14,8 +16,22 @@ class Api::V1::ConversationsController < Api::BaseController render json: @conversations, each_serializer: REST::ConversationSerializer end + def read + @conversation.update!(unread: false) + render json: @conversation, serializer: REST::ConversationSerializer + end + + def destroy + @conversation.destroy! + render_empty + end + private + def set_conversation + @conversation = AccountConversation.where(account: current_account).find(params[:id]) + end + def paginated_conversations AccountConversation.where(account: current_account) .paginate_by_id(limit_param(LIMIT), params_slice(:max_id, :since_id, :min_id)) diff --git a/app/controllers/api/v1/reports_controller.rb b/app/controllers/api/v1/reports_controller.rb index 726817927..e182a9c6c 100644 --- a/app/controllers/api/v1/reports_controller.rb +++ b/app/controllers/api/v1/reports_controller.rb @@ -1,7 +1,6 @@ # frozen_string_literal: true class Api::V1::ReportsController < Api::BaseController - before_action -> { doorkeeper_authorize! :read, :'read:reports' }, except: [:create] before_action -> { doorkeeper_authorize! :write, :'write:reports' }, only: [:create] before_action :require_user! diff --git a/app/javascript/mastodon/actions/conversations.js b/app/javascript/mastodon/actions/conversations.js index cab05c1ba..aefd2fef7 100644 --- a/app/javascript/mastodon/actions/conversations.js +++ b/app/javascript/mastodon/actions/conversations.js @@ -13,6 +13,8 @@ export const CONVERSATIONS_FETCH_SUCCESS = 'CONVERSATIONS_FETCH_SUCCESS'; export const CONVERSATIONS_FETCH_FAIL = 'CONVERSATIONS_FETCH_FAIL'; export const CONVERSATIONS_UPDATE = 'CONVERSATIONS_UPDATE'; +export const CONVERSATIONS_READ = 'CONVERSATIONS_READ'; + export const mountConversations = () => ({ type: CONVERSATIONS_MOUNT, }); @@ -21,6 +23,15 @@ export const unmountConversations = () => ({ type: CONVERSATIONS_UNMOUNT, }); +export const markConversationRead = conversationId => (dispatch, getState) => { + dispatch({ + type: CONVERSATIONS_READ, + id: conversationId, + }); + + api(getState).post(`/api/v1/conversations/${conversationId}/read`); +}; + export const expandConversations = ({ maxId } = {}) => (dispatch, getState) => { dispatch(expandConversationsRequest()); diff --git a/app/javascript/mastodon/features/direct_timeline/components/conversation.js b/app/javascript/mastodon/features/direct_timeline/components/conversation.js index f9a8d4f72..52e33c3c8 100644 --- a/app/javascript/mastodon/features/direct_timeline/components/conversation.js +++ b/app/javascript/mastodon/features/direct_timeline/components/conversation.js @@ -8,6 +8,7 @@ import DisplayName from '../../../components/display_name'; import Avatar from '../../../components/avatar'; import AttachmentList from '../../../components/attachment_list'; import { HotKeys } from 'react-hotkeys'; +import classNames from 'classnames'; export default class Conversation extends ImmutablePureComponent { @@ -19,8 +20,10 @@ export default class Conversation extends ImmutablePureComponent { conversationId: PropTypes.string.isRequired, accounts: ImmutablePropTypes.list.isRequired, lastStatus: ImmutablePropTypes.map.isRequired, + unread:PropTypes.bool.isRequired, onMoveUp: PropTypes.func, onMoveDown: PropTypes.func, + markRead: PropTypes.func.isRequired, }; handleClick = () => { @@ -28,7 +31,12 @@ export default class Conversation extends ImmutablePureComponent { return; } - const { lastStatus } = this.props; + const { lastStatus, unread, markRead } = this.props; + + if (unread) { + markRead(); + } + this.context.router.history.push(`/statuses/${lastStatus.get('id')}`); } @@ -41,7 +49,7 @@ export default class Conversation extends ImmutablePureComponent { } render () { - const { accounts, lastStatus, lastAccount } = this.props; + const { accounts, lastStatus, lastAccount, unread } = this.props; if (lastStatus === null) { return null; @@ -61,7 +69,7 @@ export default class Conversation extends ImmutablePureComponent { return ( -
+
{accounts.map(account => )}
diff --git a/app/javascript/mastodon/features/direct_timeline/containers/conversation_container.js b/app/javascript/mastodon/features/direct_timeline/containers/conversation_container.js index 4166ee2ac..e2e2e3afb 100644 --- a/app/javascript/mastodon/features/direct_timeline/containers/conversation_container.js +++ b/app/javascript/mastodon/features/direct_timeline/containers/conversation_container.js @@ -1,5 +1,6 @@ import { connect } from 'react-redux'; import Conversation from '../components/conversation'; +import { markConversationRead } from '../../../actions/conversations'; const mapStateToProps = (state, { conversationId }) => { const conversation = state.getIn(['conversations', 'items']).find(x => x.get('id') === conversationId); @@ -7,9 +8,14 @@ const mapStateToProps = (state, { conversationId }) => { return { accounts: conversation.get('accounts').map(accountId => state.getIn(['accounts', accountId], null)), + unread: conversation.get('unread'), lastStatus, lastAccount: lastStatus === null ? null : state.getIn(['accounts', lastStatus.get('account')], null), }; }; -export default connect(mapStateToProps)(Conversation); +const mapDispatchToProps = (dispatch, { conversationId }) => ({ + markRead: () => dispatch(markConversationRead(conversationId)), +}); + +export default connect(mapStateToProps, mapDispatchToProps)(Conversation); diff --git a/app/javascript/mastodon/reducers/conversations.js b/app/javascript/mastodon/reducers/conversations.js index 6b3f22d25..ea39fccee 100644 --- a/app/javascript/mastodon/reducers/conversations.js +++ b/app/javascript/mastodon/reducers/conversations.js @@ -6,6 +6,7 @@ import { CONVERSATIONS_FETCH_SUCCESS, CONVERSATIONS_FETCH_FAIL, CONVERSATIONS_UPDATE, + CONVERSATIONS_READ, } from '../actions/conversations'; import compareId from '../compare_id'; @@ -18,6 +19,7 @@ const initialState = ImmutableMap({ const conversationToMap = item => ImmutableMap({ id: item.id, + unread: item.unread, accounts: ImmutableList(item.accounts.map(a => a.id)), last_status: item.last_status.id, }); @@ -80,6 +82,14 @@ export default function conversations(state = initialState, action) { return state.update('mounted', count => count + 1); case CONVERSATIONS_UNMOUNT: return state.update('mounted', count => count - 1); + case CONVERSATIONS_READ: + return state.update('items', list => list.map(item => { + if (item.get('id') === action.id) { + return item.set('unread', false); + } + + return item; + })); default: return state; } diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 129bde856..24b614a37 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -5503,6 +5503,11 @@ noscript { border-bottom: 1px solid lighten($ui-base-color, 8%); cursor: pointer; + &--unread { + background: lighten($ui-base-color, 8%); + border-bottom-color: lighten($ui-base-color, 12%); + } + &__header { display: flex; margin-bottom: 15px; diff --git a/app/models/account_conversation.rb b/app/models/account_conversation.rb index c12c8d233..b7447d805 100644 --- a/app/models/account_conversation.rb +++ b/app/models/account_conversation.rb @@ -10,6 +10,7 @@ # status_ids :bigint(8) default([]), not null, is an Array # last_status_id :bigint(8) # lock_version :integer default(0), not null +# unread :boolean default(FALSE), not null # class AccountConversation < ApplicationRecord @@ -58,6 +59,7 @@ class AccountConversation < ApplicationRecord def add_status(recipient, status) conversation = find_or_initialize_by(account: recipient, conversation_id: status.conversation_id, participant_account_ids: participants_from_status(recipient, status)) conversation.status_ids << status.id + conversation.unread = status.account_id != recipient.id conversation.save conversation rescue ActiveRecord::StaleObjectError diff --git a/app/serializers/rest/conversation_serializer.rb b/app/serializers/rest/conversation_serializer.rb index 884253f89..b09ca6341 100644 --- a/app/serializers/rest/conversation_serializer.rb +++ b/app/serializers/rest/conversation_serializer.rb @@ -1,7 +1,8 @@ # frozen_string_literal: true class REST::ConversationSerializer < ActiveModel::Serializer - attribute :id + attributes :id, :unread + has_many :participant_accounts, key: :accounts, serializer: REST::AccountSerializer has_one :last_status, serializer: REST::StatusSerializer diff --git a/config/initializers/doorkeeper.rb b/config/initializers/doorkeeper.rb index fe2490b32..367eead6a 100644 --- a/config/initializers/doorkeeper.rb +++ b/config/initializers/doorkeeper.rb @@ -58,6 +58,7 @@ Doorkeeper.configure do optional_scopes :write, :'write:accounts', :'write:blocks', + :'write:conversations', :'write:favourites', :'write:filters', :'write:follows', @@ -76,7 +77,6 @@ Doorkeeper.configure do :'read:lists', :'read:mutes', :'read:notifications', - :'read:reports', :'read:search', :'read:statuses', :follow, diff --git a/config/routes.rb b/config/routes.rb index a2468c9bd..b203e1329 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -261,7 +261,12 @@ Rails.application.routes.draw do resources :streaming, only: [:index] resources :custom_emojis, only: [:index] resources :suggestions, only: [:index, :destroy] - resources :conversations, only: [:index] + + resources :conversations, only: [:index, :destroy] do + member do + post :read + end + end get '/search', to: 'search#index', as: :search diff --git a/db/migrate/20181018205649_add_unread_to_account_conversations.rb b/db/migrate/20181018205649_add_unread_to_account_conversations.rb new file mode 100644 index 000000000..3c28b9a64 --- /dev/null +++ b/db/migrate/20181018205649_add_unread_to_account_conversations.rb @@ -0,0 +1,23 @@ +require Rails.root.join('lib', 'mastodon', 'migration_helpers') + +class AddUnreadToAccountConversations < ActiveRecord::Migration[5.2] + include Mastodon::MigrationHelpers + + disable_ddl_transaction! + + def up + safety_assured do + add_column_with_default( + :account_conversations, + :unread, + :boolean, + allow_null: false, + default: false + ) + end + end + + def down + remove_column :account_conversations, :unread, :boolean + end +end diff --git a/db/schema.rb b/db/schema.rb index f79f26f16..046975ac9 100644 --- a/db/schema.rb +++ b/db/schema.rb @@ -10,7 +10,7 @@ # # It's strongly recommended that you check this file into your version control system. -ActiveRecord::Schema.define(version: 2018_10_10_141500) do +ActiveRecord::Schema.define(version: 2018_10_18_205649) do # These are extensions that must be enabled in order to support this database enable_extension "plpgsql" @@ -22,6 +22,7 @@ ActiveRecord::Schema.define(version: 2018_10_10_141500) do t.bigint "status_ids", default: [], null: false, array: true t.bigint "last_status_id" t.integer "lock_version", default: 0, null: false + t.boolean "unread", default: false, null: false t.index ["account_id", "conversation_id", "participant_account_ids"], name: "index_unique_conversations", unique: true t.index ["account_id"], name: "index_account_conversations_on_account_id" t.index ["conversation_id"], name: "index_account_conversations_on_conversation_id" -- cgit From 301cbcc9802ed85c519e67a01133968bc074c8af Mon Sep 17 00:00:00 2001 From: Masoud Abkenar Date: Fri, 19 Oct 2018 13:16:13 +0200 Subject: RTL: fix user stats in about page (#9018) --- app/javascript/styles/mastodon/rtl.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss index 49d9765a8..2bfd0de3a 100644 --- a/app/javascript/styles/mastodon/rtl.scss +++ b/app/javascript/styles/mastodon/rtl.scss @@ -245,6 +245,10 @@ body.rtl { left: auto; } + .landing-page__call-to-action .row__information-board { + direction: rtl; + } + .landing-page .header .hero .floats .float-1 { left: -120px; right: auto; -- cgit From 065b39e7a460e088fd5afcd48dfc425d0006fee9 Mon Sep 17 00:00:00 2001 From: bsky Date: Sat, 20 Oct 2018 03:35:42 +0900 Subject: Fix admin account avatar margin (#9020) --- app/javascript/styles/mastodon/rtl.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss index 2bfd0de3a..0381e2e02 100644 --- a/app/javascript/styles/mastodon/rtl.scss +++ b/app/javascript/styles/mastodon/rtl.scss @@ -317,11 +317,9 @@ body.rtl { .landing-page__information { .account__display-name { margin-right: 0; - margin-left: 5px; } .account__avatar-wrapper { - margin-left: 12px; - margin-right: 0; + margin-left: 0; } } -- cgit From 029943d59b222e96a2f7839390a5628888249bf6 Mon Sep 17 00:00:00 2001 From: Masoud Abkenar Date: Sat, 20 Oct 2018 01:05:17 +0200 Subject: RTL: fix preferences layout (#9021) --- app/javascript/styles/mastodon/rtl.scss | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss index 0381e2e02..448534b3c 100644 --- a/app/javascript/styles/mastodon/rtl.scss +++ b/app/javascript/styles/mastodon/rtl.scss @@ -196,6 +196,10 @@ body.rtl { right: -2.14285714em; } + .admin-wrapper { + direction: rtl; + } + .admin-wrapper .sidebar ul a i.fa, a.table-action-link i.fa { margin-right: 0; @@ -214,11 +218,32 @@ body.rtl { right: 0; } + .simple_form .input.radio_buttons .radio { + left: auto; + right: 0; + } + + .simple_form .input.radio_buttons .radio > label { + padding-right: 28px; + padding-left: 0; + } + .simple_form .input-with-append .input input { padding-left: 142px; padding-right: 0; } + .simple_form .input.boolean label.checkbox { + left: auto; + right: 0; + } + + .simple_form .input.boolean .label_input, + .simple_form .input.boolean .hint { + padding-left: 0; + padding-right: 28px; + } + .simple_form .label_input__append { right: auto; left: 0; @@ -230,6 +255,10 @@ body.rtl { } } + .simple_form select { + background: darken($ui-base-color, 10%) url("data:image/svg+xml;utf8,") no-repeat left 8px center / auto 16px; + } + .table th, .table td { text-align: right; -- cgit From eb1b9903a6f60d024d71bffd635e6fec7edc59a9 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 20 Oct 2018 02:23:58 +0200 Subject: Redesign direct messages column (#9022) --- .../mastodon/components/avatar_composite.js | 96 ++++++++++++++++++++++ app/javascript/mastodon/components/display_name.js | 19 +++-- app/javascript/mastodon/components/status.js | 23 ++++-- .../direct_timeline/components/conversation.js | 56 +++---------- .../containers/conversation_container.js | 4 +- app/javascript/styles/mastodon/components.scss | 62 ++++---------- 6 files changed, 152 insertions(+), 108 deletions(-) create mode 100644 app/javascript/mastodon/components/avatar_composite.js (limited to 'app/javascript/styles') diff --git a/app/javascript/mastodon/components/avatar_composite.js b/app/javascript/mastodon/components/avatar_composite.js new file mode 100644 index 000000000..4a9a73c51 --- /dev/null +++ b/app/javascript/mastodon/components/avatar_composite.js @@ -0,0 +1,96 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { autoPlayGif } from '../initial_state'; + +export default class AvatarComposite extends React.PureComponent { + + static propTypes = { + accounts: ImmutablePropTypes.list.isRequired, + animate: PropTypes.bool, + size: PropTypes.number.isRequired, + }; + + static defaultProps = { + animate: autoPlayGif, + }; + + renderItem (account, size, index) { + const { animate } = this.props; + + let width = 50; + let height = 100; + let top = 'auto'; + let left = 'auto'; + let bottom = 'auto'; + let right = 'auto'; + + if (size === 1) { + width = 100; + } + + if (size === 4 || (size === 3 && index > 0)) { + height = 50; + } + + if (size === 2) { + if (index === 0) { + right = '2px'; + } else { + left = '2px'; + } + } else if (size === 3) { + if (index === 0) { + right = '2px'; + } else if (index > 0) { + left = '2px'; + } + + if (index === 1) { + bottom = '2px'; + } else if (index > 1) { + top = '2px'; + } + } else if (size === 4) { + if (index === 0 || index === 2) { + right = '2px'; + } + + if (index === 1 || index === 3) { + left = '2px'; + } + + if (index < 2) { + bottom = '2px'; + } else { + top = '2px'; + } + } + + const style = { + left: left, + top: top, + right: right, + bottom: bottom, + width: `${width}%`, + height: `${height}%`, + backgroundSize: 'cover', + backgroundImage: `url(${account.get(animate ? 'avatar' : 'avatar_static')})`, + }; + + return ( +
+ ); + } + + render() { + const { accounts, size } = this.props; + + return ( +
+ {accounts.take(4).map((account, i) => this.renderItem(account, accounts.size, i))} +
+ ); + } + +} diff --git a/app/javascript/mastodon/components/display_name.js b/app/javascript/mastodon/components/display_name.js index c3a9ab921..c2c40cb3f 100644 --- a/app/javascript/mastodon/components/display_name.js +++ b/app/javascript/mastodon/components/display_name.js @@ -1,25 +1,28 @@ import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; -import PropTypes from 'prop-types'; export default class DisplayName extends React.PureComponent { static propTypes = { account: ImmutablePropTypes.map.isRequired, - withAcct: PropTypes.bool, - }; - - static defaultProps = { - withAcct: true, + others: ImmutablePropTypes.list, }; render () { - const { account, withAcct } = this.props; + const { account, others } = this.props; const displayNameHtml = { __html: account.get('display_name_html') }; + let suffix; + + if (others && others.size > 1) { + suffix = `+${others.size}`; + } else { + suffix = @{account.get('acct')}; + } + return ( - {withAcct && @{account.get('acct')}} + {suffix} ); } diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js index 90c689a75..0b23e51f8 100644 --- a/app/javascript/mastodon/components/status.js +++ b/app/javascript/mastodon/components/status.js @@ -3,6 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import Avatar from './avatar'; import AvatarOverlay from './avatar_overlay'; +import AvatarComposite from './avatar_composite'; import RelativeTimestamp from './relative_timestamp'; import DisplayName from './display_name'; import StatusContent from './status_content'; @@ -45,6 +46,8 @@ class Status extends ImmutablePureComponent { static propTypes = { status: ImmutablePropTypes.map, account: ImmutablePropTypes.map, + otherAccounts: ImmutablePropTypes.list, + onClick: PropTypes.func, onReply: PropTypes.func, onFavourite: PropTypes.func, onReblog: PropTypes.func, @@ -60,6 +63,7 @@ class Status extends ImmutablePureComponent { onToggleHidden: PropTypes.func, muted: PropTypes.bool, hidden: PropTypes.bool, + unread: PropTypes.bool, onMoveUp: PropTypes.func, onMoveDown: PropTypes.func, }; @@ -74,6 +78,11 @@ class Status extends ImmutablePureComponent { ] handleClick = () => { + if (this.props.onClick) { + this.props.onClick(); + return; + } + if (!this.context.router) { return; } @@ -158,7 +167,7 @@ class Status extends ImmutablePureComponent { let media = null; let statusAvatar, prepend, rebloggedByText; - const { intl, hidden, featured } = this.props; + const { intl, hidden, featured, otherAccounts, unread } = this.props; let { status, account, ...other } = this.props; @@ -249,9 +258,11 @@ class Status extends ImmutablePureComponent { } } - if (account === undefined || account === null) { + if (otherAccounts) { + statusAvatar = ; + } else if (account === undefined || account === null) { statusAvatar = ; - }else{ + } else { statusAvatar = ; } @@ -269,10 +280,10 @@ class Status extends ImmutablePureComponent { return ( -
+
{prepend} -
+
@@ -281,7 +292,7 @@ class Status extends ImmutablePureComponent { {statusAvatar}
- +
diff --git a/app/javascript/mastodon/features/direct_timeline/components/conversation.js b/app/javascript/mastodon/features/direct_timeline/components/conversation.js index 52e33c3c8..7277b7f0f 100644 --- a/app/javascript/mastodon/features/direct_timeline/components/conversation.js +++ b/app/javascript/mastodon/features/direct_timeline/components/conversation.js @@ -2,13 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import StatusContent from '../../../components/status_content'; -import RelativeTimestamp from '../../../components/relative_timestamp'; -import DisplayName from '../../../components/display_name'; -import Avatar from '../../../components/avatar'; -import AttachmentList from '../../../components/attachment_list'; -import { HotKeys } from 'react-hotkeys'; -import classNames from 'classnames'; +import StatusContainer from '../../../containers/status_container'; export default class Conversation extends ImmutablePureComponent { @@ -19,7 +13,7 @@ export default class Conversation extends ImmutablePureComponent { static propTypes = { conversationId: PropTypes.string.isRequired, accounts: ImmutablePropTypes.list.isRequired, - lastStatus: ImmutablePropTypes.map.isRequired, + lastStatusId: PropTypes.string, unread:PropTypes.bool.isRequired, onMoveUp: PropTypes.func, onMoveDown: PropTypes.func, @@ -31,13 +25,13 @@ export default class Conversation extends ImmutablePureComponent { return; } - const { lastStatus, unread, markRead } = this.props; + const { lastStatusId, unread, markRead } = this.props; if (unread) { markRead(); } - this.context.router.history.push(`/statuses/${lastStatus.get('id')}`); + this.context.router.history.push(`/statuses/${lastStatusId}`); } handleHotkeyMoveUp = () => { @@ -49,44 +43,20 @@ export default class Conversation extends ImmutablePureComponent { } render () { - const { accounts, lastStatus, lastAccount, unread } = this.props; + const { accounts, lastStatusId, unread } = this.props; - if (lastStatus === null) { + if (lastStatusId === null) { return null; } - const handlers = { - moveDown: this.handleHotkeyMoveDown, - moveUp: this.handleHotkeyMoveUp, - open: this.handleClick, - }; - - let media; - - if (lastStatus.get('media_attachments').size > 0) { - media = ; - } - return ( - -
-
-
-
{accounts.map(account => )}
-
- -
- -
- -
-
- - - - {media} -
- + ); } diff --git a/app/javascript/mastodon/features/direct_timeline/containers/conversation_container.js b/app/javascript/mastodon/features/direct_timeline/containers/conversation_container.js index e2e2e3afb..bd6f6bfb0 100644 --- a/app/javascript/mastodon/features/direct_timeline/containers/conversation_container.js +++ b/app/javascript/mastodon/features/direct_timeline/containers/conversation_container.js @@ -4,13 +4,11 @@ import { markConversationRead } from '../../../actions/conversations'; const mapStateToProps = (state, { conversationId }) => { const conversation = state.getIn(['conversations', 'items']).find(x => x.get('id') === conversationId); - const lastStatus = state.getIn(['statuses', conversation.get('last_status')], null); return { accounts: conversation.get('accounts').map(accountId => state.getIn(['accounts', accountId], null)), unread: conversation.get('unread'), - lastStatus, - lastAccount: lastStatus === null ? null : state.getIn(['accounts', lastStatus.get('account')], null), + lastStatusId: conversation.get('last_status', null), }; }; diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 24b614a37..f77dc405c 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -801,7 +801,7 @@ padding: 8px 10px; padding-left: 68px; position: relative; - min-height: 48px; + min-height: 54px; border-bottom: 1px solid lighten($ui-base-color, 8%); cursor: default; @@ -823,7 +823,7 @@ margin-top: 8px; } - &.status-direct { + &.status-direct:not(.read) { background: lighten($ui-base-color, 8%); border-bottom-color: lighten($ui-base-color, 12%); } @@ -1133,6 +1133,18 @@ vertical-align: middle; margin-right: 5px; } + + &-composite { + @include avatar-radius(); + overflow: hidden; + + & > div { + @include avatar-radius(); + float: left; + position: relative; + box-sizing: border-box; + } + } } a .account__avatar { @@ -5497,49 +5509,3 @@ noscript { } } } - -.conversation { - padding: 14px 10px; - border-bottom: 1px solid lighten($ui-base-color, 8%); - cursor: pointer; - - &--unread { - background: lighten($ui-base-color, 8%); - border-bottom-color: lighten($ui-base-color, 12%); - } - - &__header { - display: flex; - margin-bottom: 15px; - } - - &__avatars { - overflow: hidden; - flex: 1 1 auto; - - & > div { - display: flex; - flex-wrap: none; - width: 900px; - } - - .account__avatar { - margin-right: 10px; - } - } - - &__time { - flex: 0 0 auto; - font-size: 14px; - color: $darker-text-color; - text-align: right; - - .display-name { - color: $secondary-text-color; - } - } - - .attachment-list.compact { - margin-top: 15px; - } -} -- cgit From 25f9ead041a3087993059a1398f37dfa21a62610 Mon Sep 17 00:00:00 2001 From: kedama Date: Sun, 21 Oct 2018 14:35:25 +0900 Subject: Fix domain label position and color (#9033) * Fix position of the domain label * Fix position of the domain label for RTL - Fix color mismatch of linear gradient which assigned to "::after" pseudo class --- app/javascript/styles/mastodon/forms.scss | 2 +- app/javascript/styles/mastodon/rtl.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index 337941a08..8c4c934ea 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -427,7 +427,7 @@ code { &__append { position: absolute; - right: 1px; + right: 3px; top: 1px; padding: 10px; padding-bottom: 9px; diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss index 448534b3c..e3f4af825 100644 --- a/app/javascript/styles/mastodon/rtl.scss +++ b/app/javascript/styles/mastodon/rtl.scss @@ -246,12 +246,12 @@ body.rtl { .simple_form .label_input__append { right: auto; - left: 0; + left: 3px; &::after { right: auto; left: 0; - background-image: linear-gradient(to left, rgba($ui-base-color, 0), $ui-base-color); + background-image: linear-gradient(to left, rgba(darken($ui-base-color, 10%), 0), darken($ui-base-color, 10%)); } } -- cgit From bf58461d365b5cee0d8a80a019a64e84c841f32f Mon Sep 17 00:00:00 2001 From: Masoud Abkenar Date: Sun, 21 Oct 2018 13:31:40 +0200 Subject: RTL: fix column settings toggle label (#9037) --- app/javascript/styles/mastodon/rtl.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss index e3f4af825..a2dfbf74b 100644 --- a/app/javascript/styles/mastodon/rtl.scss +++ b/app/javascript/styles/mastodon/rtl.scss @@ -73,7 +73,7 @@ body.rtl { float: left; } - .setting-toggle { + .setting-toggle__label { margin-left: 0; margin-right: 8px; } -- cgit From 3a157210c87e6fe034f70d922cf7fc70fb533ad1 Mon Sep 17 00:00:00 2001 From: Masoud Abkenar Date: Sun, 21 Oct 2018 16:45:08 +0200 Subject: RTL: fix admin account avatar margin in about page (#9039) * RTL: fix admin account avatar margin in about page * fix code style --- app/javascript/styles/mastodon/rtl.scss | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss index a2dfbf74b..e5213b555 100644 --- a/app/javascript/styles/mastodon/rtl.scss +++ b/app/javascript/styles/mastodon/rtl.scss @@ -341,14 +341,16 @@ body.rtl { margin-right: 20px; } } -} -.landing-page__information { - .account__display-name { - margin-right: 0; - } + .landing-page__information { + .account__display-name { + margin-right: 0; + margin-left: 5px; + } - .account__avatar-wrapper { - margin-left: 0; + .account__avatar-wrapper { + margin-left: 12px; + margin-right: 0; + } } } -- cgit From c73864c1373330f2ef75006d639f90a1debcce6d Mon Sep 17 00:00:00 2001 From: Masoud Abkenar Date: Sun, 21 Oct 2018 18:37:57 +0200 Subject: RTL: fix cardbar margins and alignment (#9044) --- app/javascript/styles/mastodon/rtl.scss | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss index e5213b555..a86e3e632 100644 --- a/app/javascript/styles/mastodon/rtl.scss +++ b/app/javascript/styles/mastodon/rtl.scss @@ -353,4 +353,10 @@ body.rtl { margin-right: 0; } } + + .card__bar .display-name { + margin-left: 0; + margin-right: 15px; + text-align: right; + } } -- cgit