Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Add new style for inline code #9936

Merged
merged 5 commits into from
Jan 19, 2023
Merged

Add new style for inline code #9936

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0b49ce0
Add new style for inline code
florianduros Jan 18, 2023
79792f6
Merge branch 'develop' into florianduros/feat/inline-code-style
florianduros Jan 19, 2023
08eb320
Rework inline code style
florianduros Jan 19, 2023
9677070
Add extra margin to avoid inline code to be glued to other characters
florianduros Jan 19, 2023
33f71a3
Add and use $spacing-2
florianduros Jan 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions res/css/_spacing.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ limitations under the License.

/* 1rem :: 10px */

$spacing-2: 2px;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought the whole point of the $spacing variables was to encourage people not to use values which are not a multiple of 4?

Copy link
Contributor Author

@florianduros florianduros Apr 12, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. I was not aware that we only accept multiple of 4 (the code style doesn't talk about it https://github.com/vector-im/element-web/blob/develop/code_style.md#stylesheets-pcss--postcss--plugins)
  2. The expected design was with a 2px spacing 🧐

Copy link
Member

@richvdh richvdh Apr 12, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I realise those things, but my question is, what is the point of the $spacing variables, if we're just going to introduce new entries whenever we need one? $spacing-2 is a lot longer to type than 2px. I just don't get it.

I don't mean to pick on you @florianduros - I think it's a question for the design team: @gsouquet can you give us any guidance on use the $spacing variables?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

related: #10564

Copy link
Contributor Author

@florianduros florianduros Apr 12, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh don't worry, I didn't take it personnaly :)

I had some guidance in a previous PR to not use hardcoded spacing and using CSS variable instead for spacing. I thought it was a kind of convention in the element CSS.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://vector-im.github.io/compound/?path=/story/styles-styles--spacing

$spacing-4: 4px;
$spacing-8: 8px;
$spacing-12: 12px;
Expand Down
12 changes: 12 additions & 0 deletions res/css/views/rooms/_EventTile.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -551,6 +551,18 @@ $left-gutter: 64px;
background-color: $codeblock-background-color;
}

code:not(pre *) {
background-color: $inlinecode-background-color;
border: 1px solid $inlinecode-border-color;
border-radius: 4px;
// The horizontal padding is added by gfm.css .markdown-body
padding: $spacing-2 0;
// Avoid inline code blocks to be sticked when on multiple lines
line-height: $font-22px;
// Avoid the border to be glued to the other words
margin-right: $spacing-2;
}

code {
white-space: pre-wrap; /* don't collapse spaces in inline code blocks */
}
Expand Down
8 changes: 8 additions & 0 deletions res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,14 @@ limitations under the License.
:is(ol, ul) + br:last-of-type {
display: none;
}

code {
font-family: $monospace-font-family !important;
background-color: $inlinecode-background-color;
border: 1px solid $inlinecode-border-color;
border-radius: 4px;
padding: $spacing-2;
}
}

.mx_WysiwygComposer_Editor_content_placeholder::before {
Expand Down
2 changes: 2 additions & 0 deletions res/themes/dark/css/_dark.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -224,6 +224,8 @@ $composer-shadow-color: rgba(0, 0, 0, 0.28);
$breadcrumb-placeholder-bg-color: #272c35;
$theme-button-bg-color: #e3e8f0;
$resend-button-divider-color: rgba($header-panel-text-primary-color, 0.74);
$inlinecode-border-color: $quinary-content;
$inlinecode-background-color: $system;
$codeblock-background-color: #2a3039;
$scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
$selected-color: $room-highlight-color;
Expand Down
2 changes: 2 additions & 0 deletions res/themes/legacy-dark/css/_legacy-dark.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,8 @@ $appearance-tab-border-color: $room-highlight-color;
$composer-shadow-color: tranparent;

$codeblock-background-color: #2a3039;
$inlinecode-border-color: #2a3039;
$inlinecode-background-color: #2a3039;

/* Bubble tiles */
$eventbubble-self-bg: #14322e;
Expand Down
2 changes: 2 additions & 0 deletions res/themes/legacy-light/css/_legacy-light.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -290,6 +290,8 @@ $appearance-tab-border-color: $input-darker-bg-color;
$composer-shadow-color: tranparent;

$codeblock-background-color: $header-panel-bg-color;
$inlinecode-border-color: $header-panel-bg-color;
$inlinecode-background-color: $header-panel-bg-color;

/* Bubble tiles */
$eventbubble-self-bg: #f0fbf8;
Expand Down
2 changes: 2 additions & 0 deletions res/themes/light/css/_light.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -295,6 +295,8 @@ $composer-shadow-color: rgba(0, 0, 0, 0.04);
$breadcrumb-placeholder-bg-color: #e8eef5;
$theme-button-bg-color: $quinary-content;
$resend-button-divider-color: $input-darker-bg-color;
$inlinecode-border-color: $quinary-content;
$inlinecode-background-color: $system;
$codeblock-background-color: $header-panel-bg-color;
$scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
$selected-color: $secondary-accent-color;
Expand Down