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

Merge pull request #2245 from matrix-org/bwindels/memberlistmakeover

Browse source 
Redesign: memberlist basic makeover
This commit is contained in:
Bruno Windels 2018-10-24 12:23:30 +00:00 • committed by GitHub
commit 25b55b2801
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 160 additions and 193 deletions
Download patch file Download diff file Expand all files Collapse all files

1
res/css/_common.scss
View file

@ -60,7 +60,6 @@ input[type=text].error, input[type=password].error {
}
input[type=text]:focus, input[type=password]:focus, textarea:focus {
border: 1px solid $accent-color;
outline: none;
box-shadow: none;
}

5
res/css/structures/_FilePanel.scss
View file

@ -16,11 +16,8 @@ limitations under the License.
.mx_FilePanel {
order: 2;
flex: 1 1 0;
width: 100%;
background-color: $secondary-accent-color;
overflow-y: auto;
}

7
res/css/structures/_NotificationPanel.scss
View file

@ -16,11 +16,8 @@ limitations under the License.
.mx_NotificationPanel {
order: 2;
flex: 1 1 0;
width: 100%;
background-color: $secondary-accent-color;
overflow-y: auto;
}
@ -97,4 +94,4 @@ limitations under the License.
.mx_NotificationPanel .mx_EventTile_content {
margin-right: 0px;
}
}

74
res/css/structures/_RightPanel.scss
View file

@ -27,19 +27,18 @@ limitations under the License.
order: 1;
border-bottom: 1px solid $primary-hairline-color;
margin-right: 20px;
flex: 0 0 70px;
flex: 0 0 52px;
}
/** Fixme - factor this out with the main header **/
.mx_RightPanel_headerButtonGroup {
margin-top: 6px;
height: 100%;
display: flex;
width: 100%;
background-color: $primary-bg-color;
margin-left: 0px;
padding: 0 9px;
align-items: center;
}
.mx_RightPanel_headerButton {
@ -50,32 +49,34 @@ limitations under the License.
padding-right: 5px;
text-align: center;
position: relative;
border-bottom: 2px solid transparent;
}
.mx_RightPanel_headerButton object {
pointer-events: none;
padding-bottom: 3px;
}
.mx_RightPanel_headerButton_highlight {
width: 25px;
height: 5px;
border-radius: 5px;
background-color: $accent-color;
opacity: 0.2;
border-color: $accent-color;
}
.mx_RightPanel_headerButton_badge {
font-size: 11px;
color: $accent-color;
font-size: 8px;
border-radius: 8px;
color: $accent-fg-color;
background-color: $accent-color;
font-weight: bold;
padding-bottom: 2px;
position: absolute;
top: -4px;
left: 20px;
padding: 2px 4px;
}
.mx_RightPanel_collapsebutton {
flex: 1;
text-align: right;
margin-top: 20px;
height: 16px;
border: none;
}
.mx_RightPanel .mx_MemberList,
@ -90,46 +91,3 @@ limitations under the License.
order: 2;
margin: auto;
}
.mx_RightPanel_footer {
order: 3;
border-top: 1px solid $primary-hairline-color;
margin-right: 20px;
flex: 0 0 60px;
}
.mx_RightPanel_footer .mx_RightPanel_invite {
font-size: 14px;
color: $primary-fg-color;
padding-top: 13px;
padding-left: 5px;
cursor: pointer;
display: flex;
align-items: center;
}
.collapsed .mx_RightPanel_footer .mx_RightPanel_invite {
display: none;
}
.mx_RightPanel_invite .mx_RightPanel_icon object {
pointer-events: none;
}
.mx_RightPanel_invite .mx_RightPanel_message {
padding-left: 10px;
line-height: 18px;
}
.mx_MatrixChat_useCompactLayout {
.mx_RightPanel_footer {
flex: 0 0 50px;
}
.mx_RightPanel_footer .mx_RightPanel_invite {
line-height: 25px;
padding-top: 8px;
}
}

3
res/css/structures/_RoomView.scss
View file

