sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

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 09:22:45 +02:00
committed by GitHub
parent 81c894f2d9
commit fe8c267a14
14 changed files with 138 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/views/right_panel/_ThreadPanel.scss
+2 -92
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;