No OneTemporary
Actions

Size

22 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss
	index 240beea4e2..7d4ff60cfc 100644
	--- a/src/components/chat_message/chat_message.scss
	+++ b/src/components/chat_message/chat_message.scss
	@@ -1,164 +1,164 @@
	@import '../../_variables.scss';

	.chat-message-wrapper {
	&.hovered-message-chain {
	- .animated.avatar {
	+ .animated.Avatar {
	canvas {
	display: none;
	}
	img {
	visibility: visible;
	}
	}
	}

	.chat-message-menu {
	transition: opacity 0.1s;
	opacity: 0;
	position: absolute;
	top: -0.8em;

	button {
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	}
	}

	.icon-ellipsis {
	cursor: pointer;

	&:hover, .extra-button-popover.open & {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}

	border-radius: $fallback--chatMessageRadius;
	border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius);
	}

	.popover {
	width: 12em;
	}

	.chat-message {
	display: flex;
	padding-bottom: 0.5em;
	}

	.avatar-wrapper {
	margin-right: 0.72em;
	width: 32px;
	}

	.link-preview, .attachments {
	margin-bottom: 1em;
	}

	.chat-message-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 80%;
	min-width: 10em;
	width: 100%;

	&.with-media {
	width: 100%;

	.gallery-row {
	overflow: hidden;
	}

	.status {
	width: 100%;
	}
	}
	}

	.status {
	border-radius: $fallback--chatMessageRadius;
	border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius);
	display: flex;
	padding: 0.75em;
	}

	.created-at {
	position: relative;
	float: right;
	font-size: 0.8em;
	margin: -1em 0 -0.5em 0;
	font-style: italic;
	opacity: 0.8;
	}

	.without-attachment {
	.status-content {
	&::after {
	margin-right: 5.4em;
	content: " ";
	display: inline-block;
	}
	}
	}

	.incoming {
	a {
	color: var(--chatMessageIncomingLink, $fallback--link);
	}

	.status {
	color: var(--chatMessageIncomingText, $fallback--text);
	background-color: var(--chatMessageIncomingBg, $fallback--bg);
	border: 1px solid var(--chatMessageIncomingBorder, --border);
	}

	.created-at {
	a {
	color: var(--chatMessageIncomingText, $fallback--text);
	}
	}

	.chat-message-menu {
	left: 0.4rem;
	}
	}

	.outgoing {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: end;
	justify-content: flex-end;

	a {
	color: var(--chatMessageOutgoingLink, $fallback--link);
	}

	.status {
	color: var(--chatMessageOutgoingText, $fallback--text);
	background-color: var(--chatMessageOutgoingBg, $fallback--lightBg);
	border: 1px solid var(--chatMessageOutgoingBorder, --lightBg);
	}

	.chat-message-inner {
	align-items: flex-end;
	}

	.chat-message-menu {
	right: 0.4rem;
	}
	}

	.visible {
	opacity: 1;
	}
	}

	.chat-message-date-separator {
	text-align: center;
	margin: 1.4em 0;
	font-size: 0.9em;
	user-select: none;
	color: $fallback--text;
	color: var(--faintedText, $fallback--text);
	}
	diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
	index 1bd9199532..c6b2a5b568 100644
	--- a/src/components/notifications/notifications.scss
	+++ b/src/components/notifications/notifications.scss
	@@ -1,214 +1,214 @@
	@import '../../_variables.scss';

	.notifications {
	&:not(.minimal) {
	// a bit of a hack to allow scrolling below notifications
	padding-bottom: 15em;
	}

	.loadmore-error {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}

	.notification {
	position: relative;

	.notification-overlay {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	pointer-events: none;
	}

	&.unseen {
	.notification-overlay {
	background-image: linear-gradient(135deg, var(--badgeNotification, $fallback--cRed) 4px, transparent 10px)
	}
	}
	}
	}

	.notification {
	box-sizing: border-box;
	border-bottom: 1px solid;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	word-wrap: break-word;
	word-break: break-word;

	- &:hover .animated.avatar {
	+ &:hover .animated.Avatar {
	canvas {
	display: none;
	}
	img {
	visibility: visible;
	}
	}

	.non-mention {
	display: flex;
	flex: 1;
	flex-wrap: nowrap;
	padding: 0.6em;
	min-width: 0;

	.avatar-container {
	width: 32px;
	height: 32px;
	}

	--link: var(--faintLink);
	--text: var(--faint);
	}

	.follow-request-accept {
	cursor: pointer;

	&:hover {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}
	}

	.follow-request-reject {
	cursor: pointer;

	&:hover {
	color: $fallback--cRed;
	color: var(--cRed, $fallback--cRed);
	}
	}


	.follow-text, .move-text {
	padding: 0.5em 0;
	overflow-wrap: break-word;
	display: flex;
	justify-content: space-between;

	.follow-name {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}
	}

	/* TODO cleanup this */
	.Status {
	flex: 1;
	}

	time {
	white-space: nowrap;
	}

	.notification-right {
	flex: 1;
	padding-left: 0.8em;
	min-width: 0;

	.timeago {
	min-width: 3em;
	text-align: right;
	}
	}

	.emoji-reaction-emoji {
	font-size: 16px;
	}

	.notification-details {
	min-width: 0px;
	word-wrap: break-word;
	line-height:18px;
	position: relative;
	overflow: hidden;
	width: 100%;
	flex: 1 1 0;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;

	.name-and-action {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	}

	.username {
	font-weight: bolder;
	max-width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;

	img {
	width: 14px;
	height: 14px;
	vertical-align: middle;
	object-fit: contain
	}
	}

	.timeago {
	margin-right: .2em;
	}

	.icon-retweet.lit {
	color: $fallback--cGreen;
	color: var(--cGreen, $fallback--cGreen);
	}

	.icon-user.lit {
	color: $fallback--cBlue;
	color: var(--cBlue, $fallback--cBlue);
	}

	.icon-user-plus.lit {
	color: $fallback--cBlue;
	color: var(--cBlue, $fallback--cBlue);
	}

	.icon-reply.lit {
	color: $fallback--cBlue;
	color: var(--cBlue, $fallback--cBlue);
	}

	.icon-star.lit {
	color: orange;
	color: $fallback--cOrange;
	color: var(--cOrange, $fallback--cOrange);
	}

	.icon-arrow-curved.lit {
	color: $fallback--cBlue;
	color: var(--cBlue, $fallback--cBlue);
	}

	.status-content {
	margin: 0;
	max-height: 300px;
	}

	h1 {
	word-break: break-all;
	margin: 0 0 0.3em;
	padding: 0;
	font-size: 1em;
	line-height:20px;
	small {
	font-weight: lighter;
	}
	}

	p {
	margin: 0;
	margin-top: 0;
	margin-bottom: 0.3em;
	}
	}
	}
	diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
	index 07fce79acb..041bb80f3e 100644
	--- a/src/components/user_card/user_card.vue
	+++ b/src/components/user_card/user_card.vue
	@@ -1,574 +1,574 @@
	<template>
	<div
	class="user-card"
	:class="classes"
	>
	<div
	:class="{ 'hide-bio': hideBio }"
	:style="style"
	class="background-image"
	/>
	<div class="panel-heading">
	<div class="user-info">
	<div class="container">
	<a
	v-if="allowZoomingAvatar"
	class="user-info-avatar-link"
	@click="zoomAvatar"
	>
	<UserAvatar
	:better-shadow="betterShadow"
	:user="user"
	/>
	<div class="user-info-avatar-link-overlay">
	<i class="button-icon icon-zoom-in" />
	</div>
	</a>
	<router-link
	v-else
	:to="userProfileLink(user)"
	>
	<UserAvatar
	:better-shadow="betterShadow"
	:user="user"
	/>
	</router-link>
	<div class="user-summary">
	<div class="top-line">
	<!-- eslint-disable vue/no-v-html -->
	<div
	v-if="user.name_html"
	:title="user.name"
	class="user-name"
	v-html="user.name_html"
	/>
	<!-- eslint-enable vue/no-v-html -->
	<div
	v-else
	:title="user.name"
	class="user-name"
	>
	{{ user.name }}
	</div>
	<a
	v-if="isOtherUser && !user.is_local"
	:href="user.statusnet_profile_url"
	target="_blank"
	>
	<i class="icon-link-ext usersettings" />
	</a>
	<AccountActions
	v-if="isOtherUser && loggedIn"
	:user="user"
	:relationship="relationship"
	/>
	</div>
	<div class="bottom-line">
	<router-link
	class="user-screen-name"
	:title="user.screen_name"
	:to="userProfileLink(user)"
	>
	@{{ user.screen_name }}
	</router-link>
	<template v-if="!hideBio">
	<span
	v-if="!!visibleRole"
	class="alert user-role"
	>
	{{ visibleRole }}
	</span>
	<span
	v-if="user.bot"
	class="alert user-role"
	>
	bot
	</span>
	</template>
	<span v-if="user.locked"><i class="icon icon-lock" /></span>
	<span
	v-if="!mergedConfig.hideUserStats && !hideBio"
	class="dailyAvg"
	>{{ dailyAvg }} {{ $t('user_card.per_day') }}</span>
	</div>
	</div>
	</div>
	<div class="user-meta">
	<div
	v-if="relationship.followed_by && loggedIn && isOtherUser"
	class="following"
	>
	{{ $t('user_card.follows_you') }}
	</div>
	<div
	v-if="isOtherUser && (loggedIn \|\| !switcher)"
	class="highlighter"
	>
	<!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
	<input
	v-if="userHighlightType !== 'disabled'"
	:id="'userHighlightColorTx'+user.id"
	v-model="userHighlightColor"
	class="userHighlightText"
	type="text"
	>
	<input
	v-if="userHighlightType !== 'disabled'"
	:id="'userHighlightColor'+user.id"
	v-model="userHighlightColor"
	class="userHighlightCl"
	type="color"
	>
	<label
	for="theme_tab"
	class="userHighlightSel select"
	>
	<select
	:id="'userHighlightSel'+user.id"
	v-model="userHighlightType"
	class="userHighlightSel"
	>
	<option value="disabled">No highlight</option>
	<option value="solid">Solid bg</option>
	<option value="striped">Striped bg</option>
	<option value="side">Side stripe</option>
	</select>
	<i class="icon-down-open" />
	</label>
	</div>
	</div>
	<div
	v-if="loggedIn && isOtherUser"
	class="user-interactions"
	>
	<div class="btn-group">
	<FollowButton :relationship="relationship" />
	<template v-if="relationship.following">
	<ProgressButton
	v-if="!relationship.subscribing"
	class="btn btn-default"
	:click="subscribeUser"
	:title="$t('user_card.subscribe')"
	>
	<i class="icon-bell-alt" />
	</ProgressButton>
	<ProgressButton
	v-else
	class="btn btn-default toggled"
	:click="unsubscribeUser"
	:title="$t('user_card.unsubscribe')"
	>
	<i class="icon-bell-ringing-o" />
	</ProgressButton>
	</template>
	</div>
	<div>
	<button
	v-if="relationship.muting"
	class="btn btn-default btn-block toggled"
	@click="unmuteUser"
	>
	{{ $t('user_card.muted') }}
	</button>
	<button
	v-else
	class="btn btn-default btn-block"
	@click="muteUser"
	>
	{{ $t('user_card.mute') }}
	</button>
	</div>
	<div>
	<button
	class="btn btn-default btn-block"
	@click="mentionUser"
	>
	{{ $t('user_card.mention') }}
	</button>
	</div>
	<ModerationTools
	v-if="loggedIn.role === "admin""
	:user="user"
	/>
	</div>
	<div
	v-if="!loggedIn && user.is_local"
	class="user-interactions"
	>
	<RemoteFollow :user="user" />
	</div>
	</div>
	</div>
	<div
	v-if="!hideBio"
	class="panel-body"
	>
	<div
	v-if="!mergedConfig.hideUserStats && switcher"
	class="user-counts"
	>
	<div
	class="user-count"
	@click.prevent="setProfileView('statuses')"
	>
	<h5>{{ $t('user_card.statuses') }}</h5>
	<span>{{ user.statuses_count }} <br></span>
	</div>
	<div
	class="user-count"
	@click.prevent="setProfileView('friends')"
	>
	<h5>{{ $t('user_card.followees') }}</h5>
	<span>{{ hideFollowsCount ? $t('user_card.hidden') : user.friends_count }}</span>
	</div>
	<div
	class="user-count"
	@click.prevent="setProfileView('followers')"
	>
	<h5>{{ $t('user_card.followers') }}</h5>
	<span>{{ hideFollowersCount ? $t('user_card.hidden') : user.followers_count }}</span>
	</div>
	</div>
	<!-- eslint-disable vue/no-v-html -->
	<p
	v-if="!hideBio && user.description_html"
	class="user-card-bio"
	@click.prevent="linkClicked"
	v-html="user.description_html"
	/>
	<!-- eslint-enable vue/no-v-html -->
	<p
	v-else-if="!hideBio"
	class="user-card-bio"
	>
	{{ user.description }}
	</p>
	</div>
	</div>
	</template>

	<script src="./user_card.js"></script>

	<style lang="scss">
	@import '../../_variables.scss';

	.user-card {
	position: relative;

	.panel-heading {
	padding: .5em 0;
	text-align: center;
	box-shadow: none;
	background: transparent;
	flex-direction: column;
	align-items: stretch;
	// create new stacking context
	position: relative;
	}

	.panel-body {
	word-wrap: break-word;
	border-bottom-right-radius: inherit;
	border-bottom-left-radius: inherit;
	// create new stacking context
	position: relative;
	}

	.background-image {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	mask: linear-gradient(to top, white, transparent) bottom no-repeat,
	linear-gradient(to top, white, white);
	// Autoprefixed seem to ignore this one, and also syntax is different
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	background-size: cover;
	mask-size: 100% 60%;
	border-top-left-radius: calc(var(--panelRadius) - 1px);
	border-top-right-radius: calc(var(--panelRadius) - 1px);
	background-color: var(--profileBg);

	&.hide-bio {
	mask-size: 100% 40px;
	}
	}

	p {
	margin-bottom: 0;
	}

	&-bio {
	text-align: center;

	a {
	color: $fallback--link;
	color: var(--postLink, $fallback--link);
	}

	img {
	object-fit: contain;
	vertical-align: middle;
	max-width: 100%;
	max-height: 400px;

	&.emoji {
	width: 32px;
	height: 32px;
	}
	}
	}

	// Modifiers

	&-rounded-t {
	border-top-left-radius: $fallback--panelRadius;
	border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
	border-top-right-radius: $fallback--panelRadius;
	border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
	}

	&-rounded {
	border-radius: $fallback--panelRadius;
	border-radius: var(--panelRadius, $fallback--panelRadius);
	}

	&-bordered {
	border-width: 1px;
	border-style: solid;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	}
	}

	.user-info {
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	padding: 0 26px;

	.container {
	padding: 16px 0 6px;
	display: flex;
	align-items: flex-start;
	max-height: 56px;

	- .avatar {
	+ .Avatar {
	flex: 1 0 100%;
	width: 56px;
	height: 56px;
	box-shadow: 0px 1px 8px rgba(0,0,0,0.75);
	box-shadow: var(--avatarShadow);
	object-fit: cover;
	}
	}

	- &:hover .avatar {
	+ &:hover .Avatar {
	--still-image-img: visible;
	--still-image-canvas: hidden;
	}

	&-avatar-link {
	position: relative;
	cursor: pointer;

	&-overlay {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.3);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: $fallback--avatarRadius;
	border-radius: var(--avatarRadius, $fallback--avatarRadius);
	opacity: 0;
	transition: opacity .2s ease;

	i {
	color: #FFF;
	}
	}

	&:hover &-overlay {
	opacity: 1;
	}
	}

	.usersettings {
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	opacity: .8;
	}

	.user-summary {
	display: block;
	margin-left: 0.6em;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1 1 0;
	// This is so that text doesn't get overlapped by avatar's shadow if it has
	// big one
	z-index: 1;

	img {
	width: 26px;
	height: 26px;
	vertical-align: middle;
	object-fit: contain
	}

	.top-line {
	display: flex;
	}
	}

	.user-name {
	text-overflow: ellipsis;
	overflow: hidden;
	flex: 1 1 auto;
	margin-right: 1em;
	font-size: 15px;

	img {
	object-fit: contain;
	height: 16px;
	width: 16px;
	vertical-align: middle;
	}
	}

	.bottom-line {
	display: flex;
	font-weight: light;
	font-size: 15px;

	.user-screen-name {
	min-width: 1px;
	flex: 0 1 auto;
	text-overflow: ellipsis;
	overflow: hidden;
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	}

	.dailyAvg {
	min-width: 1px;
	flex: 0 0 auto;
	margin-left: 1em;
	font-size: 0.7em;
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}

	.user-role {
	flex: none;
	text-transform: capitalize;
	color: $fallback--text;
	color: var(--alertNeutralText, $fallback--text);
	background-color: $fallback--fg;
	background-color: var(--alertNeutral, $fallback--fg);
	}
	}

	.user-meta {
	margin-bottom: .15em;
	display: flex;
	align-items: baseline;
	font-size: 14px;
	line-height: 22px;
	flex-wrap: wrap;

	.following {
	flex: 1 0 auto;
	margin: 0;
	margin-bottom: .25em;
	text-align: left;
	}

	.highlighter {
	flex: 0 1 auto;
	display: flex;
	flex-wrap: wrap;
	margin-right: -.5em;
	align-self: start;

	.userHighlightCl {
	padding: 2px 10px;
	flex: 1 0 auto;
	}

	.userHighlightSel,
	.userHighlightSel.select {
	padding-top: 0;
	padding-bottom: 0;
	flex: 1 0 auto;
	}
	.userHighlightSel.select i {
	line-height: 22px;
	}

	.userHighlightText {
	width: 70px;
	flex: 1 0 auto;
	}

	.userHighlightCl,
	.userHighlightText,
	.userHighlightSel,
	.userHighlightSel.select {
	height: 22px;
	vertical-align: top;
	margin-right: .5em;
	margin-bottom: .25em;
	}
	}
	}
	.user-interactions {
	position: relative;
	display: flex;
	flex-flow: row wrap;
	margin-right: -.75em;

	> * {
	margin: 0 .75em .6em 0;
	white-space: nowrap;
	min-width: 95px;
	}

	button {
	margin: 0;
	}
	}
	}

	.user-counts {
	display: flex;
	line-height:16px;
	padding: .5em 1.5em 0em 1.5em;
	text-align: center;
	justify-content: space-between;
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	flex-wrap: wrap;
	}

	.user-count {
	flex: 1 0 auto;
	padding: .5em 0 .5em 0;
	margin: 0 .5em;

	h5 {
	font-size:1em;
	font-weight: bolder;
	margin: 0 0 0.25em;
	}
	a {
	text-decoration: none;
	}
	}
	</style>

File Metadata

Mime Type: text/x-diff
Expires: Sun, Aug 30, 12:31 PM (1 d, 10 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1737967
Default Alt Text: (22 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions