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

Create a common header on right panel cards on BaseCard #8808

Merged
merged 37 commits into from
Jun 16, 2022
Merged

Create a common header on right panel cards on BaseCard #8808

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
dff2a1e
Remove duplicate declarations and add height and overflow properties
luixxiul May 23, 2022
c5be5c2
Move mx_TimelineCard__header under mx_BaseCard_header for normalization
luixxiul May 23, 2022
079c945
Normalize mx_BaseCard_close position
luixxiul May 23, 2022
a14d10f
Normalize className of header
luixxiul May 23, 2022
7a3c091
Normalize header's button size
luixxiul May 23, 2022
60a442c
Normalize inline start header margin
luixxiul May 23, 2022
a0f2164
normalize header bottom margin for PinnedMessagesCard and TimelineCard
luixxiul May 23, 2022
77db3c7
Normalize header declarations
luixxiul May 23, 2022
1a23dbf
Add mixin RightPanelCard
luixxiul May 24, 2022
b5bb839
Move common declarations - top level
luixxiul May 24, 2022
e9cdd64
Move common declarations - mx_BaseCard_header
luixxiul May 24, 2022
ae33972
Move common declarations - mx_BaseCard_back and mx_BaseCard_close
luixxiul May 24, 2022
cea3c73
Create a common class name - mx_BaseCard_header_title
luixxiul May 24, 2022
91b9f09
Create a common class name - mx_BaseCard_header_title - ThreadPanel
luixxiul May 24, 2022
c8ae9bb
Move common declarations - mx_BaseCard_header_title
luixxiul May 24, 2022
89ce8ae
Move common declarations - span:first-of-type
luixxiul May 24, 2022
b832034
Remove redundant declarations
luixxiul May 24, 2022
c010617
Rename a variable to remove --ThreadPanel_header-button-size
luixxiul May 24, 2022
f86e9bd
Remove class name - mx_BaseCard_header_title
luixxiul May 24, 2022
75aac25
Remove mx_BaseCard_header_title--ThreadPanel and h2 declarations from…
luixxiul May 24, 2022
dd12ba9
Headers need Heading
luixxiul Jun 10, 2022
64e3a82
Use spacing variables
luixxiul Jun 10, 2022
2006038
Move common style rules of mx_ContextualMenu inside mx_BaseCard_heade…
luixxiul Jun 10, 2022
463c305
Hide long header title with ellipsis
luixxiul Jun 10, 2022
a9d5485
Merge branch 'develop' into TimelineCard_ThreadPanel
luixxiul Jun 15, 2022
1aeb5f9
Merge style rules - BaseCard_header-button-size
luixxiul Jun 16, 2022
589e58c
Merge style rules - BaseCard_header margin-bottom
luixxiul Jun 16, 2022
9102d5c
Merge style rules - BaseCard back and close margin
luixxiul Jun 16, 2022
9e214b3
Merge style rules - BaseCard back ~ mx_BaseCard_header_title
luixxiul Jun 16, 2022
0d54c8b
Merge style rules - mx_BaseCard_header_title
luixxiul Jun 16, 2022
658b88f
Return special declarations to _ThreadPanel.scss
luixxiul Jun 16, 2022
9e6fb65
Remove the mixin
luixxiul Jun 16, 2022
d4ab261
Add mx_BaseCard_header_title_button--option
luixxiul Jun 15, 2022
7c20ced
Remove redundant margin from AppTileFullWidth
luixxiul Jun 15, 2022
30ea020
Header on mx_RoomSummaryCard - remove default declarations
luixxiul Jun 16, 2022
8a55523
Remove default declarations from mx_UserInfo
luixxiul Jun 16, 2022
ca984b7
Use variables - _BaseCard.scss
luixxiul Jun 16, 2022
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
114 changes: 101 additions & 13 deletions res/css/views/right_panel/_BaseCard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,10 @@ limitations under the License.

.mx_BaseCard {
--BaseCard_EventTile_line-padding-block: 2px;
--BaseCard_EventTile-spacing-inline: 36px;
--BaseCard_EventTile-spacing-inline: 36px; // TODO: Use a spacing variable
--BaseCard_header-button-size: 24px;

padding: 0 8px;
padding: 0 $spacing-8;
overflow: hidden;
display: flex;
flex-direction: column;
Expand All @@ -27,10 +28,10 @@ limitations under the License.
.mx_BaseCard_header {
--BaseCard_header_button-margin: $spacing-12;

margin: $spacing-4 0;
margin: $spacing-4 0 $spacing-12;

> h2 {
margin: 0 44px;
margin: 0 44px; // TODO: Use a spacing variable
font-size: $font-18px;
font-weight: $font-semi-bold;
overflow: hidden;
Expand All @@ -42,8 +43,8 @@ limitations under the License.
.mx_BaseCard_close {
position: absolute;
background-color: rgba(141, 151, 165, 0.2);
height: 20px;
width: 20px;
width: var(--BaseCard_header-button-size);
height: var(--BaseCard_header-button-size);
margin: var(--BaseCard_header_button-margin);
top: 0;
border-radius: 50%;
Expand All @@ -63,22 +64,73 @@ limitations under the License.

.mx_BaseCard_back {
left: 0;
margin-inline-start: calc(var(--BaseCard_header_button-margin) - $spacing-4);

&::before {
transform: rotate(90deg);
mask-size: 22px;
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
}

// Header title with the back button
~ .mx_BaseCard_header_title {
width: calc(100% - 60px);
margin-inline-start: var(--BaseCard_header-button-size);

.mx_BaseCard_header_title_heading {
margin-inline-start: 6px; // TODO: Use a spacing variable
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The value is based on the current implementation.

}
}
}

.mx_BaseCard_close {
right: 0;
margin-inline-end: calc(var(--BaseCard_header_button-margin) - $spacing-4);

&::before {
mask-image: url('$(res)/img/icons-close.svg');
mask-size: 8px;
}
}

.mx_BaseCard_header_title {
display: flex;
align-items: center;
justify-content: space-between;
width: calc(100% - 38px);
height: 24px;
flex: 1;

.mx_BaseCard_header_title_heading {
color: $secondary-content;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.mx_BaseCard_header_title_button--option {
position: relative;
width: var(--BaseCard_header-button-size);
height: var(--BaseCard_header-button-size);

&::after {
content: '';
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
height: 100%;
width: 100%;
mask-repeat: no-repeat;
mask-position: center;
mask-image: url("$(res)/img/element-icons/message/overflow-large.svg");
background-color: $secondary-content;
}

&:hover::after {
background-color: $primary-content;
}
}
}
}

.mx_AutoHideScrollbar {
Expand All @@ -91,11 +143,11 @@ limitations under the License.
}

.mx_BaseCard_Group {
margin: 20px 0 16px;
margin: $spacing-20 0 $spacing-16;

& > * {
margin-left: 12px;
margin-right: 12px;
margin-left: $spacing-12;
margin-right: $spacing-12;
}

> h1 {
Expand All @@ -105,7 +157,8 @@ limitations under the License.
}

.mx_BaseCard_Button {
padding: 10px 10px 10px 12px;
padding: 10px; // TODO: Use a spacing variable
padding-inline-start: $spacing-12;
margin: 0;
position: relative;
font-size: $font-13px;
Expand All @@ -127,7 +180,7 @@ limitations under the License.
}

&.mx_AccessibleButton_disabled {
padding-right: 12px;
padding-right: $spacing-12;
&::after {
content: unset;
}
Expand All @@ -136,7 +189,7 @@ limitations under the License.
}

.mx_BaseCard_footer {
padding-top: 4px;
padding-top: $spacing-4;
text-align: center;
display: flex;
justify-content: space-around;
Expand All @@ -159,11 +212,46 @@ limitations under the License.
.mx_NotificationPanel,
.mx_MemberList {
&.mx_BaseCard {
padding: 32px 0 0;
padding: $spacing-32 0 0;

.mx_AutoHideScrollbar {
margin-right: unset;
padding-right: unset;
}
}
}

.mx_ContextualMenu_wrapper.mx_BaseCard_header_title {
.mx_ContextualMenu {
position: initial;

span:first-of-type {
font-weight: $font-semi-bold;
font-size: inherit;
color: $primary-content;
}

font-size: $font-12px;
color: $secondary-content;
padding-top: 10px; // TODO: Use a spacing variable
padding-bottom: 10px; // TODO: Use a spacing variable

border: 1px solid $quinary-content;
box-shadow: 0px 1px 3px rgba(23, 25, 28, 0.05);
}

.mx_ContextualMenu_chevron_top {
left: auto;
right: 22px; // TODO: Use a spacing variable
border-bottom-color: $quinary-content;

&::after {
content: "";
border: inherit;
border-bottom-color: $menu-bg-color;
position: absolute;
top: 1px;
left: -8px;
}
}
}
18 changes: 0 additions & 18 deletions res/css/views/right_panel/_PinnedMessagesCard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,24 +15,6 @@ limitations under the License.
*/

.mx_PinnedMessagesCard {
padding-top: 0;

.mx_BaseCard_header {
text-align: center;
margin-top: 0;
border-bottom: 1px solid $menu-border-color;

> h2 {
font-weight: $font-semi-bold;
font-size: $font-18px;
margin: 8px 0;
}

.mx_BaseCard_close {
margin-right: 6px;
}
}

.mx_PinnedMessagesCard_empty_wrapper {
display: flex;
height: 100%;
Expand Down
10 changes: 4 additions & 6 deletions res/css/views/right_panel/_RoomSummaryCard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,25 +17,23 @@ limitations under the License.
.mx_RoomSummaryCard {
.mx_BaseCard_header {
text-align: center;
margin-top: 20px;
margin-top: $spacing-20;

h2 {
font-weight: $font-semi-bold;
font-size: $font-18px;
margin: 12px 0 4px;
margin: $spacing-12 0 $spacing-4;
}

.mx_RoomSummaryCard_alias {
font-size: $font-13px;
color: $secondary-content;
overflow: hidden;
text-overflow: ellipsis;
}

h2, .mx_RoomSummaryCard_alias {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: pre-wrap;
}

Expand Down
94 changes: 2 additions & 92 deletions res/css/views/right_panel/_ThreadPanel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,73 +15,16 @@ limitations under the License.
*/

.mx_ThreadPanel {
--ThreadPanel_header-button-size: 24px;

display: flex;
flex-direction: column;
height: 100px;
overflow: visible;

.mx_BaseCard_header {
margin-bottom: $spacing-12;

.mx_BaseCard_close,
.mx_BaseCard_back {
width: var(--ThreadPanel_header-button-size);
height: var(--ThreadPanel_header-button-size);
}

.mx_BaseCard_back {
margin-inline-start: calc(var(--BaseCard_header_button-margin) - 4px);

~ .mx_ThreadPanel__header {
width: calc(100% - 60px);
margin-inline-start: var(--ThreadPanel_header-button-size);

span {
margin-inline-start: 6px;
}
}
}

.mx_BaseCard_close {
margin-inline-end: calc(var(--BaseCard_header_button-margin) - 4px);
}

.mx_ThreadPanel__header {
width: calc(100% - 38px);
height: 24px;
display: flex;
flex: 1;
justify-content: space-between;
align-items: center;

span:first-of-type {
font-weight: 600;
font-size: 15px;
line-height: 18px;
color: $secondary-content;
}

.mx_BaseCard_header_title {
.mx_AccessibleButton {
font-size: 12px;
color: $secondary-content;
}

.mx_MessageActionBar_optionsButton {
position: relative;
}

.mx_MessageActionBar_maskButton {
width: var(--ThreadPanel_header-button-size);
height: var(--ThreadPanel_header-button-size);

&::after {
mask-size: var(--ThreadPanel_header-button-size);
mask-image: url("$(res)/img/element-icons/message/overflow-large.svg");
}
}

.mx_ThreadPanel_dropdown {
padding: 3px $spacing-4 3px $spacing-8; // TODO: Use a spacing variable
border-radius: 4px;
Expand Down Expand Up @@ -296,40 +239,7 @@ limitations under the License.
}
}

.mx_ContextualMenu_wrapper.mx_ThreadPanel__header {
.mx_ContextualMenu {
position: initial;

span:first-of-type {
font-weight: $font-semi-bold;
font-size: inherit;
color: $primary-content;
}

font-size: $font-12px;
color: $secondary-content;
padding-top: 10px;
padding-bottom: 10px;

border: 1px solid $quinary-content;
box-shadow: 0px 1px 3px rgba(23, 25, 28, 0.05);
}

.mx_ContextualMenu_chevron_top {
left: auto;
right: 22px;
border-bottom-color: $quinary-content;

&::after {
content: "";
border: inherit;
border-bottom-color: $menu-bg-color;
position: absolute;
top: 1px;
left: -8px;
}
}

.mx_ContextualMenu_wrapper {
.mx_ThreadPanel_Header_FilterOptionItem {
display: flex;
flex-grow: 1;
Expand Down
Loading