-
-
-
-
+ if (account.get('id') !== me) {
+ menu.push({ text: intl.formatMessage(messages.mention, { name: account.get('username') }), action: this.props.onMention });
+ menu.push({ text: intl.formatMessage(messages.direct, { name: account.get('username') }), action: this.props.onDirect });
+ menu.push(null);
+ }
-
-
@{account.get('acct')} {account.get('locked') ? : null}
+ if ('share' in navigator) {
+ menu.push({ text: intl.formatMessage(messages.share, { name: account.get('username') }), action: this.handleShare });
+ menu.push(null);
+ }
- {badge}
+ if (account.get('id') === me) {
+ menu.push({ text: intl.formatMessage(messages.edit_profile), href: '/settings/profile' });
+ menu.push({ text: intl.formatMessage(messages.preferences), href: '/settings/preferences' });
+ menu.push({ text: intl.formatMessage(messages.pins), to: '/pinned' });
+ menu.push(null);
+ menu.push({ text: intl.formatMessage(messages.follow_requests), to: '/follow_requests' });
+ menu.push({ text: intl.formatMessage(messages.favourites), to: '/favourites' });
+ menu.push({ text: intl.formatMessage(messages.lists), to: '/lists' });
+ menu.push(null);
+ menu.push({ text: intl.formatMessage(messages.mutes), to: '/mutes' });
+ menu.push({ text: intl.formatMessage(messages.blocks), to: '/blocks' });
+ menu.push({ text: intl.formatMessage(messages.domain_blocks), to: '/domain_blocks' });
+ } else {
+ if (account.getIn(['relationship', 'following'])) {
+ if (account.getIn(['relationship', 'showing_reblogs'])) {
+ menu.push({ text: intl.formatMessage(messages.hideReblogs, { name: account.get('username') }), action: this.props.onReblogToggle });
+ } else {
+ menu.push({ text: intl.formatMessage(messages.showReblogs, { name: account.get('username') }), action: this.props.onReblogToggle });
+ }
+
+ menu.push({ text: intl.formatMessage(account.getIn(['relationship', 'endorsed']) ? messages.unendorse : messages.endorse), action: this.props.onEndorseToggle });
+ menu.push({ text: intl.formatMessage(messages.add_or_remove_from_list), action: this.props.onAddToList });
+ menu.push(null);
+ }
-
+ if (account.getIn(['relationship', 'muting'])) {
+ menu.push({ text: intl.formatMessage(messages.unmute, { name: account.get('username') }), action: this.props.onMute });
+ } else {
+ menu.push({ text: intl.formatMessage(messages.mute, { name: account.get('username') }), action: this.props.onMute });
+ }
- {fields.size > 0 && (
-
- {fields.map((pair, i) => (
-
-
- -
- {pair.get('verified_at') && }
-
-
- ))}
-
- )}
+ if (account.getIn(['relationship', 'blocking'])) {
+ menu.push({ text: intl.formatMessage(messages.unblock, { name: account.get('username') }), action: this.props.onBlock });
+ } else {
+ menu.push({ text: intl.formatMessage(messages.block, { name: account.get('username') }), action: this.props.onBlock });
+ }
+ menu.push({ text: intl.formatMessage(messages.report, { name: account.get('username') }), action: this.props.onReport });
+ }
+
+ if (account.get('acct') !== account.get('username')) {
+ const domain = account.get('acct').split('@')[1];
+
+ menu.push(null);
+
+ if (account.getIn(['relationship', 'domain_blocking'])) {
+ menu.push({ text: intl.formatMessage(messages.unblockDomain, { domain }), action: this.props.onUnblockDomain });
+ } else {
+ menu.push({ text: intl.formatMessage(messages.blockDomain, { domain }), action: this.props.onBlockDomain });
+ }
+ }
+
+ if (account.get('id') !== me && isStaff) {
+ menu.push(null);
+ menu.push({ text: intl.formatMessage(messages.admin_account, { name: account.get('username') }), href: `/admin/accounts/${account.get('id')}` });
+ }
+
+ const content = { __html: account.get('note_emojified') };
+ const displayNameHtml = { __html: account.get('display_name_html') };
+ const fields = account.get('fields');
+ const badge = account.get('bot') ? (
) : null;
+ const acct = account.get('acct').indexOf('@') === -1 && domain ? `${account.get('acct')}@${domain}` : account.get('acct');
+
+ return (
+
+
+
{info}
- {mutingInfo}
- {actionBtn}
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+ {actionBtn}
+
+
+
+
+
+ {badge}
+ @{acct} {lockedIcon}
+
+
+
+
+
+ {fields.size > 0 && (
+
+ {fields.map((pair, i) => (
+
+
+
+ -
+ {pair.get('verified_at') && }
+
+
+ ))}
+
+ )}
+
+ {account.get('note').length > 0 && account.get('note') !== '
' &&
}
+
+
+
+
);
}
diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/header.js b/app/javascript/flavours/glitch/features/account_timeline/components/header.js
index 8dc0be93e7..8f742ee248 100644
--- a/app/javascript/flavours/glitch/features/account_timeline/components/header.js
+++ b/app/javascript/flavours/glitch/features/account_timeline/components/header.js
@@ -25,6 +25,7 @@ export default class Header extends ImmutablePureComponent {
onEndorseToggle: PropTypes.func.isRequired,
onAddToList: PropTypes.func.isRequired,
hideTabs: PropTypes.bool,
+ domain: PropTypes.string.isRequired,
};
static contextTypes = {
@@ -98,20 +99,11 @@ export default class Header extends ImmutablePureComponent {
account={account}
onFollow={this.handleFollow}
onBlock={this.handleBlock}
+ domain={this.props.domain}
/>
{!hideTabs && (
diff --git a/app/javascript/flavours/glitch/features/account_timeline/containers/header_container.js b/app/javascript/flavours/glitch/features/account_timeline/containers/header_container.js
index df74ca8907..ed6c0cb38b 100644
--- a/app/javascript/flavours/glitch/features/account_timeline/containers/header_container.js
+++ b/app/javascript/flavours/glitch/features/account_timeline/containers/header_container.js
@@ -34,6 +34,7 @@ const makeMapStateToProps = () => {
const mapStateToProps = (state, { accountId }) => ({
account: getAccount(state, accountId),
+ domain: state.getIn(['meta', 'domain']),
});
return mapStateToProps;
diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss
index 0b7b58bb0d..be82bdab3d 100644
--- a/app/javascript/flavours/glitch/styles/components/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/components/accounts.scss
@@ -79,65 +79,6 @@
background: lighten($ui-base-color, 4%);
}
-.account__header {
- flex: 0 0 auto;
- background: lighten($ui-base-color, 4%);
- text-align: center;
- background-size: cover;
- background-position: center;
- position: relative;
-
- .account__avatar {
- @include avatar-radius();
- @include avatar-size(90px);
- display: block;
- margin: 0 auto 10px;
- overflow: hidden;
- }
-
- &.inactive {
- opacity: 0.5;
-
- .account__header__avatar {
- filter: grayscale(100%);
- }
-
- .account__header__username {
- color: $secondary-text-color;
- }
- }
-
- & > div {
- background: rgba(lighten($ui-base-color, 4%), 0.9);
- padding: 20px 10px;
- }
-
- .account__header__content {
- color: $secondary-text-color;
- }
-
- .account__header__display-name {
- color: $primary-text-color;
- display: inline-block;
- width: 100%;
- font-size: 20px;
- line-height: 27px;
- font-weight: 500;
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- .account__header__username {
- color: $highlight-text-color;
- font-size: 14px;
- font-weight: 400;
- display: block;
- margin-bottom: 10px;
- overflow: hidden;
- text-overflow: ellipsis;
- }
-}
-
.account__disclaimer {
padding: 10px;
border-top: 1px solid lighten($ui-base-color, 8%);
@@ -166,39 +107,6 @@
}
}
-.account__header__content {
- color: $darker-text-color;
- font-size: 14px;
- font-weight: 400;
- overflow: hidden;
- word-break: normal;
- word-wrap: break-word;
-
- p {
- margin-bottom: 20px;
-
- &:last-child {
- margin-bottom: 0;
- }
- }
-
- a {
- color: inherit;
- text-decoration: underline;
-
- &:hover {
- text-decoration: none;
- }
- }
-}
-
-.account__header__display-name {
- .emojione {
- width: 25px;
- height: 25px;
- }
-}
-
.account__action-bar {
border-top: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid lighten($ui-base-color, 8%);
@@ -270,15 +178,6 @@
}
}
-.account__header__avatar {
- background-size: 90px 90px;
- display: block;
- height: 90px;
- margin: 0 auto 10px;
- overflow: hidden;
- width: 90px;
-}
-
.account-authorize {
padding: 14px 10px;
@@ -427,29 +326,11 @@
}
}
-.account--follows-info {
- color: $primary-text-color;
- position: absolute;
- top: 10px;
- left: 10px;
- opacity: 0.7;
- display: inline-block;
- vertical-align: top;
- background-color: rgba($base-overlay-background, 0.4);
- text-transform: uppercase;
- font-size: 11px;
- font-weight: 500;
- padding: 4px;
- border-radius: 4px;
-}
-
-.account--muting-info {
+.relationship-tag {
color: $primary-text-color;
- position: absolute;
- top: 40px;
- left: 10px;
+ margin-bottom: 4px;
opacity: 0.7;
- display: inline-block;
+ display: block;
vertical-align: top;
background-color: rgba($base-overlay-background, 0.4);
text-transform: uppercase;
@@ -459,12 +340,6 @@
border-radius: 4px;
}
-.account--action-button {
- position: absolute;
- top: 10px;
- right: 20px;
-}
-
.account-gallery__container {
display: flex;
justify-content: center;
@@ -614,8 +489,188 @@
}
}
-.account__header .roles {
- margin-top: 20px;
- margin-bottom: 20px;
- padding: 0 15px;
+.account__header__content {
+ color: $darker-text-color;
+ font-size: 14px;
+ font-weight: 400;
+ overflow: hidden;
+ word-break: normal;
+ word-wrap: break-word;
+
+ p {
+ margin-bottom: 20px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ a {
+ color: inherit;
+ text-decoration: underline;
+
+ &:hover {
+ text-decoration: none;
+ }
+ }
+}
+
+.account__header {
+ overflow: hidden;
+
+ &.inactive {
+ opacity: 0.5;
+
+ .account__header__image,
+ .account__avatar {
+ filter: grayscale(100%);
+ }
+ }
+
+ &__info {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ }
+
+ &__image {
+ overflow: hidden;
+ height: 145px;
+ position: relative;
+ background: darken($ui-base-color, 4%);
+
+ img {
+ object-fit: cover;
+ display: block;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ }
+ }
+
+ &__bar {
+ position: relative;
+ background: lighten($ui-base-color, 4%);
+ padding: 5px;
+ border-bottom: 1px solid lighten($ui-base-color, 12%);
+
+ .avatar {
+ display: block;
+ flex: 0 0 auto;
+ width: 90px;
+ margin-left: -2px;
+
+ .account__avatar {
+ border: 2px solid lighten($ui-base-color, 4%);
+ }
+ }
+ }
+
+ &__tabs {
+ display: flex;
+ align-items: flex-start;
+ padding: 7px 5px;
+ margin-top: -55px;
+
+ &__buttons {
+ display: flex;
+ align-items: center;
+ padding-top: 55px;
+
+ .icon-button {
+ border: 1px solid lighten($ui-base-color, 12%);
+ border-radius: 4px;
+ box-sizing: content-box;
+ padding: 2px;
+ margin: 0 8px;
+ }
+ }
+
+ &__name {
+ padding: 5px;
+
+ .account-role {
+ vertical-align: top;
+ }
+
+ .emojione {
+ width: 22px;
+ height: 22px;
+ }
+
+ h1 {
+ font-size: 16px;
+ line-height: 24px;
+ color: $primary-text-color;
+ font-weight: 500;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+
+ small {
+ display: block;
+ font-size: 14px;
+ color: $darker-text-color;
+ font-weight: 400;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+ }
+
+ .spacer {
+ flex: 1 1 auto;
+ }
+ }
+
+ &__bio {
+ overflow: hidden;
+ margin: 0 -5px;
+
+ .account__header__content {
+ padding: 20px 15px;
+ padding-bottom: 5px;
+ color: $primary-text-color;
+ }
+
+ .account__header__fields {
+ margin: 0;
+ border-top: 1px solid lighten($ui-base-color, 12%);
+
+ a {
+ color: lighten($ui-highlight-color, 8%);
+ }
+
+ dl:first-child .verified {
+ border-radius: 0 4px 0 0;
+ }
+
+ .verified a {
+ color: $valid-value-color;
+ }
+ }
+ }
+
+ &__extra {
+ margin-top: 4px;
+
+ &__links {
+ font-size: 14px;
+ color: $darker-text-color;
+
+ a {
+ display: inline-block;
+ color: $darker-text-color;
+ text-decoration: none;
+ padding: 10px;
+ padding-top: 20px;
+ font-weight: 500;
+
+ strong {
+ font-weight: 700;
+ color: $primary-text-color;
+ }
+ }
+ }
+ }
}
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index f996bbfc5f..21b76e33ab 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -1261,7 +1261,6 @@ noscript {
@import 'domains';
@import 'status';
@import 'modal';
-@import 'metadata';
@import 'composer';
@import 'columns';
@import 'regeneration_indicator';
diff --git a/app/javascript/flavours/glitch/styles/components/metadata.scss b/app/javascript/flavours/glitch/styles/components/metadata.scss
index da045574a9..e69de29bb2 100644
--- a/app/javascript/flavours/glitch/styles/components/metadata.scss
+++ b/app/javascript/flavours/glitch/styles/components/metadata.scss
@@ -1,45 +0,0 @@
-.account__header .account__header__fields {
- font-size: 15px;
- line-height: 20px;
- overflow: hidden;
- margin: 20px -10px -20px;
- border-bottom: 0;
- border-top: 0;
-
- dl {
- background: $ui-base-color;
- border-top: 1px solid lighten($ui-base-color, 4%);
- border-bottom: 0;
- display: flex;
- }
-
- dt,
- dd {
- box-sizing: border-box;
- padding: 14px 5px;
- text-align: center;
- max-height: 48px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
-
- dt {
- color: $darker-text-color;
- background: lighten($ui-base-color, 13%);
- width: 120px;
- flex: 0 0 auto;
- font-weight: 500;
- }
-
- dd {
- flex: 1 1 auto;
- color: $primary-text-color;
- background: $ui-base-color;
-
- &.verified {
- border: 1px solid rgba($valid-value-color, 0.5);
- background: rgba($valid-value-color, 0.25);
- }
- }
-}
diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss
index fd334f8696..f0c0ed4273 100644
--- a/app/javascript/flavours/glitch/styles/containers.scss
+++ b/app/javascript/flavours/glitch/styles/containers.scss
@@ -683,6 +683,7 @@
color: $darker-text-color;
text-decoration: none;
padding: 15px;
+ font-weight: 500;
strong {
font-weight: 700;
diff --git a/app/javascript/flavours/glitch/styles/metadata.scss b/app/javascript/flavours/glitch/styles/metadata.scss
deleted file mode 100644
index 280848959e..0000000000
--- a/app/javascript/flavours/glitch/styles/metadata.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-.account__header__fields {
- $meta-table-border: lighten($ui-base-color, 8%);
- padding: 0;
- margin: 15px -15px -15px -15px;
- border: 0 none;
- border-top: 1px solid $meta-table-border;
- border-bottom: 1px solid $meta-table-border;
- font-size: 14px;
- line-height: 20px;
-
- dl {
- display: flex;
- border-bottom: 1px solid $meta-table-border;
- }
-
- dt,
- dd {
- box-sizing: border-box;
- padding: 14px;
- text-align: center;
- max-height: 48px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
-
- dt {
- padding-left: 15px;
- font-weight: 500;
- text-align: center;
- width: 120px;
- flex: 0 0 auto;
- color: $secondary-text-color;
- background: darken($ui-base-color, 8%);
- }
-
- dd {
- flex: 1 1 auto;
- color: $darker-text-color;
- }
-
- a {
- color: $highlight-text-color;
- text-decoration: none;
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: underline;
- }
- }
-
- dl:last-child {
- border-bottom: 0;
- }
-}