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

Conform to the naming policy - AppsContainer resizer (#11042)

Browse source 
* Add a snapshot to track AppTile in AppsDrawer

* Conform to the naming policy - AppsContainer resizer

* Nest 'mx_AppsContainer_resizer_container_handle' to enforce the style

- mx_AppsContainer_resizer
- mx_AppsContainer_resizer_container
- mx_AppsContainer_resizer_container_handle

* Rename "mx_AppsContainer_resizer" to "mx_AppsDrawer_resizer"

PersistentVResizer is defined by mx_AppsDrawer (see const "classes")
This commit is contained in:
Suguru Hirahara 2023-06-13 11:13:07 +00:00 • committed by GitHub
parent 7c9c818f06
commit 0ce3664434
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 151 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

54
res/css/views/rooms/_AppsDrawer.pcss
View file

@ -32,43 +32,47 @@ limitations under the License.
overflow: hidden;
flex-grow: 1;
.mx_AppsContainer_resizerHandleContainer {
.mx_AppsDrawer_resizer {
margin-bottom: var(--container-gap-width);
}
.mx_AppsDrawer_resizer_container {
width: 100%;
height: 10px;
display: block;
position: relative;
}
.mx_AppsContainer_resizerHandle {
cursor: ns-resize;
.mx_AppsDrawer_resizer_container_handle {
cursor: ns-resize;
/* Override styles from library, making the whole area the target area */
width: 100% !important;
height: 100% !important;
/* Override styles from library, making the whole area the target area */
width: 100% !important;
height: 100% !important;
/* This is positioned directly below frame */
position: absolute;
bottom: 50% !important; /* override from library */
/* We then render the pill handle in an ::after to keep it in the handle's */
/* area without being a massive line across the screen */
&::after {
content: "";
/* This is positioned directly below frame */
position: absolute;
border-radius: 3px;
bottom: 50% !important; /* override from library */
height: 4px;
bottom: 0;
/* We then render the pill handle in an ::after to keep it in the handle's */
/* area without being a massive line across the screen */
&::after {
content: "";
position: absolute;
border-radius: 3px;
/* Together, these make the bar 64px wide */
/* These are also overridden from the library */
left: calc(50% - 32px);
right: calc(50% - 32px);
height: 4px;
bottom: 0;
/* Together, these make the bar 64px wide */
/* These are also overridden from the library */
left: calc(50% - 32px);
right: calc(50% - 32px);
}
}
}
&:hover {
.mx_AppsContainer_resizerHandle::after {
.mx_AppsDrawer_resizer_container_handle::after {
opacity: 0.8;
background: $primary-content;
}
@ -123,10 +127,6 @@ limitations under the License.
}
}
.mx_AppsContainer_resizer {
margin-bottom: var(--container-gap-width);
}
.mx_AppsContainer {
display: flex;
flex-direction: row;