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

Add skeleton UI for Room List when no rooms

Browse source
This commit is contained in:
Michael Telatynski 2020-11-02 17:22:45 +00:00
parent 294876f062
commit fa9490b02b
8 changed files with 34 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

19
res/css/views/rooms/_RoomSublist.scss
View file

@ -383,3 +383,22 @@ limitations under the License.
.mx_RoomSublist_addRoomTooltip {
margin-top: -3px;
}
.mx_RoomSublist_skeletonUI {
position: relative;
margin-left: 4px;
height: 288px;
&::before {
background: $roomsublist-skeleton-ui-bg;
width: 100%;
height: 100%;
content: '';
position: absolute;
mask-repeat: repeat-y;
mask-size: auto 48px;
mask-image: url('$(res)/img/element-icons/roomlist/skeleton-ui.svg');
}
}

5
res/img/element-icons/roomlist/skeleton-ui.svg Normal file
View file

@ -0,0 +1,5 @@
<svg width="228" height="48" viewBox="0 0 228 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#D4D4D4"/>
<rect x="39" width="189" height="12" rx="6" fill="#D4D4D4"/>
<rect x="39" y="20" width="143" height="12" rx="6" fill="#D4D4D4"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 282 B

1
res/themes/dark/css/_dark.scss
View file

@ -117,6 +117,7 @@ $roomlist-filter-active-bg-color: $bg-color;
$roomlist-bg-color: rgba(33, 38, 44, 0.90);
$roomlist-header-color: $tertiary-fg-color;
$roomsublist-divider-color: $primary-fg-color;
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%);
$groupFilterPanel-divider-color: $roomlist-header-color;

1
res/themes/legacy-dark/css/_legacy-dark.scss
View file

@ -114,6 +114,7 @@ $roomlist-filter-active-bg-color: $roomlist-button-bg-color;
$roomlist-bg-color: $header-panel-bg-color;
$roomsublist-divider-color: $primary-fg-color;
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%);
$groupFilterPanel-divider-color: $roomlist-header-color;

1
res/themes/legacy-light/css/_legacy-light.scss
View file

@ -181,6 +181,7 @@ $roomlist-filter-active-bg-color: $roomlist-button-bg-color;
$roomlist-bg-color: $header-panel-bg-color;
$roomlist-header-color: $primary-fg-color;
$roomsublist-divider-color: $primary-fg-color;
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%);
$groupFilterPanel-divider-color: $roomlist-header-color;

1
res/themes/light/css/_light.scss
View file

@ -175,6 +175,7 @@ $roomlist-filter-active-bg-color: #ffffff;
$roomlist-bg-color: rgba(245, 245, 245, 0.90);
$roomlist-header-color: $tertiary-fg-color;
$roomsublist-divider-color: $primary-fg-color;
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%);
$groupFilterPanel-divider-color: $roomlist-header-color;