PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Remove TODO comments about spacing variables (#10695)

Browse source 
The variables on _spacing.pcss have been deprecated by https://github.com/matrix-org/matrix-react-sdk/pull/10686
This commit is contained in:
Suguru Hirahara 2023-06-06 14:03:52 +00:00 committed by GitHub
parent c42a7769e9
commit d340fa8d2a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 56 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
res/css/structures/_RoomView.pcss
View file

@ -15,7 +15,7 @@ limitations under the License.
*/ */
:root { :root {
--RoomView_MessageList-padding: 18px; /* TODO: use a variable */ --RoomView_MessageList-padding: 18px;
} }
.mx_RoomView_wrapper { .mx_RoomView_wrapper {
@ -212,7 +212,7 @@ limitations under the License.
margin-bottom: 4px; margin-bottom: 4px;
h2 { h2 {
margin-top: 6px; /* TODO: Use a spacing variable */ margin-top: 6px;
} }
} }

4
res/css/views/beta/_BetaCard.pcss
View file

@ -35,7 +35,7 @@ limitations under the License.
font-size: $font-18px; font-size: $font-18px;
line-height: $font-22px; line-height: $font-22px;
color: $primary-content; color: $primary-content;
margin: $spacing-4 0 14px; // TODO: use a spacing variable margin: $spacing-4 0 14px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -117,7 +117,7 @@ limitations under the License.
.mx_BetaCard_betaPill { .mx_BetaCard_betaPill {
background-color: $accent-alt; background-color: $accent-alt;
padding: $spacing-4 10px; // TODO: use a spacing variable padding: $spacing-4 10px;
border-radius: 8px; border-radius: 8px;
text-transform: uppercase; text-transform: uppercase;
font-size: $font-12px; font-size: $font-12px;

18
res/css/views/dialogs/_InviteDialog.pcss
View file

@ -28,7 +28,7 @@ limitations under the License.
flex-direction: row; flex-direction: row;
/* Right margin for the design. We could apply this to the whole dialog, but then the scrollbar */ /* Right margin for the design. We could apply this to the whole dialog, but then the scrollbar */
/* for the user section gets weird. */ /* for the user section gets weird. */
margin: $spacing-8 45px 0 0; /* TODO: Use a spacing variable */ margin: $spacing-8 45px 0 0;
.mx_InviteDialog_editor { .mx_InviteDialog_editor {
flex: 1; flex: 1;
@ -43,14 +43,14 @@ limitations under the License.
flex-wrap: wrap; flex-wrap: wrap;
.mx_InviteDialog_userTile { .mx_InviteDialog_userTile {
margin: 6px 6px 0 0; /* TODO: Use a spacing variable */ margin: 6px 6px 0 0;
display: inline-block; display: inline-block;
min-width: max-content; /* prevent manipulation by flexbox */ min-width: max-content; /* prevent manipulation by flexbox */
} }
/* overrides bunch of our default text input styles */ /* overrides bunch of our default text input styles */
> input[type="text"] { > input[type="text"] {
margin: 6px 0 !important; /* TODO: Use a spacing variable */ margin: 6px 0 !important;
height: 24px; height: 24px;
line-height: $font-24px; line-height: $font-24px;
font-size: $font-14px; font-size: $font-14px;
@ -67,7 +67,7 @@ limitations under the License.
.mx_InviteDialog_goButton { .mx_InviteDialog_goButton {
min-width: 48px; min-width: 48px;
margin-inline-start: 10px; /* TODO: Use a spacing variable */ margin-inline-start: 10px;
height: 25px; height: 25px;
line-height: $font-25px; line-height: $font-25px;
} }
@ -77,7 +77,7 @@ limitations under the License.
/* Width and height are required to trick the layout engine. */ /* Width and height are required to trick the layout engine. */
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-inline-start: 5px; /* TODO: Use a spacing variable */ margin-inline-start: 5px;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
@ -103,7 +103,7 @@ limitations under the License.
} }
.mx_InviteDialog_section_showMore { .mx_InviteDialog_section_showMore {
margin: 7px 18px; /* TODO: Use a spacing variable */ margin: 7px 18px;
display: block; display: block;
} }
} }
@ -252,7 +252,7 @@ limitations under the License.
.mx_InviteDialog_userSections { .mx_InviteDialog_userSections {
margin-top: $spacing-4; margin-top: $spacing-4;
overflow-y: auto; overflow-y: auto;
padding: 0 45px $spacing-4 0; /* TODO: Use a spacing variable */ padding: 0 45px $spacing-4 0;
} }
.mx_InviteDialog_helpText { .mx_InviteDialog_helpText {
@ -289,7 +289,7 @@ limitations under the License.
.mx_DialPad { .mx_DialPad {
row-gap: $spacing-16; row-gap: $spacing-16;
column-gap: 48px; /* TODO: Use a spacing variable */ column-gap: 48px;
margin-inline: auto; margin-inline: auto;
} }
} }
@ -450,7 +450,7 @@ limitations under the License.
} }
.mx_InviteDialog_identityServer { .mx_InviteDialog_identityServer {
margin-top: 1em; /* TODO: Use a spacing variable */ margin-top: 1em;
} }
.mx_InviteDialog_oneThreepid { .mx_InviteDialog_oneThreepid {

14
res/css/views/dialogs/_SpotlightDialog.pcss
View file

@ -36,7 +36,7 @@ limitations under the License.
kbd { kbd {
display: inline-block; display: inline-block;
padding: 2px $spacing-4; /* TODO: Use a spacing variable */ padding: 2px $spacing-4;
margin: 0 $spacing-4; margin: 0 $spacing-4;
border-radius: 6px; border-radius: 6px;
background-color: $quinary-content; background-color: $quinary-content;
@ -76,7 +76,7 @@ limitations under the License.
vertical-align: middle; vertical-align: middle;
color: $primary-content; color: $primary-content;
position: relative; position: relative;
padding: $spacing-4 $spacing-8 $spacing-4 37px; /* TODO: Use a spacing variable */ padding: $spacing-4 $spacing-8 $spacing-4 37px;
&::before { &::before {
background-color: $secondary-content; background-color: $secondary-content;
@ -234,7 +234,7 @@ limitations under the License.
.mx_SpotlightDialog_otherSearches, .mx_SpotlightDialog_otherSearches,
.mx_SpotlightDialog_hiddenResults { .mx_SpotlightDialog_hiddenResults {
.mx_SpotlightDialog_option { .mx_SpotlightDialog_option {
padding: 6px $spacing-4; /* TODO: Use a spacing variable */ padding: 6px $spacing-4;
border-radius: 8px; border-radius: 8px;
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
@ -258,11 +258,11 @@ limitations under the License.
.mx_AccessibleButton { .mx_AccessibleButton {
padding: $spacing-4 $spacing-20; padding: $spacing-4 $spacing-20;
margin: 2px $spacing-4; /* TODO: Use a spacing variable */ margin: 2px $spacing-4;
} }
.mx_SpotlightDialog_enterPrompt { .mx_SpotlightDialog_enterPrompt {
margin-top: 9px; /* TODO: Use a spacing variable */ margin-top: 9px;
margin-right: $spacing-8; margin-right: $spacing-8;
} }
} }
@ -379,7 +379,7 @@ limitations under the License.
.mx_AccessibleButton { .mx_AccessibleButton {
position: relative; position: relative;
margin: 0; margin: 0;
padding: 3px $spacing-8 3px $spacing-28; /* TODO: Use a spacing variable */ padding: 3px $spacing-8 3px $spacing-28;
&::before { &::before {
content: ""; content: "";
@ -480,7 +480,7 @@ limitations under the License.
} }
.mx_SpotlightDialog_enterPrompt { .mx_SpotlightDialog_enterPrompt {
padding: 2px $spacing-4; /* TODO: Use a spacing variable */ padding: 2px $spacing-4;
/* To avoid any styling inherent with <kbd> elements */ /* To avoid any styling inherent with <kbd> elements */
font-family: inherit; font-family: inherit;
font-weight: inherit; font-weight: inherit;

6
res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss
View file

@ -23,7 +23,7 @@ limitations under the License.
height: 24px; height: 24px;
margin-inline-end: $spacing-8; margin-inline-end: $spacing-8;
position: relative; position: relative;
top: 5px; /* TODO: spacing variable */ top: 5px;
background-color: $primary-content; background-color: $primary-content;
} }
@ -81,7 +81,7 @@ limitations under the License.
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
mask-size: 20px; mask-size: 20px;
margin-inline-end: 5px; /* TODO: spacing variable */ margin-inline-end: 5px;
} }
&.mx_AccessSecretStorageDialog_recoveryKeyFeedback--valid { &.mx_AccessSecretStorageDialog_recoveryKeyFeedback--valid {
@ -109,7 +109,7 @@ limitations under the License.
text-align: initial; text-align: initial;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
gap: 14px; /* TODO: spacing variable */ gap: 14px;
.mx_Dialog_buttons_additive { .mx_Dialog_buttons_additive {
float: none; float: none;

2
res/css/views/elements/_GenericEventListSummary.pcss
View file

@ -23,7 +23,7 @@ limitations under the License.
.mx_GenericEventListSummary_spacer { .mx_GenericEventListSummary_spacer {
border-bottom: 1px solid $primary-hairline-color; border-bottom: 1px solid $primary-hairline-color;
margin-left: 63px; /* TODO: Use a variable */ margin-left: 63px;
line-height: $font-30px; /* TODO: Use a variable */ line-height: $font-30px; /* TODO: Use a variable */
.mx_IRCLayout & { .mx_IRCLayout & {

6
res/css/views/elements/_ReplyChain.pcss
View file

@ -16,9 +16,9 @@ limitations under the License.
.mx_ReplyChain { .mx_ReplyChain {
margin: 0; // Reset default blockquote margin margin: 0; // Reset default blockquote margin
padding-left: 10px; // TODO: Use a spacing variable padding-left: 10px;
border-left: 2px solid var(--username-color); // TODO: Use a spacing variable border-left: 2px solid var(--username-color);
border-radius: 2px; // TODO: Use a spacing variable border-radius: 2px;
.mx_ReplyChain_show { .mx_ReplyChain_show {
&.mx_AccessibleButton_kind_link_inline { &.mx_AccessibleButton_kind_link_inline {

4
res/css/views/messages/_EventTileBubble.pcss
View file

@ -15,10 +15,10 @@ limitations under the License.
*/ */
.mx_EventTileBubble { .mx_EventTileBubble {
--EventTileBubble_margin-block: 10px; /* TODO: Use a spacing variable */ --EventTileBubble_margin-block: 10px;
background-color: $dark-panel-bg-color; background-color: $dark-panel-bg-color;
padding: 10px; /* TODO: Use a spacing variable */ padding: 10px;
border-radius: 8px; border-radius: 8px;
/* Reserve space for external timestamps, but also cap the width */ /* Reserve space for external timestamps, but also cap the width */
max-width: min(calc(100% - 2 * var(--MessageTimestamp-width)), 600px); max-width: min(calc(100% - 2 * var(--MessageTimestamp-width)), 600px);

4
res/css/views/messages/_ViewSourceEvent.pcss
View file

@ -29,7 +29,7 @@ limitations under the License.
pre { pre {
line-height: 1.2; line-height: 1.2;
margin: 3.5px 0; /* TODO: use a variable */ margin: 3.5px 0;
} }
.mx_ViewSourceEvent_toggle { .mx_ViewSourceEvent_toggle {
@ -56,7 +56,7 @@ limitations under the License.
align-self: flex-end; align-self: flex-end;
height: var(--ViewSourceEvent_toggle-size); height: var(--ViewSourceEvent_toggle-size);
mask-position: 0 bottom; mask-position: 0 bottom;
margin-bottom: 5px; /* TODO: use a variable */ margin-bottom: 5px;
mask-image: url("$(res)/img/element-icons/minimise-collapse.svg"); mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
} }
} }

14
res/css/views/right_panel/_BaseCard.pcss
View file

@ -17,7 +17,7 @@ limitations under the License.
.mx_BaseCard { .mx_BaseCard {
--BaseCard_padding-inline: $spacing-8; --BaseCard_padding-inline: $spacing-8;
--BaseCard_EventTile_line-padding-block: 2px; --BaseCard_EventTile_line-padding-block: 2px;
--BaseCard_EventTile-spacing-inline: 36px; /* TODO: Use a spacing variable */ --BaseCard_EventTile-spacing-inline: 36px;
--BaseCard_header-button-size: 24px; --BaseCard_header-button-size: 24px;
padding: 0 var(--BaseCard_padding-inline); padding: 0 var(--BaseCard_padding-inline);
@ -32,7 +32,7 @@ limitations under the License.
margin: $spacing-4 0 $spacing-12; margin: $spacing-4 0 $spacing-12;
> h2 { > h2 {
margin: 0 44px; /* TODO: Use a spacing variable */ margin: 0 44px;
font-size: $font-18px; font-size: $font-18px;
font-weight: var(--font-semi-bold); font-weight: var(--font-semi-bold);
overflow: hidden; overflow: hidden;
@ -79,7 +79,7 @@ limitations under the License.
margin-inline-start: var(--BaseCard_header-button-size); margin-inline-start: var(--BaseCard_header-button-size);
.mx_BaseCard_header_title_heading { .mx_BaseCard_header_title_heading {
margin-inline-start: 6px; /* TODO: Use a spacing variable */ margin-inline-start: 6px;
} }
} }
} }
@ -159,7 +159,7 @@ limitations under the License.
} }
.mx_BaseCard_Button { .mx_BaseCard_Button {
padding: 10px; /* TODO: Use a spacing variable */ padding: 10px;
padding-inline-start: $spacing-12; padding-inline-start: $spacing-12;
margin: 0; margin: 0;
position: relative; position: relative;
@ -234,8 +234,8 @@ limitations under the License.
font-size: $font-12px; font-size: $font-12px;
color: $secondary-content; color: $secondary-content;
padding-top: 10px; /* TODO: Use a spacing variable */ padding-top: 10px;
padding-bottom: 10px; /* TODO: Use a spacing variable */ padding-bottom: 10px;
border: 1px solid $quinary-content; border: 1px solid $quinary-content;
box-shadow: 0px 1px 3px rgba(23, 25, 28, 0.05); box-shadow: 0px 1px 3px rgba(23, 25, 28, 0.05);
@ -243,7 +243,7 @@ limitations under the License.
.mx_ContextualMenu_chevron_top { .mx_ContextualMenu_chevron_top {
left: auto; left: auto;
right: 22px; /* TODO: Use a spacing variable */ right: 22px;
border-bottom-color: $quinary-content; border-bottom-color: $quinary-content;
&::after { &::after {

2
res/css/views/right_panel/_ThreadPanel.pcss
View file

@ -26,7 +26,7 @@ limitations under the License.
} }
.mx_ThreadPanel_dropdown { .mx_ThreadPanel_dropdown {
padding: 3px $spacing-4 3px $spacing-8; /* TODO: Use a spacing variable */ padding: 3px $spacing-4 3px $spacing-8;
border-radius: 4px; border-radius: 4px;
line-height: 1.5; line-height: 1.5;
user-select: none; user-select: none;

10
res/css/views/right_panel/_UserInfo.pcss
View file

@ -27,7 +27,7 @@ limitations under the License.
top: 0; top: 0;
border-radius: 4px; border-radius: 4px;
background-color: $dark-panel-bg-color; background-color: $dark-panel-bg-color;
margin: 9px; /* TODO: Use a variable */ margin: 9px;
z-index: 1; /* render on top of the right panel */ z-index: 1; /* render on top of the right panel */
div { div {
@ -44,7 +44,7 @@ limitations under the License.
h2 { h2 {
font-size: $font-18px; font-size: $font-18px;
font-weight: var(--font-semi-bold); font-weight: var(--font-semi-bold);
margin: 18px 0 0 0; /* TODO: Use a variable */ margin: 18px 0 0 0;
} }
.mx_UserInfo_container { .mx_UserInfo_container {
@ -151,7 +151,7 @@ limitations under the License.
} }
p { p {
margin: 5px 0; /* TODO: Use a variable */ margin: 5px 0;
} }
.mx_UserInfo_profile { .mx_UserInfo_profile {
@ -179,7 +179,7 @@ limitations under the License.
} }
.mx_E2EIcon { .mx_E2EIcon {
margin-top: 3px; /* visual vertical centering to the top line of text. TODO: Use a variable */ margin-top: 3px; /* visual vertical centering to the top line of text. */
margin-inline-end: $spacing-4; /* margin from displayName */ margin-inline-end: $spacing-4; /* margin from displayName */
min-width: 18px; /* convince flexbox to not collapse it */ min-width: 18px; /* convince flexbox to not collapse it */
} }
@ -196,7 +196,7 @@ limitations under the License.
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin: 6px 0; /* TODO: Use a variable */ margin: 6px 0;
.mx_UserInfo_roleDescription { .mx_UserInfo_roleDescription {
display: flex; display: flex;

6
res/css/views/rooms/_EventTile.pcss
View file

@ -18,7 +18,7 @@ limitations under the License.
$left-gutter: 64px; $left-gutter: 64px;
.mx_EventTile { .mx_EventTile {
--EventTile_content-margin-inline-end: 34px; /* TODO: Use a spacing variable */ --EventTile_content-margin-inline-end: 34px;
--EventTile_group_line-spacing-block-start: 1px; --EventTile_group_line-spacing-block-start: 1px;
--EventTile_group_line-spacing-block-end: 3px; --EventTile_group_line-spacing-block-end: 3px;
--EventTile_group_line-spacing-inline-start: $left-gutter; --EventTile_group_line-spacing-inline-start: $left-gutter;
@ -347,7 +347,7 @@ $left-gutter: 64px;
> .mx_DisambiguatedProfile_mxid { > .mx_DisambiguatedProfile_mxid {
visibility: collapse; visibility: collapse;
margin-left: 0; /* Override the inherited margin. */ margin-left: 0; /* Override the inherited margin. */
padding: 0 5px; /* TODO: Use a spacing variable */ padding: 0 5px;
} }
&:hover { &:hover {
@ -537,7 +537,7 @@ $left-gutter: 64px;
} }
.mx_RoomView_timeline_rr_enabled & { .mx_RoomView_timeline_rr_enabled & {
$inline-end-margin: 80px; /* TODO: Use a spacing variable */ $inline-end-margin: 80px;
.mx_ThreadSummary, .mx_ThreadSummary,
.mx_ThreadSummary_icon, .mx_ThreadSummary_icon,

2
res/css/views/rooms/_IRCLayout.pcss
View file

@ -22,7 +22,7 @@ limitations under the License.
--name-width: 80px; /* cf. ircDisplayNameWidth on Settings.tsx */ --name-width: 80px; /* cf. ircDisplayNameWidth on Settings.tsx */
--icon-width: 14px; --icon-width: 14px;
--line-height: var(--irc-line-height); --line-height: var(--irc-line-height);
--right-padding: 5px; /* TODO: Use a spacing variable */ --right-padding: 5px;
line-height: var(--line-height) !important; line-height: var(--line-height) !important;

6
res/css/views/settings/_FontScalingPanel.pcss
View file

@ -24,11 +24,11 @@ limitations under the License.
display: flow-root; display: flow-root;
&.mx_IRCLayout { &.mx_IRCLayout {
padding-top: 9px; /* TODO: Use a spacing variable */ padding-top: 9px;
} }
.mx_EventTile[data-layout="bubble"] { .mx_EventTile[data-layout="bubble"] {
margin-top: 30px; /* TODO: Use a spacing variable */ margin-top: 30px;
} }
.mx_EventTile_msgOption { .mx_EventTile_msgOption {
@ -39,7 +39,7 @@ limitations under the License.
.mx_FontScalingPanel_fontSlider { .mx_FontScalingPanel_fontSlider {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 15px $spacing-20 35px; /* TODO: Use spacing variables */ padding: 15px $spacing-20 35px;
background: rgba($quinary-content, 0.2); background: rgba($quinary-content, 0.2);
border-radius: 10px; border-radius: 10px;
font-size: $font-10px; font-size: $font-10px;

2
res/css/views/settings/_ProfileSettings.pcss
View file

@ -57,7 +57,7 @@ limitations under the License.
> .mx_AccessibleButton_kind_link { > .mx_AccessibleButton_kind_link {
font-size: $font-14px; font-size: $font-14px;
margin-inline-end: 10px; /* TODO: Use a spacing variable */ margin-inline-end: 10px;
} }
} }
} }

2
res/css/views/settings/tabs/_SettingsSection.pcss
View file

@ -16,7 +16,7 @@ limitations under the License.
.mx_SettingsSection { .mx_SettingsSection {
--SettingsTab_section-margin-bottom-preferences-labs: 30px; --SettingsTab_section-margin-bottom-preferences-labs: 30px;
--SettingsTab_heading_nth_child-margin-top: 30px; /* TODO: Use a spacing variable */ --SettingsTab_heading_nth_child-margin-top: 30px;
--SettingsTab_tooltip-max-width: 120px; /* So it fits in the space provided by the page */ --SettingsTab_tooltip-max-width: 120px; /* So it fits in the space provided by the page */
color: $primary-content; color: $primary-content;

6
res/css/views/settings/tabs/_SettingsTab.pcss
View file

@ -50,9 +50,9 @@ limitations under the License.
color: $secondary-content; color: $secondary-content;
font-size: $font-14px; font-size: $font-14px;
display: block; display: block;
margin-top: 10px; /* TODO: Use a spacing variable */ margin-top: 10px;
margin-inline-end: 80px; /* Align with the rest of the view */ margin-inline-end: 80px; /* Align with the rest of the view */
margin-bottom: 10px; /* TODO: Use a spacing variable */ margin-bottom: 10px;
margin-inline-start: 0; margin-inline-start: 0;
} }
@ -63,7 +63,7 @@ limitations under the License.
.mx_SettingsFlag { .mx_SettingsFlag {
margin-inline-end: $end-gutter; margin-inline-end: $end-gutter;
margin-bottom: 10px; /* TODO: Use a spacing variable */ margin-bottom: 10px;
.mx_SettingsFlag_label { .mx_SettingsFlag_label {
vertical-align: middle; vertical-align: middle;