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

Merge branch 'develop' into fix-emoji

Browse source
This commit is contained in:
Aviral Dasgupta 2016-08-09 22:22:48 +05:30
commit 19d5063814
57 changed files with 955 additions and 264 deletions
Download patch file Download diff file Expand all files Collapse all files

91
src/skins/vector/css/common.css
View file

@ -52,6 +52,10 @@ a:visited {
color: #76cfa6;
}
input[type=text].error, input[type=password].error {
border: 1px solid red;
}
input[type=text]:focus, textarea:focus {
border: 1px solid #76CFA6;
outline: none;
@ -80,53 +84,27 @@ input[type=text]:focus, textarea:focus {
position: absolute;
}
/* hack to avoid accidental click-throughs if you miss the narrow scrollbar */
/* Expand thumbs on hoverover */
.gm-scrollbar {
border-radius: 5px ! important;
}
.gm-scrollbar.-vertical {
border-left: 6px solid transparent;
width: 6px;
transition: width 120ms ease-out ! important;
}
.mx_ContextualMenu_background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1.0;
z-index: 2000;
.gm-scrollbar.-vertical:hover,
.gm-scrollbar.-vertical:active {
width: 8px;
transition: width 120ms ease-out ! important;
}
.mx_ContextualMenu {
border: 1px solid #a4a4a4;
border-radius: 8px;
background-color: #fff;
color: #747474;
position: fixed;
z-index: 2001;
padding: 6px;
.gm-scrollbar.-horizontal {
height: 6px;
transition: height 120ms ease-out ! important;
}
.mx_ContextualMenu_chevron_right {
padding: 12px;
position: absolute;
right: -21px;
top: 0px;
}
.mx_ContextualMenu_chevron_left {
padding: 12px;
position: absolute;
left: -21px;
top: 0px;
}
.mx_ContextualMenu_field {
padding: 3px 6px 3px 6px;
cursor: pointer;
}
.mx_ContextualMenu_spinner {
display: block;
margin: 0 auto;
.gm-scrollbar.-horizontal:hover,
.gm-scrollbar.-horizontal:active {
height: 8px;
transition: height 120ms ease-out ! important;
}
.mx_Dialog_wrapper {
@ -233,6 +211,17 @@ input[type=text]:focus, textarea:focus {
background-color: #76cfa6;
}
.mx_Dialog button.danger, .mx_Dialog input[type="submit"].danger {
background-color: #ff0064;
border: solid 1px #ff0064;
}
.mx_Dialog button:disabled, .mx_Dialog input[type="submit"]:disabled {
background-color: #777777;
border: solid 1px #777777;
opacity: 0.7;
}
.mx_Dialog_title {
min-height: 16px;
padding-top: 40px;
@ -242,6 +231,10 @@ input[type=text]:focus, textarea:focus {
color: #454545;
}
.mx_Dialog_title.danger {
color: #ff0064;
}
.mx_TextInputDialog_label {
text-align: left;
padding-bottom: 12px;
@ -270,3 +263,15 @@ input[type=text]:focus, textarea:focus {
background-color: #76CFA6;
color: white;
}
/** green button with rounded corners */
.textButton {
color: #fff;
background-color: #76cfa6;
border-radius: 17px;
text-align: center;
padding-left: 1em;
padding-right: 1em;
cursor: pointer;
display: inline;
}

106
src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css Normal file
View file

@ -0,0 +1,106 @@
/*
Copyright 2015, 2016 OpenMarket 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_ContextualMenu_wrapper {
position: fixed;
z-index: 2000;
}
.mx_ContextualMenu_background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1.0;
z-index: 2000;
}
.mx_ContextualMenu {
border: solid 1px rgba(187, 187, 187, 0.5);
border-radius: 4px;
background-color: #f6f6f6;
color: #4a4a4a;
position: absolute;
padding: 6px;
font-size: 14px;
z-index: 2001;
}
.mx_ContextualMenu.mx_ContextualMenu_right {
right: 8px;
}
.mx_ContextualMenu_chevron_right {
position: absolute;
right: -8px;
top: 0px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-left: 8px solid rgba(187, 187, 187, 0.5);
border-bottom: 8px solid transparent;
}
.mx_ContextualMenu_chevron_right:after{
content:'';
width: 0;
height: 0;
border-top: 7px solid transparent;
border-left: 7px solid #f6f6f6;
border-bottom: 7px solid transparent;
position:absolute;
top: -7px;
right: 1px;
}
.mx_ContextualMenu.mx_ContextualMenu_left {
left: 8px;
}
.mx_ContextualMenu_chevron_left {
position: absolute;
left: -8px;
top: 0px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-right: 8px solid rgba(187, 187, 187, 0.5);
border-bottom: 8px solid transparent;
}
.mx_ContextualMenu_chevron_left:after{
content:'';
width: 0;
height: 0;
border-top: 7px solid transparent;
border-right: 7px solid #f6f6f6;
border-bottom: 7px solid transparent;
position:absolute;
top: -7px;
left: 1px;
}
.mx_ContextualMenu_field {
padding: 3px 6px 3px 6px;
cursor: pointer;
white-space: nowrap;
}
.mx_ContextualMenu_spinner {
display: block;
margin: 0 auto;
}

4
src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css
View file

@ -93,8 +93,8 @@ limitations under the License.
background-color: #eaf5f0;
-webkit-flex: 0 0 210px;
flex: 0 0 210px;
-webkit-flex: 0 0 235px;
flex: 0 0 235px;
}
.mx_MatrixChat .mx_LeftPanel.collapsed {

8
src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css
View file

@ -16,8 +16,8 @@ limitations under the License.
.mx_SearchBox {
height: 24px;
margin-left: 16px;
margin-right: 20px;
margin-left: 18px;
margin-right: 18px;
padding-top: 24px;
padding-bottom: 22px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
@ -28,11 +28,13 @@ limitations under the License.
.mx_SearchBox_searchButton {
margin-right: 10px;
margin-top: 5px;
pointer-events: none;
}
.mx_SearchBox_closeButton {
cursor: pointer;
margin-top: -5px;
}
.mx_SearchBox_search {
@ -65,4 +67,4 @@ limitations under the License.
.mx_SearchBox object {
pointer-events: none;
}
}

4
src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css
View file

@ -94,6 +94,10 @@ limitations under the License.
cursor: pointer;
}
.mx_UserSettings_button.danger {
background-color: #ff0064;
}
.mx_UserSettings_section {
margin-left: 63px;
margin-top: 28px;

16
src/skins/vector/css/matrix-react-sdk/views/messages/UnknownBody.css Normal file
View file

@ -0,0 +1,16 @@
/*
Copyright 2015, 2016 OpenMarket 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_UnknownBody {
white-space: pre-wrap;
}

1
src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css
View file

@ -17,6 +17,7 @@ limitations under the License.
.mx_MemberInfo {
margin-top: 20px;
height: 100%;
overflow-y: auto;
}
.mx_MemberInfo h2 {

18
src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css
View file

@ -109,9 +109,10 @@ limitations under the License.
.mx_MessageComposer_videocall {
/*display: table-cell;*/
/*vertical-align: middle;*/
padding-left: 10px;
padding-right: 10px;
/*padding-left: 10px;*/
padding-right: 5px;
cursor: pointer;
padding-top: 4px;
}
.mx_MessageComposer_upload object,
@ -121,16 +122,3 @@ limitations under the License.
pointer-events: none;
}
.mx_MessageComposer_videocall {
padding-right: 10px;
padding-top: 4px;
}
.mx_MessageComposer_voicecall {
padding-right: 10px;
padding-top: 4px;
}
.mx_MessageComposer_upload object {
margin-top: 5px;
}

19
src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css
View file

@ -103,7 +103,8 @@ limitations under the License.
.mx_RoomHeader_rightRow {
margin-top: 4px;
background-color: #fff;
display: flex;
align-items: center;
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-ms-flex-order: 3;
@ -161,13 +162,6 @@ limitations under the License.
opacity: 0.6;
}
.mx_RoomHeader_settingsButton {
display: inline-block;
position: relative;
bottom: 10px;
left: 4px;
}
.mx_RoomHeader_settingsButton object {
pointer-events: none;
}
@ -183,10 +177,6 @@ limitations under the License.
color: #76cfa6;
}
.mx_RoomHeader_leaveButton {
margin-top: -1px;
}
.mx_RoomHeader_placeholder {
color: #a2a2a2 ! important;
}
@ -243,10 +233,7 @@ limitations under the License.
}
.mx_RoomHeader_button {
display: table-cell;
vertical-align: top;
padding-left: 8px;
padding-right: 8px;
margin-left: 8px;
cursor: pointer;
}

97
src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
View file

@ -15,18 +15,25 @@ limitations under the License.
*/
.mx_RoomTile {
position: relative;
cursor: pointer;
/* This fixes wrapping of long room names, but breaks drag & drop previews */
/* display: table-row; */
font-size: 13px;
display: block;
height: 34px;
}
.mx_RoomTile_nameContainer {
display: inline-block;
width: 180px;
height: 24px;
}
.mx_RoomTile_avatar {
display: inline-block;
padding-top: 6px;
padding-bottom: 6px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 18px;
padding-right: 6px;
width: 24px;
height: 24px;
vertical-align: middle;
@ -34,13 +41,17 @@ limitations under the License.
.mx_RoomTile_name {
display: inline-block;
width: 100px;
position: relative;
width: 165px;
vertical-align: middle;
overflow: hidden;
word-break: break-word;
padding-left: 11px;
padding-right: 15px;
padding-left: 6px;
padding-right: 6px;
padding-top: 2px;
padding-bottom: 3px;
color: rgba(69, 69, 69, 0.8);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mx_RoomTile_ellipsis .mx_RoomTile_name {
@ -53,17 +64,16 @@ limitations under the License.
*/
}
.collapsed .mx_RoomTile_nameContainer {
height: 0;
}
.collapsed .mx_RoomTile_name {
display: none;
}
.collapsed .mx_RoomTile {
height: 36px;
}
.collapsed .mx_RoomTile_badge {
top: -40px;
left: 30px;
top: -2px;
min-width: 12px;
height: 16px;
border-radius: 16px;
@ -71,6 +81,11 @@ limitations under the License.
z-index: 200;
}
/* 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: "";
@ -78,39 +93,39 @@ limitations under the License.
display: block;
width: 0;
height: 0;
margin-left: 4px;
margin-left: 6px;
border-top: 8px solid #ff0064;
border-right: 10px solid transparent;
}
/* Because the specificity of this and the above ".mx_RoomTile_highlight .mx_RoomTile_badge:after"
style are the same, this style needs to be AFTER it to take effect when matched */
.collapsed .mx_RoomTile_badge:after {
display: none;
}
.mx_RoomTile_badge {
display: inline-block;
min-width: 14px;
height: 18px;
position: relative;
left: 8px;
top: 2px;
border-radius: 18px;
min-width: 19px;
height: 17px;
position: absolute;
right: 8px; /*gutter */
top: 9px;
border-radius: 14px;
color: #fff;
font-weight: bold;
font-weight: 600;
font-size: 11px;
text-align: center;
padding-top: 2px;
padding-top: 1px;
padding-left: 4px;
padding-right: 4px;
}
.mx_RoomTile_badge:hover {
.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton,
.mx_RoomTile.mx_RoomTile_menu .mx_RoomTile_badge {
letter-spacing: 0.1em;
opacity: 1;
}
.mx_RoomTile.mx_RoomTile_noBadges .mx_RoomTile_badge.mx_RoomTile_badgeButton,
.mx_RoomTile.mx_RoomTile_menu.mx_RoomTile_noBadges .mx_RoomTile_badge {
background-color: rgb(214, 214, 214);
}
.mx_RoomTile_unreadNotify .mx_RoomTile_badge {
background-color: #76cfa6;
}
@ -119,26 +134,18 @@ style are the same, this style needs to be AFTER it to take effect when matched
background-color: #ff0064;
}
.mx_RoomTile_badge_no_unread {
background-color: rgb(214, 214, 214);
opacity: 0;
}
.mx_RoomTile_unread, .mx_RoomTile_highlight {
font-weight: bold;
font-weight: 800;
}
.mx_RoomTile_selected .mx_RoomTile_name span {
display: inline-block;
position: relative;
width: 100%;
padding: 4px;
margin-top: -4px;
margin-bottom: -4px;
border-radius: 2px;
.mx_RoomTile_selected {
background-color: rgba(118,207,166,0.2);
}
.mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown {
width: 140px;
}
.mx_RoomTile_arrow {
position: absolute;
right: 0px;

47
src/skins/vector/css/matrix-react-sdk/views/settings/DevicesPanel.css Normal file
View file

@ -0,0 +1,47 @@
/*
Copyright 2016 OpenMarket 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_DevicesPanel {
display: table;
table-layout: fixed;
width: 880px;
border-spacing: 2px;
}
.mx_DevicesPanel_header {
display: table-header-group;
font-weight: bold;
}
.mx_DevicesPanel_header > div {
display: table-cell;
}
.mx_DevicesPanel_header .mx_DevicesPanel_deviceLastSeen {
width: 30%;
}
.mx_DevicesPanel_header .mx_DevicesPanel_deviceButtons {
width: 20%;
}
.mx_DevicesPanel_device {
display: table-row;
}
.mx_DevicesPanel_device > div {
display: table-cell;
}

33
src/skins/vector/css/matrix-react-sdk/views/settings/IntegrationsManager.css Normal file
View file

@ -0,0 +1,33 @@
/*
Copyright 2015, 2016 OpenMarket 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_IntegrationsManager {
display: -webkit-flex;
display: flex;
width: 100%;
height: 100%;
-webkit-align-items: center;
align-items: center;
justify-content: center;
-webkit-justify-content: center;
}
.mx_IntegrationsManager iframe {
background-color: #fff;
border: 0px;
width: 720px;
height: 512px;
}

13
src/skins/vector/css/vector-web/structures/LeftPanel.css
View file

@ -51,6 +51,10 @@ limitations under the License.
overflow-y: auto;
}
.mx_LeftPanel.collapsed .mx_BottomLeftMenu {
flex: 0 0 120px;
}
.mx_LeftPanel .mx_BottomLeftMenu {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
@ -59,10 +63,11 @@ limitations under the License.
order: 3;
border-top: 1px solid rgba(0, 0, 0, 0.1);
margin-left: 18px;
margin-right: 18px;
margin-left: 16px; /* gutter */
margin-right: 16px; /* gutter */
-webkit-flex: 0 0 60px;
flex: 0 0 60px;
z-index: 1;
}
.mx_LeftPanel .mx_BottomLeftMenu_options {
@ -95,3 +100,7 @@ limitations under the License.
.mx_LeftPanel .mx_BottomLeftMenu_settings {
float: right;
}
.mx_LeftPanel.collapsed .mx_BottomLeftMenu_settings {
float: none;
}

25
src/skins/vector/css/vector-web/structures/RightPanel.css
View file

@ -43,7 +43,7 @@ limitations under the License.
/** Fixme - factor this out with the main header **/
.mx_RightPanel_headerButtonGroup {
margin-top: 25px;
margin-top: 6px;
float: left;
background-color: #fff;
margin-left: -4px;
@ -55,34 +55,27 @@ limitations under the License.
vertical-align: middle;
padding-left: 15px;
padding-right: 15px;
text-align: center;
position: relative;
}
.mx_RightPanel_headerButton object {
pointer-events: none;
padding-bottom: 3px;
}
.mx_RightPanel_headerButton_highlight {
position: absolute;
bottom: -2px;
left: 10px;
width: 25px;
height: 4px;
background-color: #76cfa6;
height: 5px;
border-radius: 5px;
background-color: rgba(118, 207, 166, 0.2);
}
.mx_RightPanel_headerButton_badge {
position: absolute;
top: 4px;
left: 28px;
font-size: 12px;
background-color: #76cfa6;
color: #fff;
font-size: 11px;
color: #76cfa6;
font-weight: bold;
border-radius: 20px;
padding-left: 4px;
padding-right: 4px;
padding-top: 0px;
padding-bottom: 2px;
}
.mx_RightPanel .mx_MemberList,

4
src/skins/vector/css/vector-web/structures/RoomSubList.css
View file

@ -25,8 +25,8 @@ limitations under the License.
color: #3d3b39;
font-weight: 600;
font-size: 13px;
padding-left: 12px;
padding-right: 12px;
padding-left: 16px; /* gutter */
padding-right: 16px; /* gutter */
margin-top: 8px;
margin-bottom: 4px;
cursor: pointer;

25
src/skins/vector/css/vector-web/views/context_menus/MessageContextMenu.css Normal file
View file

@ -0,0 +1,25 @@
/*
Copyright 2015, 2016 OpenMarket 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_MessageContextMenu_field {
padding: 3px 6px 3px 6px;
cursor: pointer;
white-space: nowrap;
}
.mx_MessageContextMenu_field.mx_MessageContextMenu_fieldSet {
font-weight: bold;
}

56
src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css Normal file
View file

@ -0,0 +1,56 @@
/*
Copyright 2015, 2016 OpenMarket 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_NotificationStateContextMenu_picker {
position: absolute;
top: 16px;
left: 5px;
}
.mx_NotificationStateContextMenu_field {
padding-top: 4px;
padding-right: 6px;
padding-bottom: 10px;
padding-left: 8px; /* 20px */
cursor: pointer;
white-space: nowrap;
display: flex;
align-items: center;
}
.mx_NotificationStateContextMenu_field.mx_NotificationStateContextMenu_fieldSet {
font-weight: bold;
}
.mx_NotificationStateContextMenu_field.mx_NotificationStateContextMenu_fieldDisabled {
color: rgba(0, 0, 0, 0.2);
}
.mx_NotificationStateContextMenu_icon {
padding-right: 4px;
padding-left: 4px;
}
.mx_NotificationStateContextMenu_activeIcon {
display: inline-block;
opacity: 0;
position: relative;
left: -5px;
}
.mx_NotificationStateContextMenu_fieldSet .mx_NotificationStateContextMenu_activeIcon {
opacity: 1;
}

1
src/skins/vector/css/vector-web/views/elements/ImageView.css
View file

@ -69,6 +69,7 @@ limitations under the License.
.mx_ImageView_labelWrapper {
position: absolute;
top: 0px;
right: 0px;
height: 100%;
overflow: auto;
pointer-events: all;

8
src/skins/vector/css/vector-web/views/globals/MatrixToolbar.css
View file

@ -33,6 +33,11 @@ limitations under the License.
margin-top: -2px;
}
.mx_MatrixToolbar_content {
-webkit-flex: 1;
flex: 1;
}
.mx_MatrixToolbar_link
{
color: #fff ! important;
@ -41,10 +46,7 @@ limitations under the License.
}
.mx_MatrixToolbar_close {
-webkit-flex: 1;
flex: 1;
cursor: pointer;
text-align: right;
}
.mx_MatrixToolbar_close img {

5
src/skins/vector/css/vector-web/views/rooms/RoomDropTarget.css
View file

@ -16,8 +16,8 @@ limitations under the License.
.mx_RoomDropTarget {
font-size: 13px;
margin-left: 10px;
margin-right: 15px;
margin-left: 18px;
margin-right: 18px;
padding-top: 5px;
padding-bottom: 5px;
border: 1px dashed #76cfa6;
@ -28,6 +28,7 @@ limitations under the License.
.collapsed .mx_RoomDropTarget {
margin-right: 10px;
margin-left: 10px;
}
.mx_RoomDropTarget_placeholder {

16
src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css
View file

@ -14,19 +14,19 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_RoomTooltip_chevron {
position: absolute;
left: -9px;
top: 7px;
}
.mx_RoomTooltip {
display: none;
position: fixed;
border: 1px solid #a4a4a4;
border-radius: 8px;
background-color: #fff;
z-index: 1000;
left: 64px;
z-index: 2000;
left: 52px;
padding: 6px;
}
.mx_RoomTooltip_chevron {
position: absolute;
left: -9px;
top: 8px;
}