imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
* Remove duplicate declarations and add height and overflow properties

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Move mx_TimelineCard__header under mx_BaseCard_header for normalization

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Normalize mx_BaseCard_close position

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Normalize className of header

- mx_BaseCard_header__ThreadPanel
- mx_BaseCard_header__TimelineCard

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Normalize header's button size

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Normalize inline start header margin

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* normalize header bottom margin for PinnedMessagesCard and TimelineCard

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Normalize header declarations

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Add mixin RightPanelCard

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Move common declarations - top level

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Move common declarations - mx_BaseCard_header

Remove specific declarations on PinnedMessagesCard

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Move common declarations - mx_BaseCard_back and mx_BaseCard_close

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Create a common class name - mx_BaseCard_header_title

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Create a common class name - mx_BaseCard_header_title - ThreadPanel

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Move common declarations - mx_BaseCard_header_title

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Move common declarations - span:first-of-type

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove redundant declarations

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Rename a variable to remove --ThreadPanel_header-button-size

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove class name - mx_BaseCard_header_title

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove mx_BaseCard_header_title--ThreadPanel and h2 declarations from PinnedMessagesCard

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Headers need Heading

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use spacing variables

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Move common style rules of mx_ContextualMenu inside mx_BaseCard_header_title to BaseCard

leaving style rules specific to ThreadPanel.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Hide long header title with ellipsis

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Merge style rules - BaseCard_header-button-size

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Merge style rules - BaseCard_header margin-bottom

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Merge style rules - BaseCard back and close margin

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Merge style rules - BaseCard back ~ mx_BaseCard_header_title

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Merge style rules - mx_BaseCard_header_title

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Return special declarations to _ThreadPanel.scss

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove the mixin

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Add mx_BaseCard_header_title_button--option

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove redundant margin from AppTileFullWidth

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Header on mx_RoomSummaryCard - remove default declarations

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove default declarations from mx_UserInfo

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use variables - _BaseCard.scss

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-06-16 07:22:45 +00:00 • committed by GitHub
parent 81c894f2d9
commit fe8c267a14
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 138 additions and 208 deletions
Download patch file Download diff file Expand all files Collapse all files

114
res/css/views/right_panel/_BaseCard.scss
View file

@ -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;
@ -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;
@ -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%;
@ -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
}
}
}
.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 {
@ -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 {
@ -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;
@ -127,7 +180,7 @@ limitations under the License.
}
&.mx_AccessibleButton_disabled {
padding-right: 12px;
padding-right: $spacing-12;
&::after {
content: unset;
}
@ -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;
@ -159,7 +212,7 @@ limitations under the License.
.mx_NotificationPanel,
.mx_MemberList {
&.mx_BaseCard {
padding: 32px 0 0;
padding: $spacing-32 0 0;
.mx_AutoHideScrollbar {
margin-right: unset;
@ -167,3 +220,38 @@ limitations under the License.
}
}
}
.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
res/css/views/right_panel/_PinnedMessagesCard.scss
View file

@ -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%;

10
res/css/views/right_panel/_RoomSummaryCard.scss
View file

@ -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;
}

94
res/css/views/right_panel/_ThreadPanel.scss
View file

@ -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;
@ -278,40 +221,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;

20
res/css/views/right_panel/_TimelineCard.scss
View file

@ -15,26 +15,6 @@ limitations under the License.
*/
.mx_TimelineCard {
.mx_TimelineCard__header {
margin-left: 6px;
span:first-of-type {
font-weight: 600;
font-size: 15px;
line-height: 18px;
color: $secondary-content;
}
}
.mx_BaseCard_header {
margin: 5px 0 9px 0;
.mx_BaseCard_close {
margin: 8px;
right: 0;
}
}
.mx_TimelineCard_timeline {
overflow: hidden;
position: relative; // offset parent for jump to bottom button

3
res/css/views/right_panel/_UserInfo.scss
View file

@ -18,9 +18,6 @@ limitations under the License.
.mx_UserInfo.mx_BaseCard {
// UserInfo has a circular image at the top so it fits between the back & close buttons
padding-top: 0;
display: flex;
flex-direction: column;
flex: 1;
overflow-y: auto;
font-size: $font-12px;

36
res/css/views/right_panel/_WidgetCard.scss
View file

@ -15,48 +15,12 @@ limitations under the License.
*/
.mx_WidgetCard {
height: 100%;
display: contents;
.mx_AppTileFullWidth {
max-width: unset;
width: auto !important;
margin: 0px $container-border-width 0px $container-border-width;
height: 100%;
border: 0;
}
.mx_BaseCard_header {
display: inline-flex;
& > h2 {
margin-right: 0;
flex-grow: 1;
}
.mx_WidgetCard_optionsButton {
position: relative;
margin-right: 44px;
height: 20px;
width: 20px;
min-width: 20px; // prevent crushing by the flexbox
padding: 0;
&::before {
content: "";
position: absolute;
width: 20px;
height: 20px;
top: 0;
left: 4px;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
background-color: $secondary-content;
}
}
}
}
.mx_WidgetCard_maxPinnedTooltip {