oxen-io
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: huge refactor of the quote styling for theming

This commit is contained in:
William Grant 2022-09-29 11:33:03 +10:00
parent 8b06ea88f9
commit dd58d29450
3 changed files with 204 additions and 243 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

240
stylesheets/_quote.scss
View File

@ -10,116 +10,40 @@
border-left-width: 4px;
border-left-style: solid;
&__primary__type-label {
border-color: var(--text-primary-color);
}
}
// This is related to the quote logic inside messages
.module-quote {
&--outgoing {
.module-quote__primary__author {
color: var(--message-bubbles-sent-text-color);
font-weight: bold;
.module-contact-name {
font-weight: bold;
}
}
.module-quote__primary__text {
color: var(--message-bubbles-sent-text-color);
a {
color: var(--message-bubbles-sent-text-color);
}
}
}
&--incoming {
.module-quote__primary__author {
color: var(--message-bubbles-sent-text-color);
font-weight: bold;
.module-contact-name {
font-weight: bold;
}
}
.module-quote__primary__text {
color: var(--message-bubbles-sent-text-color);
a {
color: var(--message-bubbles-sent-text-color);
}
}
}
}
.module-quote__icon-container__icon--file {
@include color-svg('../images/file.svg', var(--primary-color));
}
.module-quote__icon-container__icon--image {
@include color-svg('../images/image.svg', var(--primary-color));
}
.module-quote__icon-container__icon--microphone {
@include color-svg('../images/microphone.svg', var(--primary-color));
}
.module-quote__icon-container__icon--play {
@include color-svg('../images/play.svg', var(--primary-color));
}
.module-quote__icon-container__icon--movie {
@include color-svg('../images/movie.svg', var(--primary-color));
}
.module-quote__generic-file__text {
color: var(--color-lighter-gray-color);
}
.module-quote__reference-warning {
background-color: var(--color-darkest-black-color);
}
.module-quote__reference-warning__icon {
@include color-svg('../images/broken-link.svg', var(--color-light-gray-color));
}
.module-quote__reference-warning__text {
color: var(--color-lighter-gray-color);
}
.module-quote-container {
margin-bottom: 5px;
margin-top: 10px;
padding-left: 10px;
}
.module-quote--no-click {
cursor: auto;
}
.module-quote__primary {
/* Primary */
&__primary {
flex-grow: 1;
padding-inline-start: 8px;
padding-inline-end: 8px;
max-width: 100%;
}
.module-quote__primary__author {
&__primary__profile-name {
font-style: italic;
}
&__primary__type-label {
font-style: italic;
font-size: var(--font-size-sm);
line-height: 18px;
font-weight: 300;
color: var(--color-darkest-gray-color);
color: var(--message-bubbles-received-text-color);
border-color: var(--message-bubbles-received-text-color);
}
&__primary__author {
font-size: var(--font-size-sm);
font-weight: bold;
line-height: 18px;
margin-bottom: 5px;
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
color: var(--message-bubbles-received-text-color);
.module-quote__primary__profile-name {
font-style: italic;
.module-contact-name {
font-weight: bold;
}
.module-quote__primary__text {
}
&__primary__text {
font-size: 14px;
line-height: 18px;
text-align: start;
@ -133,38 +57,19 @@
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.module-quote__primary__type-label {
font-style: italic;
color: var(--color-darkest-gray-color);
font-size: var(--font-size-sm);
line-height: 18px;
}
color: var(--message-bubbles-received-text-color);
.module-quote__primary__filename-label {
a {
color: var(--message-bubbles-received-text-color);
}
}
&__primary__filename-label {
font-size: 12px;
}
.module-quote__close-container {
position: absolute;
top: 4px;
right: 4px;
height: 16px;
width: 16px;
background-color: rgba(255, 255, 255, 0.75);
border-radius: 50%;
}
.module-quote__close-button {
width: 100%;
height: 100%;
cursor: pointer;
@include color-svg('../images/x.svg', var(--color-gray-color));
}
.module-quote__icon-container {
/* Icons */
&__icon-container {
flex: initial;
min-width: 54px;
width: 54px;
@ -189,9 +94,7 @@
align-items: center;
justify-content: center;
}
}
.module-quote__icon-container__circle-background {
&__circle-background {
display: flex;
align-items: center;
justify-content: center;
@ -199,31 +102,36 @@
height: 32px;
width: 32px;
border-radius: 50%;
background-color: var(--color-white-color);
}
background-color: var(--chat-buttons-background-color);
.module-quote__icon-container__icon {
&:hover {
background-color: var(--chat-buttons-background-hover-color);
}
}
&__icon {
width: 24px;
height: 24px;
&--file {
@include color-svg('../images/file.svg', var(--primary-color));
@include color-svg('../images/file.svg', var(--button-icon-stroke-color));
}
&--image {
@include color-svg('../images/image.svg', var(--primary-color));
@include color-svg('../images/image.svg', var(--button-icon-stroke-color));
}
&--microphone {
@include color-svg('../images/microphone.svg', var(--primary-color));
@include color-svg('../images/microphone.svg', var(--button-icon-stroke-color));
}
&--play {
@include color-svg('../images/play.svg', var(--primary-color));
@include color-svg('../images/play.svg', var(--chat-buttons-icon-color));
}
&--movie {
@include color-svg('../images/movie.svg', var(--primary-color));
@include color-svg('../images/movie.svg', var(--button-icon-stroke-color));
}
}
}
.module-quote__generic {
/* Generic Files */
&__generic {
&-file {
display: flex;
flex-direction: row;
@ -242,7 +150,7 @@
&-file__text {
font-size: 14px;
line-height: 18px;
color: var(--color-darkest-gray-color);
color: var(--message-bubbles-received-text-color);
max-width: calc(100% - 26px);
overflow-x: hidden;
@ -251,14 +159,15 @@
}
}
.module-quote__reference {
/* Reference Warning */
&__reference {
&-warning {
height: 26px;
display: flex;
flex-direction: row;
align-items: center;
background-color: var(--color-darkest-white-color);
background-color: var(--message-link-preview-background-color);
padding-inline-start: 8px;
padding-inline-end: 8px;
margin-inline-end: 8px;
@ -267,18 +176,67 @@
&-warning__icon {
height: 16px;
width: 16px;
@include color-svg('../images/broken-link.svg', var(--color-gray-color));
@include color-svg('../images/broken-link.svg', var(--message-bubbles-received-text-color));
}
&-warning__text {
margin-inline-start: 6px;
color: var(--color-darkest-gray-color);
color: var(--message-bubbles-received-text-color);
font-size: var(--font-size-sm);
line-height: 18px;
}
}
$session-highlight-message-shadow: 0px 0px 10px 1px var(--primary-color);
/* Misc */
&--no-click {
cursor: auto;
}
}
/* Outgoing messages */
.module-quote--outgoing {
color: var(--message-bubbles-sent-text-color);
.module-quote {
&__primary__type-label {
color: var(--message-bubbles-sent-text-color);
border-color: var(--message-bubbles-sent-text-color);
}
&__primary__author {
color: var(--message-bubbles-sent-text-color);
}
&__primary__text {
color: var(--message-bubbles-sent-text-color);
a {
color: var(--message-bubbles-sent-text-color);
}
}
&__generic {
&-file__text {
color: var(--message-bubbles-sent-text-color);
}
}
}
}
.module-quote-container {
margin-bottom: 5px;
margin-top: 10px;
padding-left: 10px;
/* This is not within the module-quote class so we handle it separately */
.module-quote__reference-warning--outgoing {
.module-quote__reference-warning__text {
color: var(--message-bubbles-sent-text-color);
}
.module-quote__reference-warning__icon {
@include color-svg('../images/broken-link.svg', var(--message-bubbles-sent-text-color));
}
}
}
$session-highlight-message-shadow: 0px 0px 10px 1px var(--button-icon-stroke-color);
@keyframes remove-box-shadow {
0% {

4
ts/components/conversation/message/message-content/Quote.tsx
View File

@ -316,7 +316,9 @@ export const QuoteReferenceWarning = (
<div
className={classNames(
'module-quote__reference-warning',
isIncoming ? 'module-quote__reference-warning--incoming' : null
isIncoming
? 'module-quote__reference-warning--incoming'
: 'module-quote__reference-warning--outgoing'
)}
>
<div

1
ts/themes/SessionTheme.tsx
View File

@ -650,6 +650,7 @@ export const SessionGlobalStyles = createGlobalStyle`
/* Also used for the Media Grid Items */
/* Also used for Staged Generic Attachments */
/* Also used for FileDropZone */
/* Used for Quote References Not Found */
/* Same for all Themes */
--message-link-preview-background-color: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06);