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

Merge remote-tracking branch 'origin/experimental' into travis/develop-for-real

Browse source
This commit is contained in:
Travis Ralston 2019-01-03 16:00:23 -07:00
commit 8017f0a4a1
164 changed files with 4652 additions and 2772 deletions
Download patch file Download diff file Expand all files Collapse all files

32
res/css/views/rooms/_EntityTile.scss
View file

@ -15,12 +15,19 @@ limitations under the License.
*/
.mx_EntityTile {
display: table-row;
position: relative;
display: flex;
align-items: center;
color: $primary-fg-color;
cursor: pointer;
}
.mx_EntityTile:hover {
background-image: url('../../img/member_chevron.png');
background-position: center right 10px;
background-repeat: no-repeat;
padding-right: 30px;
}
.mx_EntityTile_invite {
display: table-cell;
vertical-align: middle;
@ -30,12 +37,10 @@ limitations under the License.
.mx_EntityTile_avatar,
.mx_GroupRoomTile_avatar {
display: table-cell;
padding-left: 3px;
padding-right: 12px;
padding-top: 4px;
padding-bottom: 4px;
vertical-align: middle;
width: 36px;
height: 36px;
position: relative;
@ -51,32 +56,21 @@ limitations under the License.
.mx_EntityTile_name,
.mx_GroupRoomTile_name {
display: table-cell;
vertical-align: middle;
flex: 1 1 0;
overflow: hidden;
font-size: 14px;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 155px;
}
.mx_EntityTile_details {
display: table-cell;
padding-right: 14px;
vertical-align: middle;
overflow: hidden;
}
.mx_EntityTile_name_hover {
font-size: 13px;
}
.mx_EntityTile_chevron {
margin-top: 8px;
margin-right: -4px;
margin-left: 6px;
float: right;
}
.mx_EntityTile_ellipsis .mx_EntityTile_name {
font-style: italic;
color: $primary-fg-color;
@ -87,6 +81,7 @@ limitations under the License.
color: $primary-fg-color;
}
/*
.mx_EntityTile_unavailable .mx_EntityTile_avatar,
.mx_EntityTile_unavailable .mx_EntityTile_name,
.mx_EntityTile_unavailable .mx_EntityTile_name_hover,
@ -110,6 +105,7 @@ limitations under the License.
{
opacity: 0.25;
}
*/
.mx_EntityTile_subtext {
font-size: 11px;
@ -118,5 +114,3 @@ limitations under the License.
white-space: nowrap;
text-overflow: clip;
}

7
res/css/views/rooms/_EventTile.scss
View file

@ -55,11 +55,6 @@ limitations under the License.
line-height: 22px;
}
.mx_EventTile .mx_SenderProfile .mx_SenderProfile_name,
.mx_EventTile .mx_SenderProfile .mx_SenderProfile_aux {
opacity: 0.5;
}
.mx_EventTile .mx_SenderProfile .mx_Flair {
opacity: 0.7;
margin-left: 5px;
@ -450,7 +445,7 @@ limitations under the License.
}
.mx_EventTile_content .markdown-body a {
color: $accent-color;
color: $accent-color-alt;
}
.mx_EventTile_content .markdown-body .hljs {

47
res/css/views/rooms/_MemberInfo.scss
View file

@ -15,14 +15,35 @@ limitations under the License.
*/
.mx_MemberInfo {
margin-top: 20px;
padding-right: 20px;
height: 100%;
display: flex;
flex-direction: column;
flex: 1;
overflow-y: auto;
}
.mx_MemberInfo_name {
align-items: center;
display: flex;
}
.mx_MemberInfo_cancel {
height: 16px;
padding: 10px 15px;
cursor: pointer;
}
.mx_MemberInfo_name h2 {
flex: 1;
}
.mx_MemberInfo h2 {
margin-top: 6px;
font-size: 18px;
font-weight: 600;
margin: 16px 0;
}
.mx_MemberInfo_container {
padding: 8px;
}
.mx_MemberInfo .mx_RoomTile_nameContainer {
@ -37,14 +58,16 @@ limitations under the License.
width: 160px;
}
.mx_MemberInfo_cancel {
float: right;
margin-right: 10px;
cursor: pointer;
.mx_MemberInfo_avatar {
background: $tagpanel-bg-color;
}
.mx_MemberInfo_avatar {
clear: both;
.mx_MemberInfo_avatar > img {
height: auto;
width: 100%;
max-height: 30vh;
object-fit: contain;
display: block;
}
.mx_MemberInfo_avatar .mx_BaseAvatar {
@ -70,7 +93,6 @@ limitations under the License.
.mx_MemberInfo_profileField {
font-size: 13px;
position: relative;
background-color: $primary-bg-color;
}
.mx_MemberInfo_buttons {
@ -117,3 +139,6 @@ limitations under the License.
white-space: nowrap;
text-overflow: clip;
}
.mx_MemberInfo .mx_MemberInfo_scrollContainer {
flex: 1;
}

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

@ -17,20 +17,24 @@ limitations under the License.
.mx_MemberList,
.mx_GroupMemberList,
.mx_GroupRoomList {
height: 100%;
margin-top: 12px;
margin-right: 20px;
flex: 1;
display: flex;
flex-direction: column;
}
.mx_MemberList .mx_Spinner {
flex: 0 0 auto;
.mx_Spinner {
flex: 1 0 auto;
}
h2 {
text-transform: uppercase;
color: $h3-color;
font-weight: 600;
font-size: 13px;
padding-left: 3px;
padding-right: 12px;
margin-top: 8px;
margin-bottom: 4px;
}
}
.mx_MemberList_chevron {
@ -49,65 +53,39 @@ limitations under the License.
.mx_MemberList_query,
.mx_GroupMemberList_query,
.mx_GroupRoomList_query {
font-family: $font-family;
border-radius: 3px;
border: 1px solid $input-border-color;
padding: 9px;
color: $primary-fg-color;
background-color: $primary-bg-color;
margin-left: 3px;
font-size: 14px;
margin-bottom: 8px;
width: 189px;
flex: 1 1 0;
}
.mx_MemberList_query::-moz-placeholder,
.mx_GroupMemberList_query::-moz-placeholder,
.mx_GroupRoomList_query::-moz-placeholder {
color: $primary-fg-color;
opacity: 0.5;
font-size: 14px;
}
.mx_MemberList_query::-webkit-input-placeholder,
.mx_GroupMemberList_query::-webkit-input-placeholder,
.mx_GroupRoomList_query::-webkit-input-placeholder {
color: $primary-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 {
text-transform: uppercase;
color: $h3-color;
font-weight: 600;
font-size: 13px;
padding-left: 3px;
padding-right: 12px;
margin-top: 8px;
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_invite,
.mx_RightPanel_invite {
flex: 0 0 auto;
position: relative;
background-color: $button-bg-color;
border-radius: 4px;
padding: 8px;
margin: 9px;
display: flex;
color: $button-fg-color;
font-weight: 600;
.mx_RightPanel_icon {
padding-right: 5px;
padding-top: 2px;
}
}
.mx_MemberList_invite span {
margin: 0 auto;
background-image: url('../../img/feather-icons/user-add.svg');
background-repeat: no-repeat;
background-position: center left;
padding-left: 25px;
}

15
res/css/views/rooms/_MessageComposer.scss
View file

@ -16,7 +16,6 @@ limitations under the License.
*/
.mx_MessageComposer_wrapper {
max-width: 960px;
vertical-align: middle;
margin: auto;
border-top: 1px solid $primary-hairline-color;
@ -58,26 +57,25 @@ limitations under the License.
width: 100%;
}
.mx_MessageComposer_row > div:last-child{
padding-right: 0;
}
.mx_MessageComposer .mx_MessageComposer_avatar {
padding-left: 10px;
padding-right: 28px;
padding: 0 28px;
}
.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar {
display: block;
}
.mx_MessageComposer .mx_AccessibleButton {
padding: 0 12px 0 0;
}
.mx_MessageComposer_composecontrols {
width: 100%;
}
.mx_MessageComposer_e2eIcon {
position: absolute;
left: 44px;
left: 60px;
}
.mx_MessageComposer_noperm_error {
@ -216,7 +214,6 @@ limitations under the License.
.mx_MessageComposer_formatbar {
margin: auto;
max-width: 960px;
display: flex;
height: 30px;

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

@ -14,29 +14,24 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
/* add 20px to the height of the header when editing */
.mx_RoomHeader_editing {
flex: 0 0 93px ! important;
.mx_RoomHeader {
flex: 0 0 52px;
border-bottom: 1px solid $primary-hairline-color;
}
.mx_RoomHeader_wrapper {
max-width: 960px;
margin: auto;
height: 70px;
height: 52px;
align-items: center;
display: flex;
}
.mx_RoomHeader_leftRow {
margin-left: -2px;
order: 1;
flex: 1;
overflow: hidden;
align-items: center;
min-width: 0;
padding: 0 10px 0 19px;
}
.mx_RoomHeader_spinner {
flex: 1;
height: 36px;
order: 2;
padding-left: 12px;
padding-right: 12px;
}
@ -45,7 +40,6 @@ limitations under the License.
@mixin mx_DialogButton;
margin-right: 8px;
margin-top: -5px;
order: 2;
}
.mx_RoomHeader_textButton:hover {
@ -57,31 +51,29 @@ limitations under the License.
}
.mx_RoomHeader_cancelButton {
order: 2;
cursor: pointer;
padding-left: 12px;
padding-right: 12px;
}
.mx_RoomHeader_rightRow {
margin-top: 4px;
background-color: $primary-bg-color;
.mx_RoomHeader_buttons {
display: flex;
align-items: center;
order: 3;
background-color: $primary-bg-color;
padding-right: 5px;
}
.mx_RoomHeader_info {
display: table-cell;
width: 100%;
vertical-align: middle;
display: flex;
flex: 1;
align-items: center;
}
.mx_RoomHeader_simpleHeader {
line-height: 70px;
color: $primary-fg-color;
font-size: 22px;
font-weight: bold;
line-height: 52px;
color: $roomheader-color;
font-size: 18px;
font-weight: 600;
overflow: hidden;
margin-left: 63px;
text-overflow: ellipsis;
@ -99,22 +91,19 @@ limitations under the License.
}
.mx_RoomHeader_name {
vertical-align: middle;
width: 100%;
height: 31px;
flex: 0 1 auto;
overflow: hidden;
color: $primary-fg-color;
font-weight: bold;
font-size: 22px;
padding-left: 19px;
padding-right: 16px;
/* why isn't text-overflow working? */
text-overflow: ellipsis;
color: $roomheader-color;
font-weight: 600;
font-size: 18px;
margin: 0 7px;
border-bottom: 1px solid transparent;
}
.mx_RoomHeader_nametext {
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.mx_RoomHeader_settingsHint {
@ -166,25 +155,23 @@ limitations under the License.
}
.mx_RoomHeader_topic {
vertical-align: bottom;
float: left;
max-height: 38px;
color: $settings-grey-fg-color;
font-weight: 300;
flex: 1;
color: $roomtopic-color;
font-weight: 400;
font-size: 13px;
margin-left: 19px;
margin-right: 16px;
margin: 0 7px;
overflow: hidden;
text-overflow: ellipsis;
border-bottom: 1px solid transparent;
column-width: 960px;
line-height: 1.2em;
max-height: 2.4em;
}
.mx_RoomHeader_avatar {
display: table-cell;
width: 48px;
height: 50px;
vertical-align: middle;
flex: 0;
width: 28px;
height: 28px;
margin: 0 7px;
}
.mx_RoomHeader_avatar .mx_BaseAvatar_image {
@ -192,13 +179,13 @@ limitations under the License.
}
.mx_RoomHeader_avatarPicker {
margin-top: 23px;
position: relative;
}
.mx_RoomHeader_avatarPicker_edit {
margin-left: 16px;
margin-top: 4px;
position: absolute;
left: 16px;
top: 18px;
}
.mx_RoomHeader_avatarPicker_edit > label {
@ -210,7 +197,7 @@ limitations under the License.
}
.mx_RoomHeader_button {
margin-left: 12px;
margin-left: 10px;
cursor: pointer;
}
@ -218,6 +205,10 @@ limitations under the License.
pointer-events: none;
}
.mx_RoomHeader_showPanel {
height: 16px;
}
.mx_RoomHeader_voipButton {
display: table-cell;
}

30
res/css/views/rooms/_RoomList.scss
View file

@ -16,8 +16,21 @@ limitations under the License.
*/
.mx_RoomList {
padding-bottom: 12px;
min-height: 400px;
/* take up remaining space below TopLeftMenu */
flex: 1 1 auto;
/* use flexbox to layout sublists */
display: flex;
flex-direction: column;
min-height: 0;
}
.mx_SearchBox {
flex: none;
}
/* hide resize handles next to collapsed / empty sublists */
.mx_RoomList .mx_RoomSubList:not(.mx_RoomSubList_nonEmpty) + .mx_ResizeHandle {
display: none;
}
.mx_RoomList_expandButton {
@ -27,20 +40,7 @@ limitations under the License.
padding-right: 12px;
}
/* Evil hacky override until Chrome fixes drop and drag table cells
and we can correctly fix horizontal wrapping in the sidebar again */
.mx_RoomList_scrollbar .gm-scroll-view {
overflow-x: hidden ! important;
overflow-y: scroll ! important;
}
/* Make sure the scrollbar is above the sticky headers from RoomList */
.mx_RoomList_scrollbar .gm-scrollbar.-vertical {
z-index: 6;
}
.mx_RoomList_emptySubListTip_container {
background-color: $secondary-accent-color;
padding-left: 18px;
padding-right: 18px;
padding-top: 8px;

3
res/css/views/rooms/_RoomSettings.scss
View file

@ -16,8 +16,7 @@ limitations under the License.
*/
.mx_RoomSettings {
margin-left: 65px;
margin-bottom: 20px;
margin: 40px;
}
.mx_RoomSettings_upgradeButton,

136
res/css/views/rooms/_RoomTile.scss
View file

@ -15,13 +15,30 @@ limitations under the License.
*/
.mx_RoomTile {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
cursor: pointer;
font-size: 13px;
display: block;
height: 34px;
margin: 0;
padding: 0 8px 0 10px;
position: relative;
}
background-color: $secondary-accent-color;
.mx_RoomTile_menuButton {
display: none;
flex: 0 0 16px;
height: 16px;
background-image: url('../../img/icon_context.svg');
background-repeat: no-repeat;
background-position: center;
}
// toggle menuButton and badge on hover/menu displayed
.mx_LeftPanel_container:not(.collapsed) .mx_RoomTile:hover, .mx_RoomTile_menuDisplayed {
.mx_RoomTile_menuButton {
display: block;
}
}
.mx_RoomTile_tooltip {
@ -38,6 +55,11 @@ limitations under the License.
vertical-align: middle;
}
.mx_RoomTile_avatar {
flex: 0;
padding: 4px;
}
.mx_RoomTile_subtext {
display: inline-block;
font-size: 11px;
@ -78,87 +100,53 @@ limitations under the License.
}
.mx_RoomTile_name {
display: inline-block;
position: relative;
width: 165px;
vertical-align: middle;
padding-left: 6px;
padding-right: 6px;
padding-top: 2px;
padding-bottom: 3px;
flex: 1 5 auto;
font-size: 14px;
font-weight: 600;
padding: 6px;
color: $roomtile-name-color;
white-space: nowrap;
overflow: hidden;
overflow-x: hidden;
text-overflow: ellipsis;
}
.mx_RoomTile_invite {
/* color: rgba(69, 69, 69, 0.5); */
}
.collapsed {
.mx_RoomTile {
margin: 0 2px;
padding: 0 2px;
position: relative;
justify-content: center;
}
.collapsed .mx_RoomTile_nameContainer {
width: 60px; /* colapsed panel width */
}
.mx_RoomTile_name {
display: none;
}
.collapsed .mx_RoomTile_name {
display: none;
}
.mx_RoomTile_badge {
position: absolute;
right: 6px;
top: 0px;
border-radius: 16px;
z-index: 3;
border: 0.18em solid $secondary-accent-color;
}
.collapsed .mx_RoomTile_badge {
top: 0px;
min-width: 12px;
border-radius: 16px;
padding: 0px 4px 0px 4px;
z-index: 3;
}
/* Hide the bottom of speech bubble */
.collapsed .mx_RoomTile_highlight .mx_RoomTile_badge:after {
display: none;
}
/* This is the bottom of the speech bubble */
.mx_RoomTile_highlight .mx_RoomTile_badge:after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
margin-left: 5px;
border-top: 5px solid $warning-color;
border-right: 7px solid transparent;
.mx_RoomTile_menuButton {
display: none; //no design for this for now
}
}
.mx_RoomTile_badge {
display: inline-block;
min-width: 15px;
height: 15px;
position: absolute;
right: 8px; /*gutter */
top: 9px;
border-radius: 8px;
flex: 0 1 content;
border-radius: 0.8em;
padding: 0 0.4em;
color: $accent-fg-color;
font-weight: 600;
font-size: 10px;
text-align: center;
padding-top: 1px;
padding-left: 4px;
padding-right: 4px;
}
.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton,
.mx_RoomTile.mx_RoomTile_menuDisplayed .mx_RoomTile_badge {
letter-spacing: 0.1em;
opacity: 1;
}
.mx_RoomTile.mx_RoomTile_noBadges .mx_RoomTile_badge.mx_RoomTile_badgeButton,
.mx_RoomTile.mx_RoomTile_menuDisplayed.mx_RoomTile_noBadges .mx_RoomTile_badge {
background-color: $neutral-badge-color;
font-size: 12px;
}
.mx_RoomTile_unreadNotify .mx_RoomTile_badge {
background-color: $accent-color;
background-color: $roomtile-name-color;
}
.mx_RoomTile_highlight .mx_RoomTile_badge {
@ -167,9 +155,14 @@ limitations under the License.
.mx_RoomTile_unread, .mx_RoomTile_highlight {
font-weight: 800;
.mx_RoomTile_name {
color: $roomtile-selected-color;
}
}
.mx_RoomTile_selected {
border-radius: 4px;
background-color: $roomtile-selected-bg-color;
}
@ -187,10 +180,6 @@ limitations under the License.
background-color: $roomtile-focused-bg-color;
}
.mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown {
width: 140px;
}
.mx_RoomTile_arrow {
position: absolute;
right: 0px;
@ -203,4 +192,3 @@ limitations under the License.
.mx_RoomTile.mx_RoomTile_transparent:focus {
background-color: $roomtile-transparent-focused-color;
}

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

@ -21,7 +21,7 @@ limitations under the License.
width: 0;
height: 0;
border-top: 8px solid transparent;
border-right: 8px solid $menu-border-color;
border-right: 8px solid $menu-bg-color;
border-bottom: 8px solid transparent;
}
@ -40,8 +40,8 @@ limitations under the License.
.mx_RoomTooltip {
display: none;
position: fixed;
border: 1px solid $menu-border-color;
border-radius: 5px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.21);
background-color: $primary-bg-color;
z-index: 2000;
padding: 5px;

66
res/css/views/rooms/_TopUnreadMessagesBar.scss
View file

@ -14,40 +14,48 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
@charset "utf-8";
.mx_TopUnreadMessagesBar {
margin: auto; /* centre horizontally */
max-width: 960px;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid $primary-hairline-color;
z-index: 1000;
position: absolute;
top: 24px;
right: 24px;
width: 38px;
}
.mx_TopUnreadMessagesBar:after {
content: "·";
position: absolute;
top: -8px;
left: 11px;
width: 16px;
height: 16px;
border-radius: 16px;
font-weight: 600;
font-size: 30px;
line-height: 14px;
text-align: center;
color: $secondary-accent-color;
background-color: $accent-color;
}
.mx_TopUnreadMessagesBar_scrollUp {
display: inline;
cursor: pointer;
text-decoration: underline;
}
.mx_TopUnreadMessagesBar_scrollUp img {
padding-left: 10px;
padding-right: 31px;
vertical-align: middle;
}
.mx_TopUnreadMessagesBar_scrollUp span {
opacity: 0.5;
}
.mx_TopUnreadMessagesBar_close {
float: right;
padding-right: 14px;
padding-top: 3px;
height: 38px;
border-radius: 19px;
box-sizing: border-box;
background: $primary-bg-color;
border: 1.3px solid $roomtile-name-color;
cursor: pointer;
}
.mx_MatrixChat_useCompactLayout {
.mx_TopUnreadMessagesBar {
padding-top: 4px;
padding-bottom: 4px;
}
.mx_TopUnreadMessagesBar_scrollUp:before {
content: "";
position: absolute;
width: 38px;
height: 38px;
mask: url('../../img/icon-jump-to-first-unread.svg');
mask-repeat: no-repeat;
mask-position: 9px 13px;
background: $roomtile-name-color;
}

77
res/css/views/rooms/_WhoIsTypingTile.scss Normal file
View file

@ -0,0 +1,77 @@
/*
Copyright 2018 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_WhoIsTypingTile {
margin-left: -18px; //offset padding from mx_RoomView_MessageList to center avatars
padding-top: 18px;
display: flex;
align-items: center;
}
/* position the indicator in the same place horizontally as .mx_EventTile_avatar. */
.mx_WhoIsTypingTile_avatars {
flex: 0 0 83px; // 18 + 65
text-align: center;
}
.mx_WhoIsTypingTile_avatars > :not(:first-child) {
margin-left: -12px;
}
.mx_WhoIsTypingTile_avatars .mx_BaseAvatar_image {
border: 1px solid $primary-bg-color;
}
.mx_WhoIsTypingTile_avatars .mx_BaseAvatar_initial {
padding-top: 1px;
}
.mx_WhoIsTypingTile_remainingAvatarPlaceholder {
display: inline-block;
color: #acacac;
background-color: #ddd;
border: 1px solid $primary-bg-color;
border-radius: 40px;
width: 24px;
height: 24px;
line-height: 24px;
font-size: 0.8em;
vertical-align: top;
text-align: center;
}
.mx_WhoIsTypingTile_label {
flex: 1;
font-size: 14px;
font-weight: 600;
color: $eventtile-meta-color;
}
.mx_WhoIsTypingTile_label > span {
background-image: url('../../img/typing-indicator-2x.gif');
background-size: 25px;
background-position: left bottom;
background-repeat: no-repeat;
padding-bottom: 15px;
display: block;
}
.mx_MatrixChat_useCompactLayout {
.mx_WhoIsTypingTile {
padding-top: 4px;
}
}