@ -96,7 +96,6 @@ limitations under the License.
.mx_RoomView_body .mx_RoomView_messagePanelSpinner {
order: 2;
margin: auto;
}
.mx_RoomView_body .mx_RoomView_statusArea {
@ -113,8 +112,6 @@ limitations under the License.
}
.mx_RoomView_messageListWrapper {
margin: auto;
min-height: 100%;
display: flex;

103
res/css/views/rooms/_MemberList.scss
View file

@ -17,15 +17,9 @@ limitations under the License.
.mx_MemberList,
.mx_GroupMemberList,
.mx_GroupRoomList {
height: 100%;
margin-top: 12px;
margin-right: 20px;
background-color: $secondary-accent-color;
flex: 1;
display: flex;
flex-direction: column;
}
@ -46,54 +40,47 @@ limitations under the License.
flex: 1 1 0px;
}
.mx_MemberList form,
.mx_GroupMemberList form,
.mx_GroupRoomList form {
margin: 8px;
display: flex;
justify-content: flex-end;
}
.mx_MemberList form > *:not(:first-child),
.mx_GroupMemberList form > *:not(:first-child),
.mx_GroupRoomList form > *:not(:first-child) {
margin-left: 5px;
}
.mx_MemberList_query,
.mx_GroupMemberList_query,
.mx_GroupRoomList_query {
flex: 1 1 0;
box-sizing: border-box;
font-family: $font-family;
border-radius: 3px;
border: 1px solid $input-border-color;
border-radius: 4px;
padding: 9px;
color: $primary-fg-color;
background-color: $primary-bg-color;
margin-left: 3px;
font-size: 14px;
margin-bottom: 8px;
width: 189px;
}
.mx_MemberList_query::-moz-placeholder,
.mx_GroupMemberList_query::-moz-placeholder,
.mx_GroupRoomList_query::-moz-placeholder {
color: $primary-fg-color;
opacity: 0.5;
color: $input-darker-fg-color;
background-color: $input-darker-bg-color;
font-size: 14px;
font-weight: 600;
border: none;
}
.mx_MemberList_query::-webkit-input-placeholder,
.mx_GroupMemberList_query::-webkit-input-placeholder,
.mx_GroupRoomList_query::-webkit-input-placeholder {
color: $primary-fg-color;
.mx_GroupRoomList_query::-webkit-input-placeholder,
.mx_MemberList_query::-moz-placeholder,
.mx_GroupMemberList_query::-moz-placeholder,
.mx_GroupRoomList_query::-moz-placeholder {
color: $input-darker-fg-color;
opacity: 0.5;
font-size: 14px;
}
.mx_MemberList_joined {
order: 2;
flex: 1 0 0;
overflow-y: auto;
}
/*
.mx_MemberList_invited {
order: 3;
flex: 0 0 100px;
overflow-y: auto;
}
*/
.mx_GroupMemberList_invited h2,
.mx_MemberList_invited h2 {
.mx_MemberList h2, .mx_GroupMemberList h2 {
text-transform: uppercase;
color: $h3-color;
font-weight: 600;
@ -104,13 +91,37 @@ limitations under the License.
margin-bottom: 4px;
}
/* we have to have display: table in order for the horizontal wrapping to work */
.mx_MemberList_wrapper {
display: table;
table-layout: fixed;
width: 100%;
padding: 10px;
}
.mx_MemberList_outerWrapper {
height: 0px;
}
.mx_MemberList_inviteIcon object {
pointer-events: none;
}
.mx_MemberList_inviteIcon {
position: absolute;
top: 10px;
left: 10px;
}
.mx_MemberList_invite {
flex: 0 0 auto;
position: relative;
background-color: $button-bg-color;
color: $button-fg-color;
border-radius: 4px;
padding: 8px;
font-weight: 600;
}
/* move text to left */
.mx_MemberList_invite > :last-child {
margin-left: 25px;
}

4
res/css/views/rooms/_RoomHeader.scss
View file

@ -208,6 +208,10 @@ limitations under the License.
pointer-events: none;
}
.mx_RoomHeader_showPanel {
height: 16px;
}
.mx_RoomHeader_voipButton {
display: table-cell;
}

6
res/img/icon-invite-people.svg
View file

@ -1,5 +1,5 @@
<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.9999 3.30001C2.9999 5.02501 4.3499 6.37501 6.0749 6.37501C7.7999 6.45001 9.1499 5.02501 9.1499 3.30001C9.1499 1.57501 7.7999 0.225006 6.0749 0.225006C4.3499 0.225006 2.9999 1.57501 2.9999 3.30001ZM4.1249 3.30001C4.1249 2.25001 5.0249 1.35001 6.0749 1.35001C7.1999 1.35001 8.0249 2.25001 8.0249 3.30001C8.0249 4.35001 7.1249 5.25001 6.0749 5.25001C5.0249 5.25001 4.1249 4.35001 4.1249 3.30001Z" fill="black"/>
<path d="M6.0749 6.97501C9.2249 6.97501 11.7749 9.52501 11.7749 12.675C11.7749 12.975 11.5499 13.275 11.1749 13.275C10.8749 13.275 10.5749 13.05 10.5749 12.675C10.4999 10.2 8.3249 8.25001 5.8499 8.32501C3.4499 8.40001 1.5749 10.35 1.4999 12.675C1.4999 12.975 1.2749 13.275 0.899902 13.275C0.524902 13.275 0.299902 13.05 0.299902 12.675C0.449902 9.52501 2.9249 6.97501 6.0749 6.97501Z" fill="black"/>
<path d="M11.025 6.375C10.725 6.375 10.425 6.15 10.425 5.85C10.425 5.55 10.65 5.25 11.025 5.25H12V4.35C12 4.05 12.225 3.75 12.6 3.75C12.9 3.75 13.2 3.975 13.2 4.35V5.25H14.025C14.325 5.25 14.625 5.475 14.625 5.85C14.625 6.225 14.4 6.375 14.025 6.375H13.125V7.275C13.125 7.575 12.9 7.875 12.525 7.875C12.15 7.875 11.925 7.65 11.925 7.275V6.375H11.025Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.9999 3.30001C2.9999 5.02501 4.3499 6.37501 6.0749 6.37501C7.7999 6.45001 9.1499 5.02501 9.1499 3.30001C9.1499 1.57501 7.7999 0.225006 6.0749 0.225006C4.3499 0.225006 2.9999 1.57501 2.9999 3.30001ZM4.1249 3.30001C4.1249 2.25001 5.0249 1.35001 6.0749 1.35001C7.1999 1.35001 8.0249 2.25001 8.0249 3.30001C8.0249 4.35001 7.1249 5.25001 6.0749 5.25001C5.0249 5.25001 4.1249 4.35001 4.1249 3.30001Z" fill="white"/>
<path d="M6.0749 6.97501C9.2249 6.97501 11.7749 9.52501 11.7749 12.675C11.7749 12.975 11.5499 13.275 11.1749 13.275C10.8749 13.275 10.5749 13.05 10.5749 12.675C10.4999 10.2 8.3249 8.25001 5.8499 8.32501C3.4499 8.40001 1.5749 10.35 1.4999 12.675C1.4999 12.975 1.2749 13.275 0.899902 13.275C0.524902 13.275 0.299902 13.05 0.299902 12.675C0.449902 9.52501 2.9249 6.97501 6.0749 6.97501Z" fill="white"/>
<path d="M11.025 6.375C10.725 6.375 10.425 6.15 10.425 5.85C10.425 5.55 10.65 5.25 11.025 5.25H12V4.35C12 4.05 12.225 3.75 12.6 3.75C12.9 3.75 13.2 3.975 13.2 4.35V5.25H14.025C14.325 5.25 14.625 5.475 14.625 5.85C14.625 6.225 14.4 6.375 14.025 6.375H13.125V7.275C13.125 7.575 12.9 7.875 12.525 7.875C12.15 7.875 11.925 7.65 11.925 7.275V6.375H11.025Z" fill="white"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

Before After
Before After

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

@ -62,6 +62,10 @@ $primary-hairline-color: #474747;
// used for the border of input text fields
$input-border-color: #3a3a3a;
$input-darker-bg-color: #c1c9d6;
$input-darker-fg-color: #9fa9ba;
$button-bg-color: #7ac9a1;
$button-fg-color: white;
// apart from login forms, which have stronger border
$strong-input-border-color: #656565;

13
res/themes/dharma/css/_dharma.scss
View file

@ -67,6 +67,11 @@ $primary-hairline-color: #e5e5e5;
// used for the border of input text fields
$input-border-color: #f0f0f0;
$input-darker-bg-color: rgba(193, 201, 214, 0.29);
$input-darker-fg-color: #9fa9ba;
$button-bg-color: #7ac9a1;
$button-fg-color: white;
// apart from login forms, which have stronger border
$strong-input-border-color: #c7c7c7;
@ -179,11 +184,11 @@ $progressbar-color: #000;
/* align images in buttons (eg spinners) */
vertical-align: middle;
border: 0px;
border-radius: 36px;
border-radius: 4px;
font-family: $font-family;
font-size: 14px;
color: $accent-fg-color;
background-color: $accent-color;
color: $button-fg-color;
background-color: $button-bg-color;
width: auto;
padding: 7px;
padding-left: 1.5em;
@ -197,7 +202,7 @@ $progressbar-color: #000;
}
@define-mixin mx_DialogButton_danger {
background-color: $warning-color;
background-color: $accent-color;
}
@define-mixin mx_DialogButton_small {

4
res/themes/light/css/_base.scss
View file

@ -67,6 +67,10 @@ $primary-hairline-color: #e5e5e5;
// used for the border of input text fields
$input-border-color: #f0f0f0;
$input-darker-bg-color: #c1c9d6;
$input-darker-fg-color: #9fa9ba;
$button-bg-color: #7ac9a1;
$button-fg-color: white;
// apart from login forms, which have stronger border
$strong-input-border-color: #c7c7c7;