mirror of https://github.com/vector-im/riot-web
Update style rules of `MessageTimestamp` (#10780)
* Remove an obsolete variable - `$MessageTimestamp_width_hover` Added bypull/28788/head^29b54aba4c0
Deprecated5343be7814
* Replace a variable with a custom property - $MessageTimestamp_width * Merge with an existing property in :root rename * Manage the variable on _MessageTimestamp.pcss
parent
36ea338064
commit
9fc4410ee9
|
@ -171,7 +171,7 @@ describe("Timeline", () => {
|
|||
// Check the profile resizer's place
|
||||
// See: _IRCLayout
|
||||
// --RoomView_MessageList-padding = 18px (See: _RoomView.pcss)
|
||||
// --MessageTimestamp-width = $MessageTimestamp_width = 46px (See: _common.pcss)
|
||||
// --MessageTimestamp-width = 46px (See: _MessageTimestamp.pcss)
|
||||
// --icon-width = 14px
|
||||
// --right-padding = 5px
|
||||
// --name-width = 80px
|
||||
|
@ -371,7 +371,7 @@ describe("Timeline", () => {
|
|||
// Check inline start spacing of collapsed GELS
|
||||
// See: _EventTile.pcss
|
||||
// .mx_GenericEventListSummary[data-layout="irc"] > .mx_EventTile_line
|
||||
// = var(--name-width) + var(--icon-width) + $MessageTimestamp_width + 2 * var(--right-padding)
|
||||
// = var(--name-width) + var(--icon-width) + var(--MessageTimestamp-width) + 2 * var(--right-padding)
|
||||
// = 80 + 14 + 46 + 2 * 5
|
||||
// = 150px
|
||||
cy.get(".mx_GenericEventListSummary[data-layout=irc] > .mx_EventTile_line").should(
|
||||
|
@ -388,7 +388,7 @@ describe("Timeline", () => {
|
|||
.should("have.css", "margin-inline-end", "0px");
|
||||
// --icon-width should be applied
|
||||
cy.get(".mx_EventTile .mx_EventTile_avatar > .mx_BaseAvatar").should("have.css", "width", "14px");
|
||||
// $MessageTimestamp_width should be applied
|
||||
// var(--MessageTimestamp-width) should be applied
|
||||
cy.get(".mx_EventTile > a").should("have.css", "min-width", "46px");
|
||||
// Record alignment of collapsed GELS and messages on messagePanel
|
||||
cy.get(".mx_MainSplit").percySnapshotElement("Collapsed GELS and messages on IRC layout", { percyCSS });
|
||||
|
|
|
@ -27,9 +27,6 @@ $hover-transition: 0.08s cubic-bezier(0.46, 0.03, 0.52, 0.96); /* quadratic */
|
|||
|
||||
$selected-message-border-width: 4px;
|
||||
|
||||
$MessageTimestamp_width: 46px; /* 8 + 30 (avatar) + 8 */
|
||||
$MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $selected-message-border-width);
|
||||
|
||||
$slider-dot-size: 1em;
|
||||
$slider-selection-dot-size: 2.4em;
|
||||
|
||||
|
@ -41,7 +38,6 @@ $timeline-image-border-radius: 8px;
|
|||
--container-gap-width: 8px; /* only even numbers should be used because otherwise we get 0.5px margin values. */
|
||||
--transition-short: 0.1s;
|
||||
--transition-standard: 0.3s;
|
||||
--MessageTimestamp-width: $MessageTimestamp_width;
|
||||
--buttons-dialog-gap-row: $spacing-8;
|
||||
--buttons-dialog-gap-column: $spacing-8;
|
||||
}
|
||||
|
|
|
@ -21,7 +21,7 @@ limitations under the License.
|
|||
padding: 10px; /* TODO: Use a spacing variable */
|
||||
border-radius: 8px;
|
||||
/* Reserve space for external timestamps, but also cap the width */
|
||||
max-width: min(calc(100% - 2 * $MessageTimestamp_width), 600px);
|
||||
max-width: min(calc(100% - 2 * var(--MessageTimestamp-width)), 600px);
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
grid-template-columns: 24px minmax(0, 1fr) min-content min-content;
|
||||
|
|
|
@ -14,15 +14,18 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_MessageTimestamp {
|
||||
:root {
|
||||
--MessageTimestamp-width: 46px; /* 8 + 30 (avatar) + 8 */
|
||||
--MessageTimestamp-max-width: 80px;
|
||||
--MessageTimestamp-color: $event-timestamp-color;
|
||||
}
|
||||
|
||||
.mx_MessageTimestamp {
|
||||
color: var(--MessageTimestamp-color);
|
||||
font-size: $font-10px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
display: block; /* enable the width setting below */
|
||||
width: $MessageTimestamp_width;
|
||||
width: var(--MessageTimestamp-width);
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
}
|
||||
|
|
|
@ -55,7 +55,7 @@ limitations under the License.
|
|||
&.mx_EventTile_info .mx_EventTile_line,
|
||||
.mx_EventTile_line {
|
||||
padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-inline);
|
||||
padding-inline-end: $MessageTimestamp_width; /* ensure timestamp is not hidden */
|
||||
padding-inline-end: var(--MessageTimestamp-width); /* ensure timestamp is not hidden */
|
||||
|
||||
.mx_EventTile_e2eIcon {
|
||||
inset-inline-start: $spacing-8;
|
||||
|
@ -157,7 +157,7 @@ limitations under the License.
|
|||
.mx_EventTile_line,
|
||||
.mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
|
||||
padding-inline-start: var(--BaseCard_EventTile-spacing-inline);
|
||||
padding-inline-end: $MessageTimestamp_width; /* ensure timestamp is not hidden */
|
||||
padding-inline-end: var(--MessageTimestamp-width); /* ensure timestamp is not hidden */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -295,7 +295,7 @@ $left-gutter: 64px;
|
|||
|
||||
> a {
|
||||
text-decoration: none; /* timestamps are links which shouldn't be underlined */
|
||||
min-width: $MessageTimestamp_width; /* ensure space for EventTile without timestamp */
|
||||
min-width: var(--MessageTimestamp-width); /* ensure space for EventTile without timestamp */
|
||||
}
|
||||
|
||||
> * {
|
||||
|
@ -650,7 +650,7 @@ $left-gutter: 64px;
|
|||
/* add --right-padding value of MessageTimestamp and avatar only */
|
||||
/* stylelint-disable-next-line declaration-colon-space-after */
|
||||
padding-left: calc(
|
||||
var(--name-width) + var(--icon-width) + $MessageTimestamp_width + 2 * var(--right-padding)
|
||||
var(--name-width) + var(--icon-width) + var(--MessageTimestamp-width) + 2 * var(--right-padding)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -1218,7 +1218,8 @@ $left-gutter: 64px;
|
|||
padding-top: 0;
|
||||
|
||||
.mx_EventTile_avatar {
|
||||
left: calc($MessageTimestamp_width + 14px - 4px); /* 14px: avatar width, 4px: align with text */
|
||||
/* 14px: avatar width, 4px: align with text */
|
||||
left: calc(var(--MessageTimestamp-width) + 14px - 4px);
|
||||
z-index: 9; /* position above the hover styling */
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue