PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Merge remote-tracking branch 'origin/develop' into develop

Browse source
This commit is contained in:
Weblate 2019-02-14 09:32:51 +00:00
commit 1271120d32
84 changed files with 872 additions and 759 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
res/css/_common.scss
View file

@ -50,8 +50,54 @@ a:visited {
color: $accent-color-alt;
}
input[type=text],
input[type=search],
input[type=password] {
padding: 9px;
font-family: $font-family;
font-size: 14px;
font-weight: 600;
min-width: 0;
}
input[type=text].mx_textinput_icon,
input[type=search].mx_textinput_icon {
padding-left: 36px;
background-repeat: no-repeat;
background-position: 10px center;
}
// FIXME THEME - Tint by CSS rather than referencing a duplicate asset
input[type=text].mx_textinput_icon.mx_textinput_search,
input[type=search].mx_textinput_icon.mx_textinput_search {
background-image: url('$(res)/img/feather-icons/search-input.svg');
}
// dont search UI as not all browsers support it,
// we implement it ourselves where needed instead
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
display: none;
}
.input[type=text]::-webkit-input-placeholder,
.input[type=text]::-moz-placeholder,
.input[type=search]::-webkit-input-placeholder,
.input[type=search]::-moz-placeholder {
color: #a5aab2;
}
// Override Firefox's UA style so we get a consistent look across browsers
input::placeholder,
textarea::placeholder {
opacity: initial;
}
input[type=text], input[type=password], textarea {
background-color: transparent;
color: $primary-fg-color;
}
input[type=text]:focus, input[type=password]:focus, textarea:focus {
@ -62,6 +108,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
/* Required by Firefox */
textarea {
font-family: $font-family;
color: $primary-fg-color;
}
/* Prevent ugly dotted highlight around selected elements in Firefox */
@ -242,7 +289,7 @@ textarea {
font-weight: 600;
border: 1px solid $accent-color ! important;
color: $accent-color;
background-color: $accent-fg-color;
background-color: $button-secondary-bg-color;
}
.mx_Dialog button:hover, .mx_Dialog input[type="submit"]:hover {

1
res/css/_components.scss
View file

@ -7,6 +7,7 @@
@import "./structures/_CustomRoomTagPanel.scss";
@import "./structures/_FilePanel.scss";
@import "./structures/_GroupView.scss";
@import "./structures/_HeaderButtons.scss";
@import "./structures/_HomePage.scss";
@import "./structures/_LeftPanel.scss";
@import "./structures/_MatrixChat.scss";

2
res/css/structures/_ContextualMenu.scss
View file

@ -31,7 +31,7 @@ limitations under the License.
.mx_ContextualMenu {
border-radius: 4px;
box-shadow: 4px 4px 12px 0 rgba(118, 131, 156, 0.6);;
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
background-color: $menu-bg-color;
color: $primary-fg-color;
position: absolute;

17
res/css/structures/_GroupView.scss
View file

@ -44,13 +44,22 @@ limitations under the License.
}
.mx_GroupHeader_button {
margin-left: 12px;
margin-left: 5px;
margin-right: 5px;
cursor: pointer;
height: 20px;
width: 20px;
background-color: $groupheader-button-color;
mask-repeat: no-repeat;
mask-size: contain;
}
.mx_GroupHeader_button object {
// prevents clicks from being swallowed by svg in 'object' tag
pointer-events: none;
.mx_GroupHeader_editButton {
mask-image: url('$(res)/img/icons-settings-room.svg');
}
.mx_GroupHeader_shareButton {
mask-image: url('$(res)/img/icons-share.svg');
}
.mx_GroupView_editable {

28
res/css/structures/_HeaderButtons.scss Normal file
View file

@ -0,0 +1,28 @@
/*
Copyright 2019 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_HeaderButtons {
display: flex;
}
.mx_HeaderButtons::before {
content: "";
background-color: $header-divider-color;
opacity: 0.5;
margin: 0 15px;
border-radius: 1px;
width: 1px;
}

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

@ -25,9 +25,7 @@ limitations under the License.
.mx_RightPanel_header {
order: 1;
border-bottom: 1px solid $primary-hairline-color;
flex: 0 0 52px;
}
@ -45,20 +43,55 @@ limitations under the License.
cursor: pointer;
flex: 0 0 auto;
vertical-align: top;
margin-top: 4px;
padding-left: 5px;
padding-right: 5px;
margin-left: 5px;
margin-right: 5px;
text-align: center;
position: relative;
border-bottom: 2px solid transparent;
height: 20px;
width: 20px;
position: relative;
}
.mx_RightPanel_headerButton object {
pointer-events: none;
.mx_RightPanel_headerButton::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: $rightpanel-button-color;
mask-repeat: no-repeat;
mask-size: contain;
}
.mx_RightPanel_headerButton_highlight {
border-color: $button-bg-color;
.mx_RightPanel_membersButton::before {
mask-image: url('$(res)/img/feather-icons/user.svg');
}
.mx_RightPanel_filesButton::before {
mask-image: url('$(res)/img/feather-icons/files.svg');
}
.mx_RightPanel_notifsButton::before {
mask-image: url('$(res)/img/feather-icons/notifications.svg');
}
.mx_RightPanel_groupMembersButton::before {
mask-image: url('$(res)/img/icons-people.svg');
}
.mx_RightPanel_roomsButton::before {
mask-image: url('$(res)/img/icons-room-nobg.svg');
}
.mx_RightPanel_headerButton_highlight::after {
content: '';
position: absolute;
bottom: -6px;
left: 0;
right: 0;
height: 2px;
background-color: $button-bg-color;
}
.mx_RightPanel_headerButton_badge {

2
res/css/structures/_RoomSubList.scss
View file

@ -152,7 +152,7 @@ limitations under the License.
&.mx_IndicatorScrollbar_topOverflow::before {
top: 0;
transition: background-image 0.1s ease-in;
background: linear-gradient(to top, rgba(242,245,248,0), rgba(242,245,248,1));
background: linear-gradient(to top, $panel-gradient);
}
/*

2
res/css/structures/_TagPanelButtons.scss
View file

@ -38,7 +38,7 @@ limitations under the License.
height: 40px;
width: 40px;
border-radius: 20px;
background-color: $roomheader-addroom-color;
background-color: $tagpanel-button-color;
position: relative;
/* overwrite mx_RoleButton inline-block */
display: block !important;

2
res/css/structures/auth/_Login.scss
View file

@ -79,7 +79,7 @@ limitations under the License.
.mx_Login_type_container {
display: flex;
margin-bottom: 14px;
color: $primary-fg-color;
color: $authpage-primary-color;
}
.mx_Login_type_label {

26
res/css/views/auth/_AuthBody.scss
View file

@ -21,19 +21,41 @@ limitations under the License.
padding: 25px 60px;
box-sizing: border-box;
font-size: 12px;
color: $authpage-body-color;
color: $authpage-secondary-color;
}
.mx_AuthBody h2 {
font-size: 24px;
font-weight: 600;
margin-top: 8px;
color: $authpage-primary-color;
}
.mx_AuthBody h3 {
font-size: 14px;
font-weight: 600;
color: $primary-fg-color;
color: $authpage-primary-color;
}
.mx_AuthBody input[type=text],
.mx_AuthBody input[type=password] {
color: $authpage-primary-color;
}
.mx_AuthBody .mx_Field input,
.mx_AuthBody .mx_Field select {
color: $authpage-primary-color;
background-color: $authpage-body-bg-color;
}
.mx_AuthBody .mx_Field label {
color: $authpage-primary-color;
}
.mx_AuthBody .mx_Field input:focus + label,
.mx_AuthBody .mx_Field input:not(:placeholder-shown) + label,
.mx_AuthBody .mx_Field select + label /* Always show a select's label on top to not collide with the value */ {
background-color: $authpage-body-bg-color;
}
.mx_AuthBody_editServerDetails {

4
res/css/views/auth/_ServerTypeSelector.scss
View file

@ -34,7 +34,7 @@ limitations under the License.
.mx_ServerTypeSelector_label {
text-align: center;
font-weight: 600;
color: $primary-fg-color;
color: $authpage-primary-color;
margin: 8px 0;
}
@ -54,7 +54,7 @@ limitations under the License.
height: 18px;
margin-bottom: 12px;
font-weight: 600;
color: $primary-fg-color;
color: $authpage-primary-color;
}
.mx_ServerTypeSelector_logo > div {

8
res/css/views/context_menus/_TopLeftMenu.scss
View file

@ -31,10 +31,18 @@ limitations under the License.
mask-image: url('$(res)/img/feather-icons/home.svg');
}
li.mx_TopLeftMenu_icon_welcome::after {
mask-image: url('$(res)/img/feather-icons/gift.svg');
}
li.mx_TopLeftMenu_icon_settings::after {
mask-image: url('$(res)/img/feather-icons/settings.svg');
}
li.mx_TopLeftMenu_icon_signin::after {
mask-image: url('$(res)/img/feather-icons/sign-in.svg');
}
li.mx_TopLeftMenu_icon_signout::after {
mask-image: url('$(res)/img/feather-icons/sign-out.svg');
}

3
res/css/views/dialogs/_CreateGroupDialog.scss
View file

@ -43,10 +43,9 @@ limitations under the License.
.mx_CreateGroupDialog_prefix,
.mx_CreateGroupDialog_suffix {
height: 35px;
padding: 0px 5px;
line-height: 37px;
background-color: $input-border-color;
background-color: $input-darker-bg-color;
border: 1px solid $input-border-color;
text-align: center;
}

8
res/css/views/elements/_AccessibleButton.scss
View file

@ -40,8 +40,7 @@ limitations under the License.
}
.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled {
color: $button-primary-disabled-fg-color;
background-color: $button-primary-disabled-bg-color;
opacity: 0.4;
}
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm {
@ -51,8 +50,7 @@ limitations under the License.
}
.mx_AccessibleButton_kind_primary_sm.mx_AccessibleButton_disabled {
color: $button-primary-disabled-fg-color;
background-color: $button-primary-disabled-bg-color;
opacity: 0.4;
}
.mx_AccessibleButton_kind_danger {
@ -74,4 +72,4 @@ limitations under the License.
.mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled {
color: $button-danger-disabled-fg-color;
background-color: $button-danger-disabled-bg-color;
}
}

3
res/css/views/elements/_Field.scss
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
/* TODO: Consider unifying with general input styles in _dharma.scss */
/* TODO: Consider unifying with general input styles in _light.scss */
.mx_Field {
position: relative;
@ -31,6 +31,7 @@ limitations under the License.
transition: border-color 0.25s;
border: 1px solid $input-border-color;
padding: 8px 9px;
color: $primary-fg-color;
background-color: $primary-bg-color;
}

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

@ -180,27 +180,36 @@ limitations under the License.
color: $accent-color;
}
.mx_MessageComposer_upload,
.mx_MessageComposer_hangup,
.mx_MessageComposer_voicecall,
.mx_MessageComposer_videocall,
.mx_MessageComposer_apps,
.mx_MessageComposer_stickers {
/*display: table-cell;*/
/*vertical-align: middle;*/
/*padding-left: 10px;*/
padding-right: 12px;
.mx_MessageComposer_button {
margin-right: 12px;
cursor: pointer;
padding-top: 4px;
height: 20px;
width: 20px;
background-color: $composer-button-color;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
}
.mx_MessageComposer_upload object,
.mx_MessageComposer_hangup object,
.mx_MessageComposer_voicecall object,
.mx_MessageComposer_videocall object,
.mx_MessageComposer_apps object,
.mx_MessageComposer_stickers object {
pointer-events: none;
.mx_MessageComposer_upload {
mask-image: url('$(res)/img/feather-icons/paperclip.svg');
}
.mx_MessageComposer_hangup {
mask-image: url('$(res)/img/hangup.svg');
}
.mx_MessageComposer_voicecall {
mask-image: url('$(res)/img/feather-icons/phone.svg');
}
.mx_MessageComposer_videocall {
mask-image: url('$(res)/img/feather-icons/video.svg');
}
.mx_MessageComposer_stickers {
mask-image: url('$(res)/img/feather-icons/face.svg');
}
.mx_MessageComposer_formatting {

2
res/css/views/rooms/_RoomBreadcrumbs.scss
View file

@ -36,7 +36,7 @@ limitations under the License.
top: 0;
right: 0;
height: 100%;
background: linear-gradient(to right, rgba(242,245,248,0), rgba(242,245,248,1));
background: linear-gradient(to right, $panel-gradient);
}
.mx_RoomBreadcrumbs_animate {

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

@ -58,7 +58,6 @@ limitations under the License.
.mx_RoomHeader_buttons {
display: flex;
align-items: center;
background-color: $primary-bg-color;
padding-right: 5px;
}
@ -116,10 +115,6 @@ limitations under the License.
opacity: 0.6;
}
.mx_RoomHeader_settingsButton object {
pointer-events: none;
}
.mx_RoomHeader_name,
.mx_RoomHeader_avatar,
.mx_RoomHeader_avatarPicker,
@ -160,6 +155,7 @@ limitations under the License.
font-weight: 400;
font-size: 13px;
margin: 0 7px;
margin-top: 4px; // to align baseline of topic with room name
overflow: hidden;
text-overflow: ellipsis;
border-bottom: 1px solid transparent;
@ -199,10 +195,32 @@ limitations under the License.
.mx_RoomHeader_button {
margin-left: 10px;
cursor: pointer;
height: 20px;
width: 20px;
background-color: $roomheader-button-color;
mask-repeat: no-repeat;
mask-size: contain;
}
.mx_RoomHeader_button object {
pointer-events: none;
.mx_RoomHeader_settingsButton {
mask-image: url('$(res)/img/feather-icons/settings.svg');
}
.mx_RoomHeader_forgetButton {
mask-image: url('$(res)/img/leave.svg');
width: 26px;
}
.mx_RoomHeader_searchButton {
mask-image: url('$(res)/img/feather-icons/search.svg');
}
.mx_RoomHeader_shareButton {
mask-image: url('$(res)/img/feather-icons/share.svg');
}
.mx_RoomHeader_manageIntegsButton {
mask-image: url('$(res)/img/feather-icons/grid.svg');
}
.mx_RoomHeader_showPanel {
@ -219,6 +237,7 @@ limitations under the License.
.mx_RoomHeader_pinnedButton {
position: relative;
mask-image: url('$(res)/img/icons-pin.svg');
}
.mx_RoomHeader_pinsIndicator {

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

@ -154,9 +154,8 @@ limitations under the License.
}
.mx_RoomTile_unread, .mx_RoomTile_highlight {
font-weight: 700 !important;
.mx_RoomTile_name {
// font-weight: 700; // bold is too loud in the end
color: $roomtile-selected-color;
}
}

2
res/img/feather-icons/e2e/blacklisted.svg
View file

@ -2,5 +2,5 @@
<defs>
<path id="a" d="M5 10A5 5 0 1 0 5 0a5 5 0 0 0 0 10zM2.5 3.5h5a1.5 1.5 0 0 1 0 3h-5a1.5 1.5 0 0 1 0-3z"/>
</defs>
<use fill="#F56679" fill-rule="evenodd" stroke="#F56679" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" transform="translate(1 1)" xlink:href="#a"/>
<use fill="#F56679" fill-rule="evenodd" stroke="#F56679" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" transform="translate(1 1)" xlink:href="#a"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 442 B

After

Width:  |  Height:  |  Size: 440 B

2
res/img/feather-icons/e2e/verified.svg
View file

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="12" viewBox="0 0 11 12">
<path fill="#7AC9A1" fill-rule="evenodd" stroke="#7AC9A1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" d="M5.5 11S10 9 10 6V2.5L5.5 1 1 2.5V6c0 3 4.5 5 4.5 5z"/>
<path fill="#7AC9A1" fill-rule="evenodd" stroke="#7AC9A1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M5.5 11S10 9 10 6V2.5L5.5 1 1 2.5V6c0 3 4.5 5 4.5 5z"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 278 B

After

Width:  |  Height:  |  Size: 276 B

2
res/img/feather-icons/e2e/warning.svg
View file

@ -2,5 +2,5 @@
<defs>
<path id="a" d="M5 10A5 5 0 1 0 5 0a5 5 0 0 0 0 10zM5 .5A1.5 1.5 0 0 1 6.5 2v3a1.5 1.5 0 0 1-3 0V2A1.5 1.5 0 0 1 5 .5zm0 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>
</defs>
<use fill="#F56679" fill-rule="evenodd" stroke="#F56679" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" transform="translate(1 1)" xlink:href="#a"/>
<use fill="#F56679" fill-rule="evenodd" stroke="#F56679" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" transform="translate(1 1)" xlink:href="#a"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 500 B

After

Width:  |  Height:  |  Size: 498 B

6
res/img/feather-icons/face.svg
View file

@ -3,9 +3,9 @@
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="LifeBuoy" transform="translate(-1073.000000, -872.000000)">
<g id="face-copy" transform="translate(1074.000000, 873.000000)">
<circle id="Oval" stroke="#B8BEC9" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" cx="8" cy="8" r="8"></circle>
<path d="M7.6,7.6 C8.13333333,8.71262059 8.4,9.77928725 8.4,10.8 C8.4,11.8207127 8.13333333,12.8873794 7.6,14" id="Path" stroke="#B8BEC9" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" transform="translate(8.000000, 10.800000) rotate(90.000000) translate(-8.000000, -10.800000) "></path>
<path d="" id="Path-Copy" stroke="#B8BEC9" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" transform="translate(4.800000, 4.800000) rotate(90.000000) translate(-4.800000, -4.800000) "></path>
<circle id="Oval" stroke="#B8BEC9" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" cx="8" cy="8" r="8"></circle>
<path d="M7.6,7.6 C8.13333333,8.71262059 8.4,9.77928725 8.4,10.8 C8.4,11.8207127 8.13333333,12.8873794 7.6,14" id="Path" stroke="#B8BEC9" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" transform="translate(8.000000, 10.800000) rotate(90.000000) translate(-8.000000, -10.800000) "></path>
<path d="" id="Path-Copy" stroke="#B8BEC9" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" transform="translate(4.800000, 4.800000) rotate(90.000000) translate(-4.800000, -4.800000) "></path>
<circle id="Oval" fill="#B8BEC9" fill-rule="nonzero" cx="4.8" cy="5.6" r="1"></circle>
<circle id="Oval-Copy" fill="#B8BEC9" fill-rule="nonzero" cx="11.2" cy="5.6" r="1"></circle>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

2
res/img/feather-icons/files.svg
View file

@ -1,7 +1,7 @@
<svg width="15px" height="18px" viewBox="0 0 15 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="LifeBuoy" transform="translate(-1433.000000, -90.000000)" stroke="#B8BEC9" stroke-width="1.6">
<g id="LifeBuoy" transform="translate(-1433.000000, -90.000000)" stroke="#B8BEC9" stroke-width="1">
<g id="file-copy" transform="translate(1434.000000, 91.000000)">
<path d="M7.3125,0 L1.625,0 C0.727537282,0 0,0.7163444 0,1.6 L0,14.4 C0,15.2836556 0.727537282,16 1.625,16 L11.375,16 C12.2724627,16 13,15.2836556 13,14.4 L13,5.6 L7.3125,0 Z" id="Path"></path>
<polyline id="Path" points="7.3125 0 7.3125 5.6 13 5.6"></polyline>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 803 B

After

Width:  |  Height:  |  Size: 801 B

1
res/img/feather-icons/gift.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-gift"><polyline points="20 12 20 22 4 22 4 12"></polyline><rect x="2" y="7" width="20" height="5"></rect><line x1="12" y1="22" x2="12" y2="7"></line><path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"></path><path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 482 B

2
res/img/feather-icons/grid.svg
View file

@ -1,7 +1,7 @@
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="LifeBuoy" transform="translate(-1350.000000, -91.000000)" stroke="#B8BEC9" stroke-width="1.6">
<g id="LifeBuoy" transform="translate(-1350.000000, -91.000000)" stroke="#B8BEC9" stroke-width="1">
<g id="grid-copy" transform="translate(1351.000000, 92.000000)">
<rect id="Rectangle" x="0" y="0" width="5.44444444" height="5.44444444"></rect>
<rect id="Rectangle" x="8.55555556" y="0" width="5.44444444" height="5.44444444"></rect>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 929 B

After

Width:  |  Height:  |  Size: 927 B

2
res/img/feather-icons/life-buoy.svg
View file

@ -1,7 +1,7 @@
<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="LifeBuoy" transform="translate(-77.000000, -862.000000)" stroke="#2E3648" stroke-width="1.6">
<g id="LifeBuoy" transform="translate(-77.000000, -862.000000)" stroke="#2E3648" stroke-width="1">
<g id="Buoy" transform="translate(68.000000, 853.000000)">
<g id="life-buoy" transform="translate(10.000000, 10.000000)">
<circle id="Oval" cx="10" cy="10" r="10"></circle>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

2
res/img/feather-icons/notifications.svg
View file

@ -1,7 +1,7 @@
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="LifeBuoy" transform="translate(-1460.000000, -90.000000)" stroke="#B8BEC9" stroke-width="1.6">
<g id="LifeBuoy" transform="translate(-1460.000000, -90.000000)" stroke="#B8BEC9" stroke-width="1">
<g id="bell-copy" transform="translate(1461.000000, 91.000000)">
<path d="M16,12 L0,12 C1.3254834,12 2.4,10.9254834 2.4,9.6 L2.4,5.6 C2.40000005,2.50720543 4.90720543,8.34465016e-08 8,8.3446502e-08 C11.0927946,8.34465023e-08 13.6,2.50720543 13.6,5.6 L13.6,9.6 C13.6,10.9254834 14.6745166,12 16,12 Z M9.384,15.2 C9.09776179,15.6934435 8.57045489,15.997165 8,15.997165 C7.42954511,15.997165 6.90223821,15.6934435 6.616,15.2 L9.384,15.2 Z" id="Shape"></path>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 916 B

After

Width:  |  Height:  |  Size: 914 B

2
res/img/feather-icons/paperclip.svg
View file

@ -1,7 +1,7 @@
<svg width="18px" height="19px" viewBox="0 0 18 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="LifeBuoy" transform="translate(-1103.000000, -871.000000)" stroke="#B8BEC9" stroke-width="1.6">
<g id="LifeBuoy" transform="translate(-1103.000000, -871.000000)" stroke="#B8BEC9" stroke-width="1">
<g id="paperclip-copy" transform="translate(1104.000000, 872.000000)">
<path d="M15.552,8.13571429 L8.2,15.5752381 C6.32444099,17.4731252 3.28355901,17.4731252 1.408,15.5752381 C-0.46755901,13.677351 -0.46755901,10.600268 1.408,8.70238095 L8.76,1.26285714 C10.0103727,-0.00240088755 12.0376273,-0.00240087226 13.288,1.26285718 C14.5383726,2.52811523 14.5383726,4.57950384 13.288,5.8447619 L5.928,13.2842857 C5.30281366,13.9169147 4.28918634,13.9169147 3.664,13.2842857 C3.03881366,12.6516567 3.03881366,11.6259624 3.664,10.9933333 L10.456,4.12857143" id="Path"></path>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1 KiB

After

Width:  |  Height:  |  Size: 1 KiB

2
res/img/feather-icons/phone.svg
View file

@ -1,7 +1,7 @@
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="LifeBuoy" transform="translate(-1133.000000, -872.000000)" stroke="#B8BEC9" stroke-width="1.6">
<g id="LifeBuoy" transform="translate(-1133.000000, -872.000000)" stroke="#B8BEC9" stroke-width="1">
<g id="phone-copy" transform="translate(1134.000000, 873.000000)">
<path d="M16.1904762,11.936 L16.1904762,14.336 C16.1923266,14.7865161 16.001896,15.2169267 15.6659678,15.5214919 C15.3300396,15.8260571 14.879747,15.9765505 14.4257143,15.936 C11.934675,15.6685126 9.54185647,14.8273156 7.43952381,13.48 C5.48357515,12.2517311 3.82527212,10.6129375 2.58238095,8.68 C1.21426795,6.59296319 0.362863382,4.21679565 0.0971428571,1.744 C0.0562402179,1.29669787 0.207458292,0.853001939 0.513858012,0.521296845 C0.820257732,0.18959175 1.25362391,0.000422952191 1.70809524,0 L4.13666667,0 C4.94931852,-0.00790412572 5.64197687,0.580773986 5.75571429,1.376 C5.85821863,2.14405316 6.04831623,2.89818151 6.32238095,3.624 C6.54478548,4.20870002 6.40253601,4.86784501 5.95809524,5.312 L4.93,6.328 C6.08240205,8.33083666 7.7604629,9.98915562 9.78714286,11.128 L10.8152381,10.112 C11.2646806,9.67278794 11.9316726,9.532212 12.5233333,9.752 C13.2577925,10.0228404 14.0208986,10.2107016 14.7980952,10.312 C15.6121222,10.4254883 16.2108681,11.1238341 16.1904762,11.936 Z" id="Path"></path>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

2
res/img/feather-icons/search-input.svg
View file

@ -1,7 +1,7 @@
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="LifeBuoy" transform="translate(-1378.000000, -91.000000)" stroke="#61708b" stroke-width="1.6">
<g id="LifeBuoy" transform="translate(-1378.000000, -91.000000)" stroke="#61708b" stroke-width="1">
<g id="search-copy" transform="translate(1379.000000, 92.000000)">
<circle id="Oval" cx="6.22222222" cy="6.22222222" r="6.22222222"></circle>
<path d="M14,14 L10.6166667,10.6166667" id="Path"></path>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 676 B

After

Width:  |  Height:  |  Size: 674 B

2
res/img/feather-icons/search.svg
View file

@ -1,7 +1,7 @@
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="LifeBuoy" transform="translate(-1378.000000, -91.000000)" stroke="#B8BEC9" stroke-width="1.6">
<g id="LifeBuoy" transform="translate(-1378.000000, -91.000000)" stroke="#B8BEC9" stroke-width="1">
<g id="search-copy" transform="translate(1379.000000, 92.000000)">
<circle id="Oval" cx="6.22222222" cy="6.22222222" r="6.22222222"></circle>
<path d="M14,14 L10.6166667,10.6166667" id="Path"></path>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 676 B

After

Width:  |  Height:  |  Size: 674 B

2
res/img/feather-icons/settings.svg
View file

@ -1,7 +1,7 @@
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="LifeBuoy" transform="translate(-1290.000000, -89.000000)" stroke="#B8BEC9" stroke-width="1.6">
<g id="LifeBuoy" transform="translate(-1290.000000, -89.000000)" stroke="#B8BEC9" stroke-width="1">
<g id="settings-copy" transform="translate(1291.000000, 90.000000)">
<circle id="Oval" cx="9" cy="9" r="2.45454545"></circle>
<path d="M15.0545455,11.4545455 C14.8317165,11.9594373 14.938637,12.5491199 15.3245455,12.9436364 L15.3736364,12.9927273 C15.6809079,13.2996571 15.85356,13.7161485 15.85356,14.1504545 C15.85356,14.5847606 15.6809079,15.0012519 15.3736364,15.3081818 C15.0667065,15.6154533 14.6502151,15.7881054 14.2159091,15.7881054 C13.781603,15.7881054 13.3651117,15.6154533 13.0581818,15.3081818 L13.0090909,15.2590909 C12.6145745,14.8731825 12.0248919,14.766262 11.52,14.9890909 C11.0254331,15.2010559 10.7039642,15.686474 10.7018182,16.2245455 L10.7018182,16.3636364 C10.7018182,17.267375 9.96919323,18 9.06545455,18 C8.16171586,18 7.42909091,17.267375 7.42909091,16.3636364 L7.42909091,16.29 C7.41612813,15.7358216 7.06571327,15.2458897 6.54545455,15.0545455 C6.04056267,14.8317165 5.45088006,14.938637 5.05636364,15.3245455 L5.00727273,15.3736364 C4.70034285,15.6809079 4.2838515,15.85356 3.84954545,15.85356 C3.41523941,15.85356 2.99874806,15.6809079 2.69181818,15.3736364 C2.38454666,15.0667065 2.21189456,14.6502151 2.21189456,14.2159091 C2.21189456,13.781603 2.38454666,13.3651117 2.69181818,13.0581818 L2.74090909,13.0090909 C3.12681754,12.6145745 3.23373801,12.0248919 3.01090909,11.52 C2.79894413,11.0254331 2.31352603,10.7039642 1.77545455,10.7018182 L1.63636364,10.7018182 C0.732624955,10.7018182 1.81672859e-16,9.96919323 0,9.06545455 C-9.08364293e-17,8.16171586 0.732624955,7.42909091 1.63636364,7.42909091 L1.71,7.42909091 C2.26417842,7.41612813 2.75411031,7.06571327 2.94545455,6.54545455 C3.16828346,6.04056267 3.06136299,5.45088006 2.67545455,5.05636364 L2.62636364,5.00727273 C2.31909211,4.70034285 2.14644002,4.2838515 2.14644002,3.84954545 C2.14644002,3.41523941 2.31909211,2.99874806 2.62636364,2.69181818 C2.93329351,2.38454666 3.34978487,2.21189456 3.78409091,2.21189456 C4.21839695,2.21189456 4.63488831,2.38454666 4.94181818,2.69181818 L4.99090909,2.74090909 C5.38542551,3.12681754 5.97510812,3.23373801 6.48,3.01090909 L6.54545455,3.01090909 C7.04002141,2.79894413 7.36149035,2.31352603 7.36363636,1.77545455 L7.36363636,1.63636364 C7.36363636,0.732624955 8.09626132,1.81672859e-16 9,0 C9.90373868,0 10.6363636,0.732624955 10.6363636,1.63636364 L10.6363636,1.71 C10.6385096,2.24807148 10.9599786,2.73348959 11.4545455,2.94545455 C11.9594373,3.16828346 12.5491199,3.06136299 12.9436364,2.67545455 L12.9927273,2.62636364 C13.2996571,2.31909211 13.7161485,2.14644002 14.1504545,2.14644002 C14.5847606,2.14644002 15.0012519,2.31909211 15.3081818,2.62636364 C15.6154533,2.93329351 15.7881054,3.34978487 15.7881054,3.78409091 C15.7881054,4.21839695 15.6154533,4.63488831 15.3081818,4.94181818 L15.2590909,4.99090909 C14.8731825,5.38542551 14.766262,5.97510812 14.9890909,6.48 L14.9890909,6.54545455 C15.2010559,7.04002141 15.686474,7.36149035 16.2245455,7.36363636 L16.3636364,7.36363636 C17.267375,7.36363636 18,8.09626132 18,9 C18,9.90373868 17.267375,10.6363636 16.3636364,10.6363636 L16.29,10.6363636 C15.7519285,10.6385096 15.2665104,10.9599786 15.0545455,11.4545455 Z" id="Path"></path>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

2
res/img/feather-icons/share.svg
View file

@ -1,7 +1,7 @@
<svg width="16px" height="18px" viewBox="0 0 16 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="LifeBuoy" transform="translate(-1322.000000, -90.000000)" stroke="#B8BEC9" stroke-width="1.6">
<g id="LifeBuoy" transform="translate(-1322.000000, -90.000000)" stroke="#B8BEC9" stroke-width="1">
<g id="share-2-copy" transform="translate(1323.000000, 91.000000)">
<ellipse id="Oval" cx="11.6666667" cy="2.4" rx="2.33333333" ry="2.4"></ellipse>
<ellipse id="Oval" cx="2.33333333" cy="8" rx="2.33333333" ry="2.4"></ellipse>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 954 B

After

Width:  |  Height:  |  Size: 952 B

7
res/img/feather-icons/sign-in.svg Normal file
View file

@ -0,0 +1,7 @@
<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<g style="stroke:#454545;stroke-width:1;fill:none;fill-rule:evenodd;stroke-linecap:round;stroke-linejoin:round" transform="translate(1 1)">
<path d="m9.33333333 0h3.11111107c.8591097 0 1.5555556.69644595 1.5555556 1.55555556v10.88888884c0 .8591097-.6964459 1.5555556-1.5555556 1.5555556h-3.11111107"/>
<path d="m5.44444444 10.8888889 3.88888889-3.8888889-3.88888889-3.88888889"/>
<path d="m9.33333333 7h-9.33333333"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 546 B

2
res/img/feather-icons/sign-out.svg
View file

@ -1,5 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<g fill="none" fill-rule="evenodd" stroke="#454545" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2">
<g fill="none" fill-rule="evenodd" stroke="#454545" stroke-linecap="round" stroke-linejoin="round" stroke-width="1">
<path d="M5.667 15H2.556C1.696 15 1 14.304 1 13.444V2.556C1 1.696 1.696 1 2.556 1h3.11M11.111 11.889L15 8l-3.889-3.889M15 8H5.667"/>
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 364 B

After

Width:  |  Height:  |  Size: 362 B

2
res/img/feather-icons/upload.svg
View file

@ -1,5 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
<g fill="none" fill-rule="evenodd" stroke="#454545" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2">
<g fill="none" fill-rule="evenodd" stroke="#454545" stroke-linecap="round" stroke-linejoin="round" stroke-width="1">
<path d="M13 9v2.667c0 .736-.597 1.333-1.333 1.333H2.333A1.333 1.333 0 0 1 1 11.667V9M10.667 4.333L7.333 1 4 4.333M7.333 1v8"/>
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 359 B

After

Width:  |  Height:  |  Size: 357 B

2
res/img/feather-icons/user-add.svg
View file

@ -1,7 +1,7 @@
<svg width="20px" height="16px" viewBox="0 0 20 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="LifeBuoy" transform="translate(-1269.000000, -143.000000)" stroke="#FFFFFF" stroke-width="1.6">
<g id="LifeBuoy" transform="translate(-1269.000000, -143.000000)" stroke="#FFFFFF" stroke-width="1">
<g id="user-plus-copy" transform="translate(1270.000000, 144.000000)">
<path d="M12.2727273,14 L12.2727273,12.4444444 C12.2727273,10.7262252 10.8074774,9.33333333 9,9.33333333 L3.27272727,9.33333333 C1.46524991,9.33333333 1.81672859e-16,10.7262252 0,12.4444444 L0,14" id="Path"></path>
<ellipse id="Oval" cx="6.13636364" cy="3.11111111" rx="3.27272727" ry="3.11111111"></ellipse>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1 KiB

After

Width:  |  Height:  |  Size: 1 KiB

2
res/img/feather-icons/user.svg
View file

@ -1,7 +1,7 @@
<svg width="15px" height="16px" viewBox="0 0 15 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="LifeBuoy" transform="translate(-1406.000000, -91.000000)" stroke="#B8BEC9" stroke-width="1.6">
<g id="LifeBuoy" transform="translate(-1406.000000, -91.000000)" stroke="#B8BEC9" stroke-width="1">
<g id="user-copy" transform="translate(1407.000000, 92.000000)">
<path d="M13,14 L13,12.4444444 C13,10.7262252 11.5449254,9.33333333 9.75,9.33333333 L3.25,9.33333333 C1.45507456,9.33333333 0,10.7262252 0,12.4444444 L0,14" id="Path"></path>
<ellipse id="Oval" cx="6.5" cy="3.11111111" rx="3.25" ry="3.11111111"></ellipse>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 797 B

After

Width:  |  Height:  |  Size: 795 B

2
res/img/feather-icons/users.svg
View file

@ -1,7 +1,7 @@
<svg width="20px" height="16px" viewBox="0 0 20 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="LifeBuoy-Copy" transform="translate(-78.000000, -813.000000)" stroke="#293042" stroke-width="1.6">
<g id="LifeBuoy-Copy" transform="translate(-78.000000, -813.000000)" stroke="#293042" stroke-width="1">
<g id="Buoy-Copy" transform="translate(68.000000, 802.000000)">
<g id="users-copy" transform="translate(11.000000, 12.000000)">
<path d="M13.0909091,14 L13.0909091,12.4444444 C13.0909091,10.7262252 11.6256592,9.33333333 9.81818182,9.33333333 L3.27272727,9.33333333 C1.46524991,9.33333333 1.81672859e-16,10.7262252 0,12.4444444 L0,14" id="Path"></path>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

2
res/img/feather-icons/video.svg
View file

@ -1,7 +1,7 @@
<svg width="20px" height="13px" viewBox="0 0 20 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="LifeBuoy" transform="translate(-1164.000000, -874.000000)" stroke="#B8BEC9" stroke-width="1.6">
<g id="LifeBuoy" transform="translate(-1164.000000, -874.000000)" stroke="#B8BEC9" stroke-width="1">
<g id="video-copy" transform="translate(1165.000000, 875.000000)">
<polygon id="Path" points="18 1.57142857 12.2727273 5.5 18 9.42857143"></polygon>
<rect id="Rectangle" x="0" y="0" width="12.2727273" height="11" rx="1.6"></rect>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 707 B

After

Width:  |  Height:  |  Size: 705 B

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

@ -1,186 +1,196 @@
// unified palette
// try to use these colors when possible
$bg-color: #181b21;
$base-color: #1b1f25;
$base-text-color: #edf3ff;
$header-panel-bg-color: #22262e;
$header-panel-border-color: #000000;
$header-panel-text-primary-color: #a1b2d1;
$header-panel-text-secondary-color: #c8c8cd;
$text-primary-color: #edf3ff;
$text-secondary-color: #a1b2d1;
$search-bg-color: #181b21;
$search-placeholder-color: #61708b;
$room-highlight-color: #343a46;
// typical text (dark-on-white in light skin)
$primary-fg-color: #212121;
$primary-bg-color: #2d2d2d;
// used for focusing form controls
$focus-bg-color: #101010;
$primary-fg-color: $text-primary-color;
$primary-bg-color: $bg-color;
// used for dialog box text
$light-fg-color: #747474;
$light-fg-color: $header-panel-text-secondary-color;
// button UI (white-on-green in light skin)
$accent-fg-color: $primary-bg-color;
$accent-color: #76CFA6;
$accent-color-alt: $accent-color;
$accent-color-50pct: #76CFA67F;
// used for focusing form controls
$focus-bg-color: $room-highlight-color;
$selection-fg-color: $primary-fg-color;
$mention-user-pill-bg-color: $warning-color;
$other-user-pill-bg-color: $room-highlight-color;
$focus-brightness: 200%;
// informational plinth
$info-plinth-bg-color: $header-panel-bg-color;
$info-plinth-fg-color: #888;
// red warning colour
$warning-color: #ff0064;
$warning-bg-color: #DF2A8B;
$info-bg-color: #2A9EDF;
$preview-bar-bg-color: $header-panel-bg-color;
// groups
$info-plinth-bg-color: #454545;
$other-user-pill-bg-color: rgba(255, 255, 255, 0.1);
$preview-bar-bg-color: #333;
// left-panel style muted accent color
$secondary-accent-color: $primary-bg-color;
$tertiary-accent-color: #454545;
// stop the tinter trying to change the secondary accent color
// by overriding the key to something untintable
// XXX: this is a bit of a hack.
#mx_theme_secondaryAccentColor {
color: #c0ffee ! important;
}
#mx_theme_tertiaryAccentColor {
color: #c0ffee ! important;
}
// used by RoomDirectory permissions
$plinth-bg-color: #474747;
// used by RoomDropTarget
$droptarget-bg-color: rgba(45,45,45,0.5);
$tagpanel-bg-color: $base-color;
// used by AddressSelector
$selected-color: #000000;
$selected-color: $room-highlight-color;
// selected for hoverover & selected event tiles
$event-selected-color: #353535;
$event-selected-color: $search-bg-color;
// used for the hairline dividers in RoomView
$primary-hairline-color: #474747;
$primary-hairline-color: $header-panel-border-color;
// used for the border of input text fields
$input-border-color: #3a3a3a;
$input-border-color: #e7e7e7;
$input-darker-bg-color: $search-bg-color;
$input-darker-fg-color: $search-placeholder-color;
$input-lighter-bg-color: #f2f5f8;
$input-lighter-fg-color: $input-darker-fg-color;
$input-focused-border-color: #238cf5;
$input-valid-border-color: $accent-color;
$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;
$field-focused-label-bg-color: $bg-color;
// used for UserSettings EditableText
$input-underline-color: $primary-fg-color;
$input-fg-color: $primary-fg-color;
// scrollbars
$scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
$scrollbar-track-color: transparent;
// context menus
$menu-border-color: rgba(187, 187, 187, 0.5);
$menu-bg-color: #373737;
$menu-selected-color: #f5f8fa;
$menu-border-color: $header-panel-border-color;
$menu-bg-color: $header-panel-bg-color;
$menu-box-shadow-color: $bg-color;
$menu-selected-color: $room-highlight-color;
$avatar-initial-color: #2d2d2d;
$avatar-bg-color: #ffffff;
$menu-selected-color: #f5f8fa;
$avatar-initial-color: #ffffff;
$avatar-bg-color: $bg-color;
$h3-color: $primary-fg-color;
$dialog-background-bg-color: #000;
$dialog-background-bg-color: $header-panel-bg-color;
$lightbox-background-bg-color: #000;
$greyed-fg-color: #888;
$neutral-badge-color: #888;
$preview-widget-bar-color: $menu-bg-color;
$preview-widget-fg-color: $greyed-fg-color;
$blockquote-bar-color: #ddd;
$blockquote-fg-color: #777;
$settings-grey-fg-color: #a2a2a2;
$settings-profile-placeholder-bg-color: #e7e7e7;
$settings-profile-overlay-bg-color: #000;
$settings-profile-overlay-placeholder-bg-color: transparent;
$settings-profile-overlay-fg-color: #fff;
$settings-profile-overlay-placeholder-fg-color: #454545;
$settings-subsection-fg-color: $text-secondary-color;
$voip-decline-color: #f48080;
$voip-accept-color: #80f480;
$topleftmenu-color: $text-primary-color;
$roomheader-color: $text-primary-color;
$roomheader-addroom-color: $header-panel-text-primary-color;
$tagpanel-button-color: $header-panel-text-primary-color;
$roomheader-button-color: $header-panel-text-primary-color;
$groupheader-button-color: $header-panel-text-primary-color;
$rightpanel-button-color: $header-panel-text-primary-color;
$composer-button-color: $header-panel-text-primary-color;
$roomtopic-color: $text-secondary-color;
$eventtile-meta-color: $roomtopic-color;
$rte-bg-color: #353535;
$rte-code-bg-color: #000;
$header-divider-color: $header-panel-text-primary-color;
$room-warning-bg-color: #2d2d2d;
$roomtile-name-color: $header-panel-text-primary-color;
$roomtile-selected-color: $text-primary-color;
$roomtile-notified-color: $text-primary-color;
$roomtile-selected-bg-color: $room-highlight-color;
$roomtile-focused-bg-color: $room-highlight-color;
// ********************
$roomtile-transparent-focused-color: rgba(0, 0, 0, 0.1);
$roomtile-name-color: rgba(186, 186, 186, 0.8);
$roomtile-selected-bg-color: #333;
$roomtile-focused-bg-color: rgba(255, 255, 255, 0.2);
$panel-divider-color: $header-panel-border-color;
$username-variant1-color: #1e7ddc;
$username-variant2-color: #a756a8;
$username-variant3-color: #7ac9a1;
$username-variant4-color: #f2809d;
$username-variant5-color: #ffc666;
$username-variant6-color: #76ddd7;
$username-variant7-color: #45529b;
$username-variant8-color: #bfd251;
$roomsublist-background: rgba(0, 0, 0, 0.2);
$roomsublist-label-fg-color: $h3-color;
$roomsublist-label-bg-color: $tertiary-accent-color;
$roomsublist-chevron-color: $accent-color;
$panel-divider-color: rgba(118, 207, 166, 0.2);
// ********************
$widget-menu-bar-bg-color: $tertiary-accent-color;
// ********************
// event tile lifecycle
$event-encrypting-color: rgba(171, 221, 188, 0.4);
$event-sending-color: #888;
$event-notsent-color: #f44;
// event redaction
$event-redacted-fg-color: #606060;
$event-redacted-border-color: #000000;
$widget-menu-bar-bg-color: $search-bg-color;
// event timestamp
$event-timestamp-color: #acacac;
$event-timestamp-color: $text-secondary-color;
$edit-button-url: "$(res)/img/icon_context_message_dark.svg";
$copy-button-url: "$(res)/img/icon_copy_message_dark.svg";
// Tabbed views
$tab-label-fg-color: $text-primary-color;
$tab-label-active-fg-color: $text-primary-color;
$tab-label-bg-color: transparent;
$tab-label-active-bg-color: $accent-color;
$tab-label-icon-bg-color: $text-primary-color;
$tab-label-active-icon-bg-color: $text-primary-color;
// e2e
$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
$e2e-unverified-color: #e8bf37;
$e2e-warning-color: #ba6363;
// Buttons
$button-primary-fg-color: #ffffff;
$button-primary-bg-color: $accent-color;
$button-secondary-bg-color: transparent;
$button-danger-fg-color: #ffffff;
$button-danger-bg-color: $notice-primary-color;
$button-danger-disabled-fg-color: #ffffff;
$button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color
/*** ImageView ***/
$lightbox-bg-color: #454545;
$lightbox-fg-color: #ffffff;
$lightbox-border-color: #ffffff;
$room-warning-bg-color: $header-panel-bg-color;
$imagebody-giflabel: rgba(1, 1, 1, 0.7);
$imagebody-giflabel-border: rgba(1, 1, 1, 0.2);
$imagebody-giflabel-color: rgba(0, 0, 0, 1);
$panel-gradient: rgba(34, 38, 46, 0), rgba(34, 38, 46, 1);
// unused?
$progressbar-color: #000;
/*** form elements ***/
// .mx_textinput is a container for a text input
// + some other controls like buttons, ...
// it has the appearance of a text box so the controls
// appear to be part of the input
.mx_Dialog, .mx_MatrixChat {
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
.mx_textinput {
background-color: transparent;
color: $input-darker-fg-color;
border: 1px solid #c1c1c1;
}
.mx_textinput {
> input[type=text],
> input[type=search] {
color: $primary-fg-color;
}
input::placeholder {
color: $roomsublist-label-fg-color;
}
}
}
/*** panels ***/
.dark-panel {
background-color: $header-panel-bg-color;
}
.dark-panel {
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
.mx_textinput {
color: $input-darker-fg-color;
background-color: $input-darker-bg-color;
border: none;
}
}
.light-panel {
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
.mx_textinput {
color: $input-lighter-fg-color;
background-color: $input-lighter-bg-color;
border: none;
}
}
// ***** Mixins! *****
// XXX: copypasted from _base in order to pick up the right FG color...
@define-mixin mx_DialogButton {
/* 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;
@ -190,12 +200,16 @@ $progressbar-color: #000;
outline: none;
}
@define-mixin mx_DialogButton_danger {
background-color: $accent-color;
}
@define-mixin mx_DialogButton_secondary {
// flip colours for the secondary ones
font-weight: 600;
border: 1px solid $accent-color ! important;
color: $accent-color;
background-color: $accent-fg-color;
background-color: $button-secondary-bg-color;
}
// Nasty hacks to apply a filter to arbitrary monochrome artwork to make it
@ -232,8 +246,3 @@ $progressbar-color: #000;
}
}
}
// Add a line to the right side of the left panel to distinguish it from the middle panel
.mx_LeftPanel {
border-right: 1px solid $tertiary-accent-color;
}

2
res/themes/dark/css/dark.scss
View file

@ -1,5 +1,5 @@
@import "../../light/css/_paths.scss";
@import "../../light/css/_fonts.scss";
@import "../../light/css/_base.scss";
@import "../../light/css/_light.scss";
@import "_dark.scss";
@import "../../../../res/css/_components.scss";

53
res/themes/dharma/css/_fonts.scss
View file

@ -1,53 +0,0 @@
/*
* Nunito.
* Includes extended Latin and Vietnamese character sets
* Current URLs are taken from
* https://github.com/alexeiva/NunitoFont/releases/tag/v3.500
* ...in order to include cyrillic.
*
* Previously, they were
* https://fonts.googleapis.com/css?family=Nunito:400,400i,600,600i,700,700i&subset=latin-ext,vietnamese
*
* We explicitly do not include Nunito's italic variants, as they are not italic enough
* and it's better to rely on the browser's built-in obliquing behaviour.
*/
/* the 'src' links are relative to the bundle.css, which is in a subdirectory.
*/
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 400;
src: url('$(res)/fonts/Nunito/Nunito-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 600;
src: url('$(res)/fonts/Nunito/Nunito-SemiBold.ttf') format('truetype');
}
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 700;
src: url('$(res)/fonts/Nunito/Nunito-Bold.ttf') format('truetype');
}
/*
* Fira Mono
* Used for monospace copy, i.e. code
*/
@font-face {
font-family: 'Fira Mono';
src: url('$(res)/fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Fira Mono';
src: url('$(res)/fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}

4
res/themes/dharma/css/dharma.scss
View file

@ -1,4 +0,0 @@
@import "../../light/css/_paths.scss";
@import "_fonts.scss";
@import "_dharma.scss";
@import "../../../../res/css/_components.scss";

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

@ -1,276 +0,0 @@
/* Open Sans lacks combining diacritics, so these will fall through
to the next font. Helevetica's diacritics however do not combine
nicely with Open Sans (on OSX, at least) and result in a huge
horizontal mess. Arial empirically gets it right, hence prioritising
Arial here. */
$font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
// typical text (dark-on-white in light skin)
$primary-fg-color: #454545;
$primary-bg-color: #ffffff;
// used for dialog box text
$light-fg-color: #747474;
// used for focusing form controls
$focus-bg-color: #dddddd;
// button UI (white-on-green in light skin)
$accent-fg-color: #ffffff;
$accent-color: #76CFA6;
$accent-color-alt: $accent-color;
$accent-color-50pct: #76CFA67F;
$selection-fg-color: $primary-bg-color;
$focus-brightness: 125%;
// red warning colour
$warning-color: #ff0064;
// background colour for warnings
$warning-bg-color: #DF2A8B;
$info-bg-color: #2A9EDF;
$mention-user-pill-bg-color: #ff0064;
$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
// pinned events indicator
$pinned-unread-color: #ff0064; // $warning-color
$pinned-color: #888;
// informational plinth
$info-plinth-bg-color: #f7f7f7;
$info-plinth-fg-color: #888;
$preview-bar-bg-color: #f7f7f7;
// left-panel style muted accent color
$secondary-accent-color: #eaf5f0;
$tertiary-accent-color: #d3efe1;
$tagpanel-bg-color: $tertiary-accent-color;
// used by RoomDirectory permissions
$plinth-bg-color: $secondary-accent-color;
// used by RoomDropTarget
$droptarget-bg-color: rgba(255,255,255,0.5);
// used by AddressSelector
$selected-color: $secondary-accent-color;
// selected for hoverover & selected event tiles
$event-selected-color: #f7f7f7;
// used for the hairline dividers in RoomView
$primary-hairline-color: #e5e5e5;
// used for the border of input text fields
$input-border-color: #f0f0f0;
$input-border-dark-color: #b8b8b8;
$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;
$input-focused-border-color: #238cf5;
$input-valid-border-color: #7ac9a1;
$field-focused-label-bg-color: #ffffff;
// used for UserSettings EditableText
$input-underline-color: rgba(151, 151, 151, 0.5);
$input-fg-color: rgba(74, 74, 74, 0.9);
// scrollbars
$scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
$scrollbar-track-color: transparent;
// context menus
$menu-border-color: rgba(187, 187, 187, 0.5);
$menu-bg-color: #f6f6f6;
$menu-selected-color: #f5f8fa;
$avatar-initial-color: #ffffff;
$avatar-bg-color: #ffffff;
$h3-color: #3d3b39;
$dialog-title-fg-color: #454545;
$dialog-backdrop-color: rgba(46, 48, 51, 0.38);
$dialog-shadow-color: rgba(0, 0, 0, 0.48);
$dialog-close-fg-color: #9fa9ba;
$dialog-background-bg-color: #e9e9e9;
$lightbox-background-bg-color: #000;
$greyed-fg-color: #888;
$neutral-badge-color: #dbdbdb;
$preview-widget-bar-color: #ddd;
$preview-widget-fg-color: $greyed-fg-color;
$blockquote-bar-color: #ddd;
$blockquote-fg-color: #777;
$settings-grey-fg-color: #a2a2a2;
$settings-profile-placeholder-bg-color: #e7e7e7;
$settings-profile-overlay-bg-color: #000;
$settings-profile-overlay-placeholder-bg-color: transparent;
$settings-profile-overlay-fg-color: #fff;
$settings-profile-overlay-placeholder-fg-color: #454545;
$settings-subsection-fg-color: #61708b;
$voip-decline-color: #f48080;
$voip-accept-color: #80f480;
$rte-bg-color: #e9e9e9;
$rte-code-bg-color: rgba(0, 0, 0, 0.04);
$rte-room-pill-color: #aaa;
$rte-group-pill-color: #aaa;
$topleftmenu-color: $primary-fg-color;
$roomheader-color: $primary-fg-color;
$roomheader-addroom-color: $primary-bg-color;
$roomtopic-color: $settings-grey-fg-color;
$eventtile-meta-color: $roomtopic-color;
$composer-e2e-icon-color: #c9ced6;
// ********************
$roomtile-name-color: rgba(69, 69, 69, 0.8);
$roomtile-selected-color: $roomtile-name-color;
$roomtile-notified-color: $roomtile-name-color;
$roomtile-selected-bg-color: rgba(255, 255, 255, 0.8);
$roomtile-focused-bg-color: rgba(255, 255, 255, 0.9);
$username-variant1-color: #1e7ddc;
$username-variant2-color: #a756a8;
$username-variant3-color: #7ac9a1;
$username-variant4-color: #f2809d;
$username-variant5-color: #ffc666;
$username-variant6-color: #76ddd7;
$username-variant7-color: #45529b;
$username-variant8-color: #bfd251;
$roomtile-transparent-focused-color: rgba(0, 0, 0, 0.1);
$roomsublist-background: rgba(0, 0, 0, 0.05);
$roomsublist-label-fg-color: $h3-color;
$roomsublist-label-bg-color: $tertiary-accent-color;
$roomsublist-chevron-color: $accent-color;
$panel-divider-color: rgba(118, 207, 166, 0.2);
// ********************
$widget-menu-bar-bg-color: $tertiary-accent-color;
// ********************
// event tile lifecycle
$event-encrypting-color: #abddbc;
$event-sending-color: #ddd;
$event-notsent-color: #f44;
// event redaction
$event-redacted-fg-color: #e2e2e2;
$event-redacted-border-color: #cccccc;
// event timestamp
$event-timestamp-color: #acacac;
$edit-button-url: "$(res)/img/icon_context_message.svg";
$copy-button-url: "$(res)/img/icon_copy_message.svg";
// e2e
$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
$e2e-unverified-color: #e8bf37;
$e2e-warning-color: #ba6363;
/*** ImageView ***/
$lightbox-bg-color: #454545;
$lightbox-fg-color: #ffffff;
$lightbox-border-color: #ffffff;
$imagebody-giflabel: rgba(0, 0, 0, 0.7);
$imagebody-giflabel-border: rgba(0, 0, 0, 0.2);
$imagebody-giflabel-color: rgba(255, 255, 255, 1);
// Tabbed views
$tab-label-fg-color: #45474a;
$tab-label-active-fg-color: #ffffff;
$tab-label-bg-color: transparent;
$tab-label-active-bg-color: #7ac9a1;
$tab-label-icon-bg-color: #454545;
$tab-label-active-icon-bg-color: #ffffff;
// Buttons
$button-primary-fg-color: #ffffff;
$button-primary-bg-color: #7ac9a1;
$button-primary-disabled-fg-color: #ffffff;
$button-primary-disabled-bg-color: #bce4d0;
$button-danger-fg-color: #ffffff;
$button-danger-bg-color: #f56679;
$button-danger-disabled-fg-color: #ffffff;
$button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color
// Toggle switch
$togglesw-off-color: #c1c9d6;
$togglesw-on-color: #7ac9a1;
$togglesw-ball-color: #fff;
// unused?
$progressbar-color: #000;
$room-warning-bg-color: #fff8e3;
$memberstatus-placeholder-color: $roomtile-name-color;
$authpage-bg-color: #2e3649;
$authpage-modal-bg-color: rgba(255, 255, 255, 0.59);
$authpage-body-bg-color: #ffffff;
$authpage-lang-color: #4e5054;
$authpage-body-color: #61708b;
// ***** Mixins! *****
@define-mixin mx_DialogButton {
/* align images in buttons (eg spinners) */
vertical-align: middle;
border: 0px;
border-radius: 36px;
font-family: $font-family;
font-size: 14px;
color: $accent-fg-color;
background-color: $accent-color;
width: auto;
padding: 7px;
padding-left: 1.5em;
padding-right: 1.5em;
cursor: pointer;
display: inline-block;
outline: none;
}
@define-mixin mx_DialogButton_danger {
background-color: $warning-color;
}
@define-mixin mx_DialogButton_hover {
}
@define-mixin mx_DialogButton_small {
@mixin mx_DialogButton;
font-size: 15px;
padding: 0px 1.5em 0px 1.5em;
}
@define-mixin mx_DialogButton_secondary {
// flip colours for the secondary ones
font-weight: 600;
border: 1px solid $accent-color ! important;
color: $accent-color;
background-color: $accent-fg-color;
}

60
res/themes/light/css/_fonts.scss
View file

@ -1,50 +1,36 @@
/*
* Open Sans
* Includes extended Latin, Greek, Cyrillic and Vietnamese character sets
* Nunito.
* Includes extended Latin and Vietnamese character sets
* Current URLs are taken from
* https://github.com/alexeiva/NunitoFont/releases/tag/v3.500
* ...in order to include cyrillic.
*
* Previously, they were
* https://fonts.googleapis.com/css?family=Nunito:400,400i,600,600i,700,700i&subset=latin-ext,vietnamese
*
* We explicitly do not include Nunito's italic variants, as they are not italic enough
* and it's better to rely on the browser's built-in obliquing behaviour.
*/
/* the 'src' links are relative to the bundle.css, which is in a subdirectory.
*/
@font-face {
font-family: 'Open Sans';
src: url('$(res)/fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-family: 'Nunito';
font-style: normal;
font-weight: 400;
src: url('$(res)/fonts/Nunito/Nunito-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Open Sans';
src: url('$(res)/fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
font-family: 'Nunito';
font-style: normal;
font-weight: 600;
src: url('$(res)/fonts/Nunito/Nunito-SemiBold.ttf') format('truetype');
}
@font-face {
font-family: 'Open Sans';
src: url('$(res)/fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('$(res)/fonts/Open_Sans/OpenSans-SemiboldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('$(res)/fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('$(res)/fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
font-family: 'Nunito';
font-style: normal;
font-weight: 700;
src: url('$(res)/fonts/Nunito/Nunito-Bold.ttf') format('truetype');
}
/*

77
res/themes/dharma/css/_dharma.scss → res/themes/light/css/_light.scss
View file

@ -6,6 +6,13 @@
Arial here. */
$font-family: 'Nunito', Arial, Helvetica, Sans-Serif;
// unified palette
// try to use these colors when possible
$accent-color: #03b381;
$notice-primary-color: #ff4b55;
$notice-secondary-color: #61708b;
$header-panel-bg-color: #f2f5f8;
// typical text (dark-on-white in light skin)
$primary-fg-color: #454545;
$primary-bg-color: #ffffff;
@ -18,7 +25,6 @@ $focus-bg-color: #dddddd;
// button UI (white-on-green in light skin)
$accent-fg-color: #ffffff;
$accent-color: #7ac9a1;
$accent-color-50pct: #92caad;
$accent-color-alt: #238CF5;
@ -27,7 +33,7 @@ $selection-fg-color: $primary-bg-color;
$focus-brightness: 105%;
// red warning colour
$warning-color: #f56679;
$warning-color: $notice-primary-color;
// background colour for warnings
$warning-bg-color: #DF2A8B;
$info-bg-color: #2A9EDF;
@ -35,8 +41,8 @@ $mention-user-pill-bg-color: $warning-color;
$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
// pinned events indicator
$pinned-unread-color: #ff0064; // $warning-color
$pinned-color: #888;
$pinned-unread-color: $notice-primary-color;
$pinned-color: $notice-secondary-color;
// informational plinth
$info-plinth-bg-color: #f7f7f7;
@ -72,11 +78,11 @@ $input-darker-fg-color: #9fa9ba;
$input-lighter-bg-color: #f2f5f8;
$input-lighter-fg-color: $input-darker-fg-color;
$input-focused-border-color: #238cf5;
$input-valid-border-color: #7ac9a1;
$input-valid-border-color: $accent-color;
$field-focused-label-bg-color: #ffffff;
$button-bg-color: #7ac9a1;
$button-bg-color: $accent-color;
$button-fg-color: white;
// apart from login forms, which have stronger border
@ -91,6 +97,7 @@ $scrollbar-track-color: transparent;
// context menus
$menu-border-color: #ebedf8;
$menu-bg-color: #fff;
$menu-box-shadow-color: rgba(118, 131, 156, 0.6);
$menu-selected-color: #f5f8fa;
$avatar-initial-color: #ffffff;
@ -139,10 +146,16 @@ $rte-group-pill-color: #aaa;
$topleftmenu-color: #212121;
$roomheader-color: #45474a;
$roomheader-addroom-color: #91A1C0;
$tagpanel-button-color: #91A1C0;
$roomheader-button-color: #91A1C0;
$groupheader-button-color: #91A1C0;
$rightpanel-button-color: #91A1C0;
$composer-button-color: #91A1C0;
$roomtopic-color: #9fa9ba;
$eventtile-meta-color: $roomtopic-color;
$composer-e2e-icon-color: #c9ced6;
$header-divider-color: #91A1C0;
// ********************
@ -152,14 +165,14 @@ $roomtile-notified-color: #212121;
$roomtile-selected-bg-color: #fff;
$roomtile-focused-bg-color: #fff;
$username-variant1-color: #1e7ddc;
$username-variant2-color: #a756a8;
$username-variant3-color: #7ac9a1;
$username-variant4-color: #f2809d;
$username-variant5-color: #ffc666;
$username-variant6-color: #76ddd7;
$username-variant7-color: #45529b;
$username-variant8-color: #bfd251;
$username-variant1-color: #368bd6;
$username-variant2-color: #ac3ba8;
$username-variant3-color: #03b381;
$username-variant4-color: #e64f7a;
$username-variant5-color: #ff812d;
$username-variant6-color: #2dc2c5;
$username-variant7-color: #5c56f5;
$username-variant8-color: #74d12c;
$roomtile-transparent-focused-color: rgba(0, 0, 0, 0.1);
@ -205,26 +218,24 @@ $lightbox-border-color: #ffffff;
$tab-label-fg-color: #45474a;
$tab-label-active-fg-color: #ffffff;
$tab-label-bg-color: transparent;
$tab-label-active-bg-color: #7ac9a1;
$tab-label-active-bg-color: $accent-color;
$tab-label-icon-bg-color: #454545;
$tab-label-active-icon-bg-color: #ffffff;
// Buttons
$button-primary-fg-color: #ffffff;
$button-primary-bg-color: #7ac9a1;
$button-primary-disabled-fg-color: #ffffff;
$button-primary-disabled-bg-color: #bce4d0;
$button-primary-bg-color: $accent-color;
$button-secondary-bg-color: $accent-fg-color;
$button-danger-fg-color: #ffffff;
$button-danger-bg-color: #f56679;
$button-danger-bg-color: $notice-primary-color;
$button-danger-disabled-fg-color: #ffffff;
$button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color
// Toggle switch
$togglesw-off-color: #c1c9d6;
$togglesw-on-color: #7ac9a1;
$togglesw-on-color: $accent-color;
$togglesw-ball-color: #fff;
// unused?
$progressbar-color: #000;
$room-warning-bg-color: #fff8e3;
@ -235,7 +246,10 @@ $authpage-bg-color: #2e3649;
$authpage-modal-bg-color: rgba(255, 255, 255, 0.59);
$authpage-body-bg-color: #ffffff;
$authpage-lang-color: #4e5054;
$authpage-body-color: #61708b;
$authpage-primary-color: #454545;
$authpage-secondary-color: #61708b;
$panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1);
/*** form elements ***/
@ -270,23 +284,13 @@ $authpage-body-color: #61708b;
border: none;
flex: 1;
color: $primary-fg-color;
},
}
input::placeholder {
color: $roomsublist-label-fg-color;
color: $roomsublist-label-fg-color;
}
}
}
input[type=text],
input[type=search],
input[type=password] {
padding: 9px;
font-family: $font-family;
font-size: 14px;
font-weight: 600;
min-width: 0;
}
/*** panels ***/
.dark-panel {
background-color: $secondary-accent-color;
@ -319,7 +323,6 @@ input[type=search].mx_textinput_icon {
background-position: 10px center;
}
// FIXME THEME - Tint by CSS rather than referencing a duplicate asset
input[type=text].mx_textinput_icon.mx_textinput_search,
input[type=search].mx_textinput_icon.mx_textinput_search {
@ -332,7 +335,7 @@ input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
display: none;
display: none;
}
.input[type=text]::-webkit-input-placeholder,
@ -386,5 +389,5 @@ textarea::placeholder {
font-weight: 600;
border: 1px solid $accent-color ! important;
color: $accent-color;
background-color: $accent-fg-color;
background-color: $button-secondary-bg-color;
}

2
res/themes/light/css/light.scss
View file

@ -1,4 +1,4 @@
@import "_paths.scss";
@import "_fonts.scss";
@import "_base.scss";
@import "_light.scss";
@import "../../../../res/css/_components.scss";

2
src/MatrixClientPeg.js
View file

@ -177,7 +177,7 @@ class MatrixClientPeg {
userId: creds.userId,
deviceId: creds.deviceId,
timelineSupport: true,
forceTURN: !SettingsStore.getValue('webRtcForcePeerToPeer', false),
forceTURN: !SettingsStore.getValue('webRtcAllowPeerToPeer', false),
verificationMethods: [verificationMethods.SAS]
};

5
src/components/structures/AutoHideScrollbar.js
View file

@ -114,10 +114,15 @@ export default class AutoHideScrollbar extends React.Component {
}
}
getScrollTop() {
return this.containerRef.scrollTop;
}
render() {
return (<div
ref={this._collectContainerRef}
className={["mx_AutoHideScrollbar", this.props.className].join(" ")}
onScroll={this.props.onScroll}
>
<div className="mx_AutoHideScrollbar_offset">
{ this.props.children }

23
src/components/structures/GroupView.js
View file

@ -1157,7 +1157,6 @@ export default React.createClass({
render: function() {
const GroupAvatar = sdk.getComponent("avatars.GroupAvatar");
const Spinner = sdk.getComponent("elements.Spinner");
const TintableSvg = sdk.getComponent("elements.TintableSvg");
const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
if (this.state.summaryLoading && this.state.error === null || this.state.saving) {
@ -1248,13 +1247,17 @@ export default React.createClass({
if (this.state.editing) {
rightButtons.push(
<AccessibleButton className="mx_GroupView_textButton mx_RoomHeader_textButton"
onClick={this._onSaveClick} key="_saveButton"
key="_saveButton"
onClick={this._onSaveClick}
>
{ _t('Save') }
</AccessibleButton>,
);
rightButtons.push(
<AccessibleButton className="mx_RoomHeader_cancelButton" onClick={this._onCancelClick} key="_cancelButton">
<AccessibleButton className="mx_RoomHeader_cancelButton"
key="_cancelButton"
onClick={this._onCancelClick}
>
<img src={require("../../../res/img/cancel.svg")} className="mx_filterFlipColor"
width="18" height="18" alt={_t("Cancel")} />
</AccessibleButton>,
@ -1262,16 +1265,20 @@ export default React.createClass({
} else {
if (summary.user && summary.user.membership === 'join') {
rightButtons.push(
<AccessibleButton className="mx_GroupHeader_button"
onClick={this._onEditClick} title={_t("Community Settings")} key="_editButton"
<AccessibleButton className="mx_GroupHeader_button mx_GroupHeader_editButton"
key="_editButton"
onClick={this._onEditClick}
title={_t("Community Settings")}
>
<TintableSvg src={require("../../../res/img/icons-settings-room.svg")} width="16" height="16" />
</AccessibleButton>,
);
}
rightButtons.push(
<AccessibleButton className="mx_GroupHeader_button" onClick={this._onShareClick} title={_t('Share Community')} key="_shareButton">
<TintableSvg src={require("../../../res/img/icons-share.svg")} width="16" height="16" />
<AccessibleButton className="mx_GroupHeader_button mx_GroupHeader_shareButton"
key="_shareButton"
onClick={this._onShareClick}
title={_t('Share Community')}
>
</AccessibleButton>,
);
}

4
src/components/structures/IndicatorScrollbar.js
View file

@ -59,6 +59,10 @@ export default class IndicatorScrollbar extends React.Component {
}
}
getScrollTop() {
return this._autoHideScrollbar.getScrollTop();
}
componentWillUnmount() {
if (this._scrollElement) {
this._scrollElement.removeEventListener("scroll", this.checkOverflow);

8
src/components/structures/MatrixChat.js
View file

@ -654,11 +654,9 @@ export default React.createClass({
});
break;
}
// case 'set_theme':
// disable changing the theme for now
// as other themes are not compatible with dharma
// this._onSetTheme(payload.value);
// break;
case 'set_theme':
this._onSetTheme(payload.value);
break;
case 'on_logging_in':
// We are now logging in, so set the state to reflect that
// NB. This does not touch 'ready' since if our dispatches

73
src/components/structures/RoomSubList.js
View file

@ -27,7 +27,8 @@ import IndicatorScrollbar from './IndicatorScrollbar';
import { KeyCode } from '../../Keyboard';
import { Group } from 'matrix-js-sdk';
import PropTypes from 'prop-types';
import RoomTile from "../views/rooms/RoomTile";
import LazyRenderList from "../views/elements/LazyRenderList";
// turn this on for drop & drag console debugging galore
const debug = false;
@ -60,6 +61,9 @@ const RoomSubList = React.createClass({
getInitialState: function() {
return {
hidden: this.props.startAsHidden || false,
// some values to get LazyRenderList starting
scrollerHeight: 800,
scrollTop: 0,
};
},
@ -134,24 +138,21 @@ const RoomSubList = React.createClass({
this.setState(this.state);
},
makeRoomTiles: function() {
const RoomTile = sdk.getComponent("rooms.RoomTile");
return this.props.list.map((room, index) => {
return <RoomTile
room={room}
roomSubList={this}
tagName={this.props.tagName}
key={room.roomId}
collapsed={this.props.collapsed || false}
unread={Unread.doesRoomHaveUnreadMessages(room)}
highlight={room.getUnreadNotificationCount('highlight') > 0 || this.props.isInvite}
notificationCount={room.getUnreadNotificationCount()}
isInvite={this.props.isInvite}
refreshSubList={this._updateSubListCount}
incomingCall={null}
onClick={this.onRoomTileClick}
/>;
});
makeRoomTile: function(room) {
return <RoomTile
room={room}
roomSubList={this}
tagName={this.props.tagName}
key={room.roomId}
collapsed={this.props.collapsed || false}
unread={Unread.doesRoomHaveUnreadMessages(room)}
highlight={room.getUnreadNotificationCount('highlight') > 0 || this.props.isInvite}
notificationCount={room.getUnreadNotificationCount()}
isInvite={this.props.isInvite}
refreshSubList={this._updateSubListCount}
incomingCall={null}
onClick={this.onRoomTileClick}
/>;
},
_onNotifBadgeClick: function(e) {
@ -270,6 +271,29 @@ const RoomSubList = React.createClass({
if (this.refs.subList) {
this.refs.subList.style.height = `${height}px`;
}
this._updateLazyRenderHeight(height);
},
_updateLazyRenderHeight: function(height) {
this.setState({scrollerHeight: height});
},
_onScroll: function() {
this.setState({scrollTop: this.refs.scroller.getScrollTop()});
},
_getRenderItems: function() {
// try our best to not create a new array
// because LazyRenderList rerender when the items prop
// is not the same object as the previous value
const {list, extraTiles} = this.props;
if (!extraTiles || !extraTiles.length) {
return list;
}
if (!list || list.length) {
return extraTiles;
}
return list.concat(extraTiles);
},
render: function() {
@ -287,12 +311,15 @@ const RoomSubList = React.createClass({
{this._getHeaderJsx(isCollapsed)}
</div>;
} else {
const tiles = this.makeRoomTiles();
tiles.push(...this.props.extraTiles);
return <div ref="subList" className={subListClasses}>
{this._getHeaderJsx(isCollapsed)}
<IndicatorScrollbar ref="scroller" className="mx_RoomSubList_scroll">
{ tiles }
<IndicatorScrollbar ref="scroller" className="mx_RoomSubList_scroll" onScroll={ this._onScroll }>
<LazyRenderList
scrollTop={this.state.scrollTop }
height={ this.state.scrollerHeight }
renderItem={ this.makeRoomTile }
itemHeight={34}
items={this._getRenderItems()} />
</IndicatorScrollbar>
</div>;
}

6
src/components/structures/SearchBox.js
View file

@ -21,7 +21,7 @@ import { _t } from '../../languageHandler';
import { KeyCode } from '../../Keyboard';
import sdk from '../../index';
import dis from '../../dispatcher';
import { debounce } from 'lodash';
import { throttle } from 'lodash';
import AccessibleButton from '../../components/views/elements/AccessibleButton';
module.exports = React.createClass({
@ -67,9 +67,9 @@ module.exports = React.createClass({
this.onSearch();
},
onSearch: debounce(function() {
onSearch: throttle(function() {
this.props.onSearch(this.refs.search.value);
}, 200, {trailing: true}),
}, 200, {trailing: true, leading: true}),
_onKeyDown: function(ev) {
switch (ev.keyCode) {

32
src/components/structures/auth/Registration.js
View file

@ -64,6 +64,17 @@ module.exports = React.createClass({
getInitialState: function() {
const customURLsAllowed = !SdkConfig.get()['disable_custom_urls'];
let initialPhase = PHASE_SERVER_DETAILS;
if (
// if we have these two, skip to the good bit
// (they could come in from the URL params in a
// registration email link)
(this.props.clientSecret && this.props.sessionId) ||
// or if custom URLs aren't allowed, skip them
!customURLsAllowed
) {
initialPhase = PHASE_REGISTRATION;
}
return {
busy: false,
@ -87,7 +98,7 @@ module.exports = React.createClass({
hsUrl: this.props.customHsUrl,
isUrl: this.props.customIsUrl,
// Phase of the overall registration dialog.
phase: customURLsAllowed ? PHASE_SERVER_DETAILS : PHASE_REGISTRATION,
phase: initialPhase,
flows: null,
};
},
@ -111,7 +122,7 @@ module.exports = React.createClass({
});
},
onServerTypeChange(type) {
onServerTypeChange(type, initial) {
this.setState({
serverType: type,
});
@ -137,9 +148,15 @@ module.exports = React.createClass({
hsUrl: this.props.defaultHsUrl,
isUrl: this.props.defaultIsUrl,
});
this.setState({
phase: PHASE_SERVER_DETAILS,
});
// if this is the initial value from the control and we're
// already in the registration phase, don't go back to the
// server details phase (but do if it's actually a change resulting
// from user interaction).
if (!initial || !this.state.phase === PHASE_REGISTRATION) {
this.setState({
phase: PHASE_SERVER_DETAILS,
});
}
break;
}
},
@ -372,9 +389,12 @@ module.exports = React.createClass({
// If we're on a different phase, we only show the server type selector,
// which is always shown if we allow custom URLs at all.
if (PHASES_ENABLED && this.state.phase !== PHASE_SERVER_DETAILS) {
// if we've been given a custom HS URL we should actually pass that, so
// that the appropriate section is selected at the start to match the
// homeserver URL we're using
return <div>
<ServerTypeSelector
defaultHsUrl={this.props.defaultHsUrl}
defaultHsUrl={this.props.customHsUrl || this.props.defaultHsUrl}
onChange={this.onServerTypeChange}
/>
</div>;

6
src/components/views/auth/ServerTypeSelector.js
View file

@ -90,7 +90,11 @@ export default class ServerTypeSelector extends React.PureComponent {
selected: type,
};
if (onChange) {
onChange(type);
// FIXME: Supply a second 'initial' param here to flag that this is
// initialising the value rather than from user interaction
// (which sometimes we'll want to ignore). Must be a better way
// to do this.
onChange(type, true);
}
}

32
src/components/views/context_menus/TopLeftMenu.js
View file

@ -20,11 +20,15 @@ import { _t } from '../../../languageHandler';
import LogoutDialog from "../dialogs/LogoutDialog";
import Modal from "../../../Modal";
import SdkConfig from '../../../SdkConfig';
import MatrixClientPeg from '../../../MatrixClientPeg';
export class TopLeftMenu extends React.Component {
constructor() {
super();
this.viewHomePage = this.viewHomePage.bind(this);
this.viewWelcomePage = this.viewWelcomePage.bind(this);
this.openSettings = this.openSettings.bind(this);
this.signIn = this.signIn.bind(this);
this.signOut = this.signOut.bind(this);
}
@ -41,6 +45,8 @@ export class TopLeftMenu extends React.Component {
}
render() {
const isGuest = MatrixClientPeg.get().isGuest();
let homePageSection = null;
if (this.hasHomePage()) {
homePageSection = <ul className="mx_TopLeftMenu_section">
@ -48,14 +54,26 @@ export class TopLeftMenu extends React.Component {
</ul>;
}
let signInOutSection;
if (isGuest) {
signInOutSection = <ul className="mx_TopLeftMenu_section">
<li className="mx_TopLeftMenu_icon_signin" onClick={this.signIn}>{_t("Sign in")}</li>
</ul>;
} else {
signInOutSection = <ul className="mx_TopLeftMenu_section">
<li className="mx_TopLeftMenu_icon_signout" onClick={this.signOut}>{_t("Sign out")}</li>
</ul>;
}
return <div className="mx_TopLeftMenu">
{homePageSection}
<ul className="mx_TopLeftMenu_section">
<li className="mx_TopLeftMenu_icon_settings" onClick={this.openSettings}>{_t("Settings")}</li>
<li className="mx_TopLeftMenu_icon_welcome" onClick={this.viewWelcomePage}>{_t("Welcome")}</li>
</ul>
<ul className="mx_TopLeftMenu_section">
<li className="mx_TopLeftMenu_icon_signout" onClick={this.signOut}>{_t("Sign out")}</li>
<li className="mx_TopLeftMenu_icon_settings" onClick={this.openSettings}>{_t("Settings")}</li>
</ul>
{signInOutSection}
</div>;
}
@ -64,11 +82,21 @@ export class TopLeftMenu extends React.Component {
this.closeMenu();
}
viewWelcomePage() {
dis.dispatch({action: 'view_welcome_page'});
this.closeMenu();
}
openSettings() {
dis.dispatch({action: 'view_user_settings'});
this.closeMenu();
}
signIn() {
dis.dispatch({action: 'start_login'});
this.closeMenu();
}
signOut() {
Modal.createTrackedDialog('Logout E2E Export', '', LogoutDialog);
this.closeMenu();

97
src/components/views/elements/LazyRenderList.js Normal file
View file

@ -0,0 +1,97 @@
/*
Copyright 2019 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.
*/
import React from "react";
const OVERFLOW_ITEMS = 20;
const OVERFLOW_MARGIN = 5;
class ItemRange {
constructor(topCount, renderCount, bottomCount) {
this.topCount = topCount;
this.renderCount = renderCount;
this.bottomCount = bottomCount;
}
contains(range) {
return range.topCount >= this.topCount &&
(range.topCount + range.renderCount) <= (this.topCount + this.renderCount);
}
expand(amount) {
const topGrow = Math.min(amount, this.topCount);
const bottomGrow = Math.min(amount, this.bottomCount);
return new ItemRange(
this.topCount - topGrow,
this.renderCount + topGrow + bottomGrow,
this.bottomCount - bottomGrow,
);
}
}
export default class LazyRenderList extends React.Component {
constructor(props) {
super(props);
const renderRange = LazyRenderList.getVisibleRangeFromProps(props).expand(OVERFLOW_ITEMS);
this.state = {renderRange};
}
static getVisibleRangeFromProps(props) {
const {items, itemHeight, scrollTop, height} = props;
const length = items ? items.length : 0;
const topCount = Math.max(0, Math.floor(scrollTop / itemHeight));
const itemsAfterTop = length - topCount;
const renderCount = Math.min(Math.ceil(height / itemHeight), itemsAfterTop);
const bottomCount = itemsAfterTop - renderCount;
return new ItemRange(topCount, renderCount, bottomCount);
}
componentWillReceiveProps(props) {
const state = this.state;
const range = LazyRenderList.getVisibleRangeFromProps(props);
const intersectRange = range.expand(OVERFLOW_MARGIN);
const prevSize = this.props.items ? this.props.items.length : 0;
const listHasChangedSize = props.items.length !== prevSize;
// only update renderRange if the list has shrunk/grown and we need to adjust padding or
// if the new range isn't contained by the old anymore
if (listHasChangedSize || !state.renderRange || !state.renderRange.contains(intersectRange)) {
this.setState({renderRange: range.expand(OVERFLOW_ITEMS)});
}
}
shouldComponentUpdate(nextProps, nextState) {
const itemsChanged = nextProps.items !== this.props.items;
const rangeChanged = nextState.renderRange !== this.state.renderRange;
return itemsChanged || rangeChanged;
}
render() {
const {itemHeight, items, renderItem} = this.props;
const {renderRange} = this.state;
const paddingTop = renderRange.topCount * itemHeight;
const paddingBottom = renderRange.bottomCount * itemHeight;
const renderedItems = (items || []).slice(
renderRange.topCount,
renderRange.topCount + renderRange.renderCount,
);
return (<div style={{paddingTop: `${paddingTop}px`, paddingBottom: `${paddingBottom}px`}}>
{ renderedItems.map(renderItem) }
</div>);
}
}

8
src/components/views/elements/ManageIntegsButton.js
View file

@ -24,7 +24,6 @@ import ScalarMessaging from '../../../ScalarMessaging';
import Modal from "../../../Modal";
import { _t } from '../../../languageHandler';
import AccessibleButton from './AccessibleButton';
import TintableSvg from './TintableSvg';
export default class ManageIntegsButton extends React.Component {
constructor(props) {
@ -76,6 +75,7 @@ export default class ManageIntegsButton extends React.Component {
if (this.scalarClient !== null) {
const integrationsButtonClasses = classNames({
mx_RoomHeader_button: true,
mx_RoomHeader_manageIntegsButton: true,
mx_ManageIntegsButton_error: !!this.state.scalarError,
});
@ -94,8 +94,10 @@ export default class ManageIntegsButton extends React.Component {
}
integrationsButton = (
<AccessibleButton className={integrationsButtonClasses} onClick={this.onManageIntegrations} title={_t('Manage Integrations')}>
<TintableSvg src={require("../../../../res/img/feather-icons/grid.svg")} width="20" height="20" />
<AccessibleButton className={integrationsButtonClasses}
onClick={this.onManageIntegrations}
title={_t('Manage Integrations')}
>
{ integrationsWarningTriangle }
{ integrationsErrorPopup }
</AccessibleButton>

6
src/components/views/right_panel/GroupHeaderButtons.js
View file

@ -65,12 +65,14 @@ export default class GroupHeaderButtons extends HeaderButtons {
];
return [
<HeaderButton key="_groupMembersButton" title={_t('Members')} iconSrc={require("../../../../res/img/icons-people.svg")}
<HeaderButton key="groupMembersButton" name="groupMembersButton"
title={_t('Members')}
isHighlighted={this.isPhase(groupPhases)}
clickPhase={RightPanel.Phase.GroupMemberList}
analytics={['Right Panel', 'Group Member List Button', 'click']}
/>,
<HeaderButton key="_roomsButton" title={_t('Rooms')} iconSrc={require("../../../../res/img/icons-room-nobg.svg")}
<HeaderButton key="roomsButton" name="roomsButton"
title={_t('Rooms')}
isHighlighted={this.isPhase(roomPhases)}
clickPhase={RightPanel.Phase.GroupRoomList}
analytics={['Right Panel', 'Group Room List Button', 'click']}

11
src/components/views/right_panel/HeaderButton.js
View file

@ -23,7 +23,6 @@ import classNames from 'classnames';
import dis from '../../../dispatcher';
import Analytics from '../../../Analytics';
import AccessibleButton from '../elements/AccessibleButton';
import TintableSvg from '../elements/TintableSvg';
export default class HeaderButton extends React.Component {
constructor() {
@ -44,6 +43,7 @@ export default class HeaderButton extends React.Component {
const classes = classNames({
mx_RightPanel_headerButton: true,
mx_RightPanel_headerButton_highlight: this.props.isHighlighted,
[`mx_RightPanel_${this.props.name}`]: true,
});
return <AccessibleButton
@ -51,9 +51,8 @@ export default class HeaderButton extends React.Component {
aria-expanded={this.props.isHighlighted}
title={this.props.title}
className={classes}
onClick={this.onClick} >
<TintableSvg src={this.props.iconSrc} width="20" height="20" />
</AccessibleButton>;
onClick={this.onClick}>
</AccessibleButton>;
}
}
@ -62,14 +61,14 @@ HeaderButton.propTypes = {
isHighlighted: PropTypes.bool.isRequired,
// The phase to swap to when the button is clicked
clickPhase: PropTypes.string.isRequired,
// The source file of the icon to display
iconSrc: PropTypes.string.isRequired,
// The badge to display above the icon
badge: PropTypes.node,
// The parameters to track the click event
analytics: PropTypes.arrayOf(PropTypes.string).isRequired,
// Button name
name: PropTypes.string.isRequired,
// Button title
title: PropTypes.string.isRequired,
};

2
src/components/views/right_panel/HeaderButtons.js
View file

@ -88,7 +88,7 @@ export default class HeaderButtons extends React.Component {
render() {
// inline style as this will be swapped around in future commits
return <div style={{display: 'flex'}}>
return <div className="mx_HeaderButtons">
{ this.renderButtons() }
</div>;
}

9
src/components/views/right_panel/RoomHeaderButtons.js
View file

@ -52,17 +52,20 @@ export default class RoomHeaderButtons extends HeaderButtons {
];
return [
<HeaderButton key="_membersButton" title={_t('Members')} iconSrc={require("../../../../res/img/feather-icons/user.svg")}
<HeaderButton key="membersButton" name="membersButton"
title={_t('Members')}
isHighlighted={this.isPhase(membersPhases)}
clickPhase={RightPanel.Phase.RoomMemberList}
analytics={['Right Panel', 'Member List Button', 'click']}
/>,
<HeaderButton key="_filesButton" title={_t('Files')} iconSrc={require("../../../../res/img/feather-icons/files.svg")}
<HeaderButton key="filesButton" name="filesButton"
title={_t('Files')}
isHighlighted={this.isPhase(RightPanel.Phase.FilePanel)}
clickPhase={RightPanel.Phase.FilePanel}
analytics={['Right Panel', 'File List Button', 'click']}
/>,
<HeaderButton key="_notifsButton" title={_t('Notifications')} iconSrc={require("../../../../res/img/feather-icons/notifications.svg")}
<HeaderButton key="notifsButton" name="notifsButton"
title={_t('Notifications')}
isHighlighted={this.isPhase(RightPanel.Phase.NotificationPanel)}
clickPhase={RightPanel.Phase.NotificationPanel}
analytics={['Right Panel', 'Notification List Button', 'click']}

30
src/components/views/rooms/MessageComposer.js
View file

@ -306,7 +306,6 @@ export default class MessageComposer extends React.Component {
render() {
const uploadInputStyle = {display: 'none'};
const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar');
const TintableSvg = sdk.getComponent("elements.TintableSvg");
const MessageComposerInput = sdk.getComponent("rooms.MessageComposerInput");
const controls = [];
@ -335,17 +334,26 @@ export default class MessageComposer extends React.Component {
// Call buttons
if (this.props.callState && this.props.callState !== 'ended') {
hangupButton =
<AccessibleButton key="controls_hangup" className="mx_MessageComposer_hangup" onClick={this.onHangupClick}>
<img src={require("../../../../res/img/hangup.svg")} alt={_t('Hangup')} title={_t('Hangup')} width="25" height="25" />
<AccessibleButton className="mx_MessageComposer_button mx_MessageComposer_hangup"
key="controls_hangup"
onClick={this.onHangupClick}
title={_t('Hangup')}
>
</AccessibleButton>;
} else {
callButton =
<AccessibleButton key="controls_call" className="mx_MessageComposer_voicecall" onClick={this.onVoiceCallClick} title={_t('Voice call')}>
<TintableSvg src={require("../../../../res/img/feather-icons/phone.svg")} width="20" height="20" />
<AccessibleButton className="mx_MessageComposer_button mx_MessageComposer_voicecall"
key="controls_call"
onClick={this.onVoiceCallClick}
title={_t('Voice call')}
>
</AccessibleButton>;
videoCallButton =
<AccessibleButton key="controls_videocall" className="mx_MessageComposer_videocall" onClick={this.onCallClick} title={_t('Video call')}>
<TintableSvg src={require("../../../../res/img/feather-icons/video.svg")} width="20" height="20" />
<AccessibleButton className="mx_MessageComposer_button mx_MessageComposer_videocall"
key="controls_videocall"
onClick={this.onCallClick}
title={_t('Video call')}
>
</AccessibleButton>;
}
@ -385,9 +393,11 @@ export default class MessageComposer extends React.Component {
// check separately for whether we can call, but this is slightly
// complex because of conference calls.
const uploadButton = (
<AccessibleButton key="controls_upload" className="mx_MessageComposer_upload"
onClick={this.onUploadClick} title={_t('Upload file')}>
<TintableSvg src={require("../../../../res/img/feather-icons/paperclip.svg")} width="20" height="20" />
<AccessibleButton className="mx_MessageComposer_button mx_MessageComposer_upload"
key="controls_upload"
onClick={this.onUploadClick}
title={_t('Upload file')}
>
<input ref="uploadInput" type="file"
style={uploadInputStyle}
multiple

26
src/components/views/rooms/RoomHeader.js
View file

@ -154,7 +154,6 @@ module.exports = React.createClass({
render: function() {
const RoomAvatar = sdk.getComponent("avatars.RoomAvatar");
const TintableSvg = sdk.getComponent("elements.TintableSvg");
const EmojiText = sdk.getComponent('elements.EmojiText');
let searchStatus = null;
@ -228,8 +227,10 @@ module.exports = React.createClass({
if (this.props.onSettingsClick) {
settingsButton =
<AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onSettingsClick} title={_t("Settings")}>
<TintableSvg src={require("../../../../res/img/feather-icons/settings.svg")} width="20" height="20" />
<AccessibleButton className="mx_RoomHeader_button mx_RoomHeader_settingsButton"
onClick={this.props.onSettingsClick}
title={_t("Settings")}
>
</AccessibleButton>;
}
@ -245,7 +246,6 @@ module.exports = React.createClass({
<AccessibleButton className="mx_RoomHeader_button mx_RoomHeader_pinnedButton"
onClick={this.props.onPinnedClick} title={_t("Pinned Messages")}>
{ pinsIndicator }
<TintableSvg src={require("../../../../res/img/icons-pin.svg")} width="16" height="16" />
</AccessibleButton>;
}
@ -260,24 +260,30 @@ module.exports = React.createClass({
let forgetButton;
if (this.props.onForgetClick) {
forgetButton =
<AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onForgetClick} title={_t("Forget room")}>
<TintableSvg src={require("../../../../res/img/leave.svg")} width="26" height="20" />
<AccessibleButton className="mx_RoomHeader_button mx_RoomHeader_forgetButton"
onClick={this.props.onForgetClick}
title={_t("Forget room")}
>
</AccessibleButton>;
}
let searchButton;
if (this.props.onSearchClick && this.props.inRoom) {
searchButton =
<AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title={_t("Search")}>
<TintableSvg src={require("../../../../res/img/feather-icons/search.svg")} width="20" height="20" />
<AccessibleButton className="mx_RoomHeader_button mx_RoomHeader_searchButton"
onClick={this.props.onSearchClick}
title={_t("Search")}
>
</AccessibleButton>;
}
let shareRoomButton;
if (this.props.inRoom) {
shareRoomButton =
<AccessibleButton className="mx_RoomHeader_button" onClick={this.onShareRoomClick} title={_t('Share room')}>
<TintableSvg src={require("../../../../res/img/feather-icons/share.svg")} width="20" height="20" />
<AccessibleButton className="mx_RoomHeader_button mx_RoomHeader_shareButton"
onClick={this.onShareRoomClick}
title={_t('Share room')}
>
</AccessibleButton>;
}

13
src/components/views/rooms/Stickerpicker.js
View file

@ -322,7 +322,6 @@ export default class Stickerpicker extends React.Component {
}
render() {
const TintableSvg = sdk.getComponent("elements.TintableSvg");
const ContextualMenu = sdk.getComponent('structures.ContextualMenu');
const GenericElementContextMenu = sdk.getComponent('context_menus.GenericElementContextMenu');
let stickersButton;
@ -348,11 +347,11 @@ export default class Stickerpicker extends React.Component {
<AccessibleButton
id='stickersButton'
key="controls_hide_stickers"
className="mx_MessageComposer_stickers mx_Stickers_hideStickers"
className="mx_MessageComposer_button mx_MessageComposer_stickers mx_Stickers_hideStickers"
onClick={this._onHideStickersClick}
ref='target'
title={_t("Hide Stickers")}>
<TintableSvg src={require("../../../../res/img/feather-icons/face.svg")} width="20" height="20" />
title={_t("Hide Stickers")}
>
</AccessibleButton>;
} else {
// Show show-stickers button
@ -360,10 +359,10 @@ export default class Stickerpicker extends React.Component {
<AccessibleButton
id='stickersButton'
key="controls_show_stickers"
className="mx_MessageComposer_stickers"
className="mx_MessageComposer_button mx_MessageComposer_stickers"
onClick={this._onShowStickersClick}
title={_t("Show Stickers")}>
<TintableSvg src={require("../../../../res/img/feather-icons/face.svg")} width="20" height="20" />
title={_t("Show Stickers")}
>
</AccessibleButton>;
}
return <div>

29
src/components/views/settings/KeyBackupPanel.js
View file

@ -42,7 +42,7 @@ export default class KeyBackupPanel extends React.PureComponent {
}
componentWillMount() {
this._loadBackupStatus();
this._checkKeyBackupStatus();
MatrixClientPeg.get().on('crypto.keyBackupStatus', this._onKeyBackupStatus);
MatrixClientPeg.get().on(
@ -70,9 +70,32 @@ export default class KeyBackupPanel extends React.PureComponent {
}
_onKeyBackupStatus() {
// This just loads the current backup status rather than forcing
// a re-check otherwise we risk causing infinite loops
this._loadBackupStatus();
}
async _checkKeyBackupStatus() {
try {
const {backupInfo, trustInfo} = await MatrixClientPeg.get().checkKeyBackup();
this.setState({
backupInfo,
backupSigStatus: trustInfo,
error: null,
loading: false,
});
} catch (e) {
console.log("Unable to fetch check backup status", e);
if (this._unmounted) return;
this.setState({
error: e,
backupInfo: null,
backupSigStatus: null,
loading: false,
});
}
}
async _loadBackupStatus() {
this.setState({loading: true});
try {
@ -80,6 +103,7 @@ export default class KeyBackupPanel extends React.PureComponent {
const backupSigStatus = await MatrixClientPeg.get().isKeyBackupTrusted(backupInfo);
if (this._unmounted) return;
this.setState({
error: null,
backupInfo,
backupSigStatus,
loading: false,
@ -89,9 +113,10 @@ export default class KeyBackupPanel extends React.PureComponent {
if (this._unmounted) return;
this.setState({
error: e,
backupInfo: null,
backupSigStatus: null,
loading: false,
});
return;
}
}

10
src/components/views/settings/tabs/GeneralUserSettingsTab.js
View file

@ -54,6 +54,7 @@ export default class GeneralUserSettingsTab extends React.Component {
if (this.state.theme === newTheme) return;
SettingsStore.setValue("theme", null, SettingLevel.ACCOUNT, newTheme);
this.setState({theme: newTheme});
dis.dispatch({action: 'set_theme', value: newTheme});
};
@ -138,17 +139,14 @@ export default class GeneralUserSettingsTab extends React.Component {
}
_renderThemeSection() {
// TODO: Re-enable theme selection once the themes actually work
const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
return (
<div className="mx_SettingsTab_section mx_GeneralUserSettingsTab_themeSection">
<span className="mx_SettingsTab_subheading">{_t("Theme")}</span>
<Field id="theme" label={_t("Theme")} element="select" disabled={true}
<Field id="theme" label={_t("Theme")} element="select"
value={this.state.theme} onChange={this._onThemeChange}>
<option value="light">{_t("Light theme")}</option>
<option value="light">{_t("Default theme")}</option>
<option value="dark">{_t("Dark theme")}</option>
<option value="dharma">{_t("2018 theme")}</option>
<option value="status">{_t("Status.im theme")}</option>
</Field>
<SettingsFlag name="useCompactLayout" level={SettingLevel.ACCOUNT} />
</div>
@ -164,7 +162,7 @@ export default class GeneralUserSettingsTab extends React.Component {
{_t("Deactivating your account is a permanent action - be careful!")}
</span>
<AccessibleButton onClick={this._onDeactivateClicked} kind="danger">
{_t("Close Account")}
{_t("Deactivate Account")}
</AccessibleButton>
</div>
);

2
src/components/views/settings/tabs/VoiceSettingsTab.js
View file

@ -174,7 +174,7 @@ export default class VoiceSettingsTab extends React.Component {
{microphoneDropdown}
{webcamDropdown}
<SettingsFlag name='VideoView.flipVideoHorizontally' level={SettingLevel.ACCOUNT} />
<SettingsFlag name='webRtcForcePeerToPeer' level={SettingLevel.DEVICE} onChange={this._changeWebRtcMethod} />
<SettingsFlag name='webRtcAllowPeerToPeer' level={SettingLevel.DEVICE} onChange={this._changeWebRtcMethod} />
</div>
</div>
);

2
src/i18n/strings/bg.json
View file

@ -1515,7 +1515,7 @@
"2018 theme": "Тема 2018",
"Account management": "Управление на акаунта",
"Deactivating your account is a permanent action - be careful!": "Деактивирането на акаунта е необратимо действие - внимавайте!",
"Close Account": "Затвори акаунта",
"Deactivate Account": "Затвори акаунта",
"For help with using Riot, click <a>here</a>.": "За помощ при използването на Riot, кликнете <a>тук</a>.",
"For help with using Riot, click <a>here</a> or start a chat with our bot using the button below.": "За помощ при използването на Riot, кликнете <a>тук</a> или започнете чат с бота ни използвайки бутона по-долу.",
"Chat with Riot Bot": "Чати с Riot Bot",

2
src/i18n/strings/de_DE.json
View file

@ -1516,7 +1516,7 @@
"Theme": "Design",
"2018 theme": "2018 Design",
"Account management": "Benutzerkontenverwaltung",
"Close Account": "Benutzerkonto schließen",
"Deactivate Account": "Benutzerkonto schließen",
"For help with using Riot, click <a>here</a>.": "Um Hilfe zur Benutzung von Riot zu erhalten, klicke <a>hier</a>.",
"For help with using Riot, click <a>here</a> or start a chat with our bot using the button below.": "Um Hilfe zur Benutzung von Riot zu erhalten, klicke <a>hier</a> oder beginne einen Chat mit unserem Bot, indem du den unteren Button klickst.",
"Chat with Riot Bot": "Chatte mit dem Riot Bot",

15
src/i18n/strings/en_EN.json
View file

@ -292,7 +292,7 @@
"Automatically replace plain text Emoji": "Automatically replace plain text Emoji",
"Mirror local video feed": "Mirror local video feed",
"Enable Community Filter Panel": "Enable Community Filter Panel",
"Disable Peer-to-Peer for 1:1 calls": "Disable Peer-to-Peer for 1:1 calls",
"Allow Peer-to-Peer for 1:1 calls": "Allow Peer-to-Peer for 1:1 calls",
"Send analytics data": "Send analytics data",
"Never send encrypted messages to unverified devices from this device": "Never send encrypted messages to unverified devices from this device",
"Never send encrypted messages to unverified devices in this room from this device": "Never send encrypted messages to unverified devices in this room from this device",
@ -522,13 +522,11 @@
"Phone numbers": "Phone numbers",
"Language and region": "Language and region",
"Theme": "Theme",
"Light theme": "Light theme",
"Default theme": "Default theme",
"Dark theme": "Dark theme",
"2018 theme": "2018 theme",
"Status.im theme": "Status.im theme",
"Account management": "Account management",
"Deactivating your account is a permanent action - be careful!": "Deactivating your account is a permanent action - be careful!",
"Close Account": "Close Account",
"Deactivate Account": "Deactivate Account",
"Legal": "Legal",
"For help with using Riot, click <a>here</a>.": "For help with using Riot, click <a>here</a>.",
"For help with using Riot, click <a>here</a> or start a chat with our bot using the button below.": "For help with using Riot, click <a>here</a> or start a chat with our bot using the button below.",
@ -1053,7 +1051,6 @@
"Continue With Encryption Disabled": "Continue With Encryption Disabled",
"Unknown error": "Unknown error",
"Incorrect password": "Incorrect password",
"Deactivate Account": "Deactivate Account",
"This will make your account permanently unusable. You will not be able to log in, and no one will be able to re-register the same user ID. This will cause your account to leave all rooms it is participating in, and it will remove your account details from your identity server. <b>This action is irreversible.</b>": "This will make your account permanently unusable. You will not be able to log in, and no one will be able to re-register the same user ID. This will cause your account to leave all rooms it is participating in, and it will remove your account details from your identity server. <b>This action is irreversible.</b>",
"Deactivating your account <b>does not by default cause us to forget messages you have sent.</b> If you would like us to forget your messages, please tick the box below.": "Deactivating your account <b>does not by default cause us to forget messages you have sent.</b> If you would like us to forget your messages, please tick the box below.",
"Message visibility in Matrix is similar to email. Our forgetting your messages means that messages you have sent will not be shared with any new or unregistered users, but registered users who already have access to these messages will still have access to their copy.": "Message visibility in Matrix is similar to email. Our forgetting your messages means that messages you have sent will not be shared with any new or unregistered users, but registered users who already have access to these messages will still have access to their copy.",
@ -1205,6 +1202,7 @@
"Quote": "Quote",
"Source URL": "Source URL",
"Collapse Reply Thread": "Collapse Reply Thread",
"End-to-end encryption information": "End-to-end encryption information",
"Failed to set Direct Message status of room": "Failed to set Direct Message status of room",
"unknown error code": "unknown error code",
"Failed to forget room %(errCode)s": "Failed to forget room %(errCode)s",
@ -1222,6 +1220,8 @@
"Set a new status...": "Set a new status...",
"View Community": "View Community",
"Hide": "Hide",
"Sign in": "Sign in",
"Welcome": "Welcome",
"Login": "Login",
"powered by Matrix": "powered by Matrix",
"Robot check is currently unavailable on desktop - please use a <a>web browser</a>": "Robot check is currently unavailable on desktop - please use a <a>web browser</a>",
@ -1252,7 +1252,6 @@
"Username": "Username",
"Mobile phone number": "Mobile phone number",
"Not sure of your password? <a>Set a new one</a>": "Not sure of your password? <a>Set a new one</a>",
"Sign in": "Sign in",
"Sign in to %(serverName)s": "Sign in to %(serverName)s",
"Change": "Change",
"Sign in with": "Sign in with",
@ -1475,7 +1474,6 @@
"unencrypted": "unencrypted",
"Decryption error": "Decryption error",
"Session ID": "Session ID",
"End-to-end encryption information": "End-to-end encryption information",
"Event information": "Event information",
"Sender device information": "Sender device information",
"Passphrases must match": "Passphrases must match",
@ -1536,7 +1534,6 @@
"If you didn't set the new recovery method, an attacker may be trying to access your account. Change your account password and set a new recovery method immediately in Settings.": "If you didn't set the new recovery method, an attacker may be trying to access your account. Change your account password and set a new recovery method immediately in Settings.",
"This device is encrypting history using the new recovery method.": "This device is encrypting history using the new recovery method.",
"Go to Settings": "Go to Settings",
"Setting up Secure Messages on this device will re-encrypt this device's message history with the new recovery method.": "Setting up Secure Messages on this device will re-encrypt this device's message history with the new recovery method.",
"Set up Secure Messages": "Set up Secure Messages",
"Recovery Method Removed": "Recovery Method Removed",
"This device has detected that your recovery passphrase and key for Secure Messages have been removed.": "This device has detected that your recovery passphrase and key for Secure Messages have been removed.",

2
src/i18n/strings/eu.json
View file

@ -1586,7 +1586,7 @@
"2018 theme": "2018ko itxura",
"Account management": "Kontuen kudeaketa",
"Deactivating your account is a permanent action - be careful!": "Kontua desgaitzea behin betiko ekintza bat da, kontuz ibili!",
"Close Account": "Itxi kontua",
"Deactivate Account": "Itxi kontua",
"For help with using Riot, click <a>here</a>.": "Riot erabiltzeko laguntza behar baduzu, egin klik <a>hemen</a>.",
"For help with using Riot, click <a>here</a> or start a chat with our bot using the button below.": "Riot erabiltzeko laguntza behar baduzu, egin klik <a>hemen</a> edo hasi txat bat gure botarekin beheko botoia sakatuz.",
"Chat with Riot Bot": "Txateatu Riot botarekin",

2
src/i18n/strings/fr.json
View file

@ -1526,7 +1526,7 @@
"2018 theme": "Thème 2018",
"Account management": "Gestion du compte",
"Deactivating your account is a permanent action - be careful!": "La désactivation du compte est une action permanente. Soyez prudent !",
"Close Account": "Fermer le compte",
"Deactivate Account": "Fermer le compte",
"For help with using Riot, click <a>here</a>.": "Pour obtenir de l'aide sur l'utilisation de Riot, cliquez <a>ici</a>.",
"For help with using Riot, click <a>here</a> or start a chat with our bot using the button below.": "Pour obtenir de l'aide sur l'utilisation de Riot, cliquez <a>ici</a> ou commencez une discussion avec notre bot en utilisant le bouton ci-dessous.",
"Start a chat with Riot Bot": "Commencer une discussion avec le bot Riot",

2
src/i18n/strings/hu.json
View file

@ -1525,7 +1525,7 @@
"2018 theme": "2018-as téma",
"Account management": "Fiók menedzsment",
"Deactivating your account is a permanent action - be careful!": "A fiók felfüggesztése végleges - légy óvatos!",
"Close Account": "Fiók bezárása",
"Deactivate Account": "Fiók bezárása",
"For help with using Riot, click <a>here</a>.": "A Riot használatában való segítséghez kattints <a>ide</a>.",
"For help with using Riot, click <a>here</a> or start a chat with our bot using the button below.": "A Riot használatában való segítségér kattints <a>ide</a> vagy kezdj beszélgetni a botunkkal az alábbi gombra kattintva.",
"Start a chat with Riot Bot": "Csevegés kezdése a Riot Bottal",

14
src/i18n/strings/ja.json
View file

@ -300,10 +300,10 @@
"Add rooms to the community": "コミュニティに部屋を追加します",
"Room name or alias": "部屋名またはエイリアス",
"Add to community": "コミュニティに追加",
"Failed to invite the following users to %(groupId)s:": "次のユーザーを ％(groupId)s に招待できませんでした:",
"Failed to invite the following users to %(groupId)s:": "次のユーザーを %(groupId)s に招待できませんでした:",
"Failed to invite users to community": "ユーザーをコミュニティに招待できませんでした",
"Failed to invite users to %(groupId)s": "ユーザーを %(groupId)s に招待できませんでした",
"Failed to add the following rooms to %(groupId)s:": "次の部屋を ％(groupId)s に追加できませんでした:",
"Failed to add the following rooms to %(groupId)s:": "次の部屋を %(groupId)s に追加できませんでした:",
"Riot does not have permission to send you notifications - please check your browser settings": "Riotに通知を送信する権限がありません - ブラウザの設定を確認してください",
"Riot was not given permission to send notifications - please try again": "Riotに通知を送信する権限がありませんでした。もう一度お試しください",
"Unable to enable Notifications": "通知を有効にできません",
@ -323,7 +323,7 @@
"Send Invites": "招待状を送る",
"Failed to invite user": "ユーザーを招待できませんでした",
"Failed to invite": "招待できませんでした",
"Failed to invite the following users to the %(roomName)s room:": "次のユーザーを ％(roomName)s の部屋に招待できませんでした:",
"Failed to invite the following users to the %(roomName)s room:": "次のユーザーを %(roomName)s の部屋に招待できませんでした:",
"You need to be logged in.": "ログインする必要があります。",
"You need to be able to invite users to do that.": "それをするためにユーザーを招待できる必要があります。",
"Unable to create widget.": "ウィジェットを作成できません。",
@ -363,9 +363,9 @@
"Unknown (user, device) pair:": "不明な(ユーザー、端末) ペア:",
"Device already verified!": "端末はすでに確認済みです！",
"WARNING: Device already verified, but keys do NOT MATCH!": "警告：端末はすでに検証済みですが、キーは一致しません！",
"WARNING: KEY VERIFICATION FAILED! The signing key for %(userId)s and device %(deviceId)s is \"%(fprint)s\" which does not match the provided key \"%(fingerprint)s\". This could mean your communications are being intercepted!": "警告: キー確認が失敗しました! %(userId)s と端末 ％(deviceId)s の署名鍵は、提供された鍵 \"％(fingerprint)s\" と一致しない \"%(fprint)s\" です。 通信が傍受されている可能性があります!",
"WARNING: KEY VERIFICATION FAILED! The signing key for %(userId)s and device %(deviceId)s is \"%(fprint)s\" which does not match the provided key \"%(fingerprint)s\". This could mean your communications are being intercepted!": "警告: キー確認が失敗しました! %(userId)s と端末 %(deviceId)s の署名鍵は、提供された鍵 \"%(fingerprint)s\" と一致しない \"%(fprint)s\" です。 通信が傍受されている可能性があります!",
"Verified key": "確認済みのキー",
"The signing key you provided matches the signing key you received from %(userId)s's device %(deviceId)s. Device marked as verified.": "指定した署名鍵は、％(userId)s の端末％(deviceId)s から受け取った署名鍵と一致します。端末を検証済みとしてマークしました。",
"The signing key you provided matches the signing key you received from %(userId)s's device %(deviceId)s. Device marked as verified.": "指定した署名鍵は、%(userId)s の端末%(deviceId)s から受け取った署名鍵と一致します。端末を検証済みとしてマークしました。",
"Displays action": "アクションを表示",
"Forces the current outbound group session in an encrypted room to be discarded": "暗号化されたルーム内の現在のアウトバウンドグループセッションを強制的に破棄します",
"Unrecognised command:": "認識できないコマンド:",
@ -609,7 +609,7 @@
"Replying": "返信中",
"Failed to set avatar.": "アバターを設定できませんでした。",
"Save": "保存",
"(~%(count)s results)|other": "(~％(count)s 結果)",
"(~%(count)s results)|other": "(~%(count)s 結果)",
"(~%(count)s results)|one": "(~%(count)s 結果)",
"Join Room": "部屋に入る",
"Remove avatar": "アバターを削除",
@ -641,7 +641,7 @@
"Rejoin": "再参加",
"You have been kicked from %(roomName)s by %(userName)s.": "あなたは %(userName)s により %(roomName)s から追放されました。",
"You have been kicked from this room by %(userName)s.": "あなたは %(userName)s によりこの部屋から追放されました。",
"You have been banned from %(roomName)s by %(userName)s.": "あなたは ％(userName)s により %(roomName)s からブロックされました。",
"You have been banned from %(roomName)s by %(userName)s.": "あなたは %(userName)s により %(roomName)s からブロックされました。",
"You have been banned from this room by %(userName)s.": "あなたは %(userName)s によってこの部屋からブロックされました。",
"This room": "この部屋",
"%(roomName)s does not exist.": "%(roomName)s は存在しません。",

2
src/i18n/strings/ru.json
View file

@ -1393,7 +1393,7 @@
"Developer options": "Параметры разработчика",
"General": "Основной",
"Set a new account password...": "Установить новый пароль учетной записи...",
"Close Account": "Закрыть аккаунт",
"Deactivate Account": "Закрыть аккаунт",
"Legal": "Правовой",
"At this time it is not possible to reply with an emote.": "В настоящее время невозможно ответить с помощью эмоции.",
"Room avatar": "Аватар комнаты",

2
src/i18n/strings/sq.json
View file

@ -1490,7 +1490,7 @@
"2018 theme": "Temë e 2018-s",
"Account management": "Administrim llogarish",
"Deactivating your account is a permanent action - be careful!": "Çaktivizimi i llogarisë tuaj është një veprim i pakthyeshëm - hapni sytë!",
"Close Account": "Mbylleni Llogarinë",
"Deactivate Account": "Mbylleni Llogarinë",
"For help with using Riot, click <a>here</a>.": "Për ndihmë rreth përdorimit të Riot-it, klikoni <a>këtu</a>.",
"For help with using Riot, click <a>here</a> or start a chat with our bot using the button below.": "Për ndihmë rreth përdorimit të Riot-it, klikoni <a>këtu</a>, ose nisni një fjalosje me robotin tonë duke përdorur butonin më poshtë.",
"Help & About": "Ndihmë & Rreth",

2
src/i18n/strings/zh_Hant.json
View file

@ -1524,7 +1524,7 @@
"Account management": "帳號管理",
"2018 theme": "2018 主題",
"Deactivating your account is a permanent action - be careful!": "停用您的帳號是永久動作，請小心！",
"Close Account": "關閉帳號",
"Deactivate Account": "關閉帳號",
"For help with using Riot, click <a>here</a>.": "對於使用 Riot 的說明，點選<a>這裡</a>。",
"For help with using Riot, click <a>here</a> or start a chat with our bot using the button below.": "對於使用 Riot 的說明，點選<a>這裡</a>或是使用下面的按鈕開始與我們的機器人聊天。",
"Chat with Riot Bot": "與 Riot 機器人聊天",

10
src/settings/Settings.js
View file

@ -22,6 +22,7 @@ import {
NotificationsEnabledController,
} from "./controllers/NotificationControllers";
import CustomStatusController from "./controllers/CustomStatusController";
import ThemeController from './controllers/ThemeController';
// These are just a bunch of helper arrays to avoid copy/pasting a bunch of times
const LEVELS_ROOM_SETTINGS = ['device', 'room-device', 'room-account', 'account', 'config'];
@ -231,12 +232,13 @@ export const SETTINGS = {
invertedSettingName: 'TagPanel.disableTagPanel',
},
"theme": {
supportedLevels: ['config'],
default: "dharma",
supportedLevels: LEVELS_ACCOUNT_SETTINGS,
default: "light",
controller: new ThemeController(),
},
"webRtcForcePeerToPeer": {
"webRtcAllowPeerToPeer": {
supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG,
displayName: _td('Disable Peer-to-Peer for 1:1 calls'),
displayName: _td('Allow Peer-to-Peer for 1:1 calls'),
default: true,
invertedSettingName: 'webRtcForceTURN',
},

33
src/settings/controllers/ThemeController.js Normal file
View file

@ -0,0 +1,33 @@
/*
Copyright 2019 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.
*/
import SettingController from "./SettingController";
const SUPPORTED_THEMES = [
"light",
"dark",
];
export default class ThemeController extends SettingController {
getValueOverride(level, roomId, calculatedValue, calculatedAtLevel) {
// Override in case some no longer supported theme is stored here
if (!SUPPORTED_THEMES.includes(calculatedValue)) {
return "light";
}
return null; // no override
}
}

3
src/settings/handlers/ConfigSettingsHandler.js
View file

@ -1,5 +1,6 @@
/*
Copyright 2017 Travis Ralston
Copyright 2019 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.
@ -27,7 +28,7 @@ export default class ConfigSettingsHandler extends SettingsHandler {
// Special case themes
if (settingName === "theme") {
return "dharma"; // config["default_theme"];
return config["default_theme"];
}
const settingsConfig = config["settingDefaults"];