diff --git a/res/css/_components.scss b/res/css/_components.scss index 2734939ae3..8d541730ce 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -1,6 +1,5 @@ // autogenerated by rethemendex.sh @import "./_common.scss"; -@import "./_fonts.scss"; @import "./structures/_CompatibilityPage.scss"; @import "./structures/_ContextualMenu.scss"; @import "./structures/_CreateRoom.scss"; @@ -19,6 +18,7 @@ @import "./structures/_RoomView.scss"; @import "./structures/_SearchBox.scss"; @import "./structures/_TagPanel.scss"; +@import "./structures/_TopLeftMenu.scss"; @import "./structures/_UploadBar.scss"; @import "./structures/_UserSettings.scss"; @import "./structures/_ViewSource.scss"; diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss index 96ed5878ac..291aa3689d 100644 --- a/res/css/structures/_LeftPanel.scss +++ b/res/css/structures/_LeftPanel.scss @@ -19,27 +19,29 @@ limitations under the License. display: flex; flex-direction: column; + + border-right: 1px solid $panel-divider-color; } .mx_LeftPanel_container { display: flex; - /* LeftPanel 235px */ - flex: 0 0 235px; + /* LeftPanel 260px */ + flex: 0 0 260px; } .mx_LeftPanel_container.mx_LeftPanel_container_hasTagPanel { - /* TagPanel 60px + LeftPanel 235px */ - flex: 0 0 295px; + /* TagPanel 70px + LeftPanel 260px */ + flex: 0 0 330px; } .mx_LeftPanel_container_collapsed { - /* Collapsed LeftPanel 60px */ - flex: 0 0 60px; + /* Collapsed LeftPanel 70px */ + flex: 0 0 70px; } .mx_LeftPanel_container_collapsed.mx_LeftPanel_container_hasTagPanel { - /* TagPanel 60px + Collapsed LeftPanel 60px */ - flex: 0 0 120px; + /* TagPanel 70px + Collapsed LeftPanel 70px */ + flex: 0 0 140px; } .mx_LeftPanel_hideButton { diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss index 156b1709fe..207b04b8f5 100644 --- a/res/css/structures/_MatrixChat.scss +++ b/res/css/structures/_MatrixChat.scss @@ -58,10 +58,8 @@ limitations under the License. .mx_MatrixChat .mx_LeftPanel { order: 1; - background-color: $secondary-accent-color; - - flex: 0 0 235px; + flex: 0 0 260px; } .mx_MatrixChat .mx_LeftPanel.collapsed { @@ -71,8 +69,6 @@ limitations under the License. .mx_MatrixChat .mx_MatrixChat_middlePanel { order: 2; - padding-left: 20px; - padding-right: 22px; background-color: $primary-bg-color; flex: 1; diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss index b8e1190375..4223f61a4c 100644 --- a/res/css/structures/_RoomView.scss +++ b/res/css/structures/_RoomView.scss @@ -27,12 +27,11 @@ limitations under the License. .mx_RoomView .mx_RoomHeader { order: 1; - flex: 0 0 70px; + flex: 0 0 52px; } .mx_RoomView_fileDropTarget { min-width: 0px; - max-width: 960px; width: 100%; font-size: 18px; text-align: center; @@ -50,7 +49,7 @@ limitations under the License. border: 2px #e1dddd solid; border-bottom: none; position: absolute; - top: 70px; + top: 52px; bottom: 0px; z-index: 3000; } @@ -66,7 +65,6 @@ limitations under the License. order: 2; min-width: 0px; - max-width: 960px; width: 100%; margin: 0px auto; @@ -115,7 +113,6 @@ limitations under the License. } .mx_RoomView_messageListWrapper { - max-width: 960px; margin: auto; min-height: 100%; @@ -187,7 +184,6 @@ hr.mx_RoomView_myReadMarker { } .mx_RoomView_statusAreaBox { - max-width: 960px; margin: auto; min-height: 50px; } diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss index ab1d4feac3..1bc14bdccc 100644 --- a/res/css/structures/_TagPanel.scss +++ b/res/css/structures/_TagPanel.scss @@ -15,8 +15,8 @@ limitations under the License. */ .mx_TagPanel { - flex: 0 0 60px; - background-color: $tertiary-accent-color; + flex: 0 0 70px; + background-color: $tagpanel-bg-color; cursor: pointer; display: flex; @@ -35,6 +35,8 @@ limitations under the License. display: flex; justify-content: center; align-items: flex-start; + + display: none; } .mx_TagPanel .mx_TagPanel_clearButton object { @@ -47,6 +49,7 @@ limitations under the License. height: 0px; width: 42px; border-bottom: 1px solid $panel-divider-color; + display: none; } .mx_TagPanel .mx_TagPanel_scroller { @@ -57,19 +60,21 @@ limitations under the License. display: flex; flex-direction: column; align-items: center; + margin-top: 5px; height: 100%; } .mx_TagPanel .mx_TagTile { - padding: 6px 3px; - opacity: 0.5; + padding-top: 9px; + padding-bottom: 9px; +// opacity: 0.5; position: relative; } .mx_TagPanel .mx_TagTile:focus, .mx_TagPanel .mx_TagTile:hover, .mx_TagPanel .mx_TagTile.mx_TagTile_selected { - opacity: 1; +// opacity: 1; } .mx_TagPanel .mx_TagTile.mx_TagTile_selected { @@ -80,12 +85,12 @@ limitations under the License. .mx_TagPanel .mx_TagTile.mx_TagTile_selected .mx_TagTile_avatar .mx_BaseAvatar { border: 3px solid $accent-color; background-color: $accent-color; - border-radius: 60px; + border-radius: 40px; /* In case this is a "initial" avatar */ display: block; - height: 35px; - width: 35px; + height: 40px; + width: 40px; } .mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus { @@ -119,6 +124,7 @@ limitations under the License. margin-bottom: 17px; margin-top: 18px; height: 25px; + display: none; } .mx_TagPanel_groupsButton object { diff --git a/res/css/structures/_TopLeftMenu.scss b/res/css/structures/_TopLeftMenu.scss new file mode 100644 index 0000000000..e53f00c96e --- /dev/null +++ b/res/css/structures/_TopLeftMenu.scss @@ -0,0 +1,41 @@ +/* +Copyright 2018 New Vector Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_TopLeftMenu { + height: 52px; + border-bottom: 1px solid $panel-divider-color; + color: $topleftmenu-color; + background-color: $primary-bg-color; + display: flex; +} + +.mx_TopLeftMenu_avatar { + position: relative; // to get avatar in the right place + margin-left: 15px; + margin-right: 15px; + margin-top: 14px; +} + +.mx_TopLeftMenu_name { + margin-top: 15px; + margin-right: 9px; + font-size: 18px; + font-weight: 600; +} + +.mx_TopLeftMenu_chevron { + margin-top: 26px; +} diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss index 0a708a8edc..81f953a23f 100644 --- a/res/css/views/rooms/_MessageComposer.scss +++ b/res/css/views/rooms/_MessageComposer.scss @@ -15,7 +15,6 @@ limitations under the License. */ .mx_MessageComposer_wrapper { - max-width: 960px; vertical-align: middle; margin: auto; border-top: 1px solid $primary-hairline-color; @@ -196,7 +195,6 @@ limitations under the License. .mx_MessageComposer_formatbar { margin: auto; - max-width: 960px; display: flex; height: 30px; diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss index 9c1349adbc..126108d992 100644 --- a/res/css/views/rooms/_RoomHeader.scss +++ b/res/css/views/rooms/_RoomHeader.scss @@ -20,15 +20,15 @@ limitations under the License. } .mx_RoomHeader_wrapper { - max-width: 960px; margin: auto; - height: 70px; + height: 52px; align-items: center; display: flex; } .mx_RoomHeader_leftRow { - margin-left: -2px; + display: flex; + margin-left: 15px; order: 1; flex: 1; overflow: hidden; @@ -72,15 +72,15 @@ limitations under the License. } .mx_RoomHeader_info { - display: table-cell; - width: 100%; - vertical-align: middle; + display: flex; + flex: 1; + align-items: center; } .mx_RoomHeader_simpleHeader { - line-height: 70px; - color: $primary-fg-color; - font-size: 22px; + line-height: 52px; + color: $roomheader-color; + font-size: 18px; font-weight: bold; overflow: hidden; margin-left: 63px; @@ -99,15 +99,12 @@ limitations under the License. } .mx_RoomHeader_name { - vertical-align: middle; - width: 100%; - height: 31px; overflow: hidden; - color: $primary-fg-color; + color: $roomheader-color; font-weight: bold; - font-size: 22px; - padding-left: 19px; - padding-right: 16px; + font-size: 18px; + padding-left: 15px; + padding-right: 15px; /* why isn't text-overflow working? */ text-overflow: ellipsis; border-bottom: 1px solid transparent; @@ -166,25 +163,20 @@ limitations under the License. } .mx_RoomHeader_topic { - vertical-align: bottom; - float: left; max-height: 38px; - color: $settings-grey-fg-color; - font-weight: 300; + color: $roomtopic-color; + font-weight: 400; font-size: 13px; - margin-left: 19px; - margin-right: 16px; + margin-right: 13px; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid transparent; - column-width: 960px; } .mx_RoomHeader_avatar { - display: table-cell; - width: 48px; - height: 50px; - vertical-align: middle; + flex: 0; + width: 28px; + height: 28px; } .mx_RoomHeader_avatar .mx_BaseAvatar_image { diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index ccd3afe26c..58cd06c225 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -17,9 +17,10 @@ limitations under the License. .mx_RoomTile { position: relative; cursor: pointer; - font-size: 13px; + font-size: 14px; display: block; - height: 34px; + height: 40px; + margin: 0px 9px 0px 9px; background-color: $secondary-accent-color; } @@ -44,12 +45,12 @@ limitations under the License. .mx_RoomTile_avatar { display: inline-block; - padding-top: 5px; - padding-bottom: 5px; - padding-left: 16px; - padding-right: 6px; - width: 24px; - height: 24px; + padding-top: 4px; + padding-bottom: 4px; + padding-left: 14px; + padding-right: 12px; + width: 32px; + height: 32px; vertical-align: middle; } @@ -154,9 +155,14 @@ limitations under the License. } .mx_RoomTile_selected { + border-radius: 4px; background-color: $roomtile-selected-bg-color; } +.mx_RoomTile_selected .mx_RoomTile_name { + color: $roomtile-selected-color; +} + .mx_DNDRoomTile { transform: none; transition: transform 0.2s; diff --git a/res/fonts/Nunito/XRXQ3I6Li01BKofIMN44Y9vKUTo.ttf b/res/fonts/Nunito/XRXQ3I6Li01BKofIMN44Y9vKUTo.ttf new file mode 100644 index 0000000000..4387fb67c4 Binary files /dev/null and b/res/fonts/Nunito/XRXQ3I6Li01BKofIMN44Y9vKUTo.ttf differ diff --git a/res/fonts/Nunito/XRXQ3I6Li01BKofIMN5cYtvKUTo.ttf b/res/fonts/Nunito/XRXQ3I6Li01BKofIMN5cYtvKUTo.ttf new file mode 100644 index 0000000000..68fb3ff5cb Binary files /dev/null and b/res/fonts/Nunito/XRXQ3I6Li01BKofIMN5cYtvKUTo.ttf differ diff --git a/res/fonts/Nunito/XRXV3I6Li01BKofINeaE.ttf b/res/fonts/Nunito/XRXV3I6Li01BKofINeaE.ttf new file mode 100644 index 0000000000..c40e599260 Binary files /dev/null and b/res/fonts/Nunito/XRXV3I6Li01BKofINeaE.ttf differ diff --git a/res/fonts/Nunito/XRXW3I6Li01BKofA6sKUYevN.ttf b/res/fonts/Nunito/XRXW3I6Li01BKofA6sKUYevN.ttf new file mode 100644 index 0000000000..0c4fd17dfa Binary files /dev/null and b/res/fonts/Nunito/XRXW3I6Li01BKofA6sKUYevN.ttf differ diff --git a/res/fonts/Nunito/XRXW3I6Li01BKofAjsOUYevN.ttf b/res/fonts/Nunito/XRXW3I6Li01BKofAjsOUYevN.ttf new file mode 100644 index 0000000000..339d59ac00 Binary files /dev/null and b/res/fonts/Nunito/XRXW3I6Li01BKofAjsOUYevN.ttf differ diff --git a/res/fonts/Nunito/XRXX3I6Li01BKofIMNaDRss.ttf b/res/fonts/Nunito/XRXX3I6Li01BKofIMNaDRss.ttf new file mode 100644 index 0000000000..b5fcd891af Binary files /dev/null and b/res/fonts/Nunito/XRXX3I6Li01BKofIMNaDRss.ttf differ diff --git a/res/img/topleft-chevron.svg b/res/img/topleft-chevron.svg new file mode 100644 index 0000000000..9fbf5fe9ca --- /dev/null +++ b/res/img/topleft-chevron.svg @@ -0,0 +1,17 @@ + + + + dropdown + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss new file mode 100644 index 0000000000..9286331f2d --- /dev/null +++ b/res/themes/dharma/css/_dharma.scss @@ -0,0 +1,188 @@ +@import "_fonts.scss"; + +// XXX: check this? +/* Nunito 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: 'Nunito', 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; + +$selection-fg-color: $primary-bg-color; + +$focus-brightness: 125%; + +// red warning colour +$warning-color: #ff0064; +$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: #f2f5f8; +$tertiary-accent-color: #d3efe1; + +$tagpanel-bg-color: #2e3649; + +// 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; + +// apart from login forms, which have stronger border +$strong-input-border-color: #c7c7c7; + +// used for UserSettings EditableText +$input-underline-color: rgba(151, 151, 151, 0.5); +$input-fg-color: rgba(74, 74, 74, 0.9); + +// context menus +$menu-border-color: rgba(187, 187, 187, 0.5); +$menu-bg-color: #f6f6f6; + +$avatar-initial-color: #ffffff; +$avatar-bg-color: #ffffff; + +$h3-color: #3d3b39; + +$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; + +$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; + +$topleftmenu-color: #212121; +$roomheader-color: #45474a; +$roomtopic-color: #9fa9ba; + +// ******************** + +$roomtile-name-color: #929eb4; +$roomtile-selected-color: #212121; +$roomtile-notified-color: #212121; +$roomtile-selected-bg-color: #fff; +$roomtile-focused-bg-color: #fff; + +$roomtile-transparent-focused-color: rgba(0, 0, 0, 0.1); + +$roomsublist-background: $secondary-accent-color; +$roomsublist-label-fg-color: $roomtile-name-color; +$roomsublist-label-bg-color: $tertiary-accent-color; +$roomsublist-chevron-color: $accent-color; + +$panel-divider-color: #ebedf8; + +// ******************** + +$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: "../../img/icon_context_message.svg"; +$copy-button-url: "../../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; + +// unused? +$progressbar-color: #000; + +// ***** 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_hover { +} + +@define-mixin mx_DialogButton_small { + @mixin mx_DialogButton; + font-size: 15px; + padding: 0px 1.5em 0px 1.5em; +} diff --git a/res/themes/dharma/css/_fonts.scss b/res/themes/dharma/css/_fonts.scss new file mode 100644 index 0000000000..392a10206b --- /dev/null +++ b/res/themes/dharma/css/_fonts.scss @@ -0,0 +1,64 @@ +/* + * Nunito. + * Includes extended Latin and Vietnamese character sets + * Current URLs are v9, derived from the contents of + * https://fonts.googleapis.com/css?family=Nunito:400,400i,600,600i,700,700i&subset=latin-ext,vietnamese + */ + +/* the 'src' links are relative to the bundle.css, which is in a subdirectory. + */ +@font-face { + font-family: 'Nunito'; + font-style: italic; + font-weight: 400; + src: local('Nunito Italic'), local('Nunito-Italic'), url('../../fonts/Nunito/XRXX3I6Li01BKofIMNaDRss.ttf') format('truetype'); +} +@font-face { + font-family: 'Nunito'; + font-style: italic; + font-weight: 600; + src: local('Nunito SemiBold Italic'), local('Nunito-SemiBoldItalic'), url('../../fonts/Nunito/XRXQ3I6Li01BKofIMN5cYtvKUTo.ttf') format('truetype'); +} +@font-face { + font-family: 'Nunito'; + font-style: italic; + font-weight: 700; + src: local('Nunito Bold Italic'), local('Nunito-BoldItalic'), url('../../fonts/Nunito/XRXQ3I6Li01BKofIMN44Y9vKUTo.ttf') format('truetype'); +} +@font-face { + font-family: 'Nunito'; + font-style: normal; + font-weight: 400; + src: local('Nunito Regular'), local('Nunito-Regular'), url('../../fonts/Nunito/XRXV3I6Li01BKofINeaE.ttf') format('truetype'); +} +@font-face { + font-family: 'Nunito'; + font-style: normal; + font-weight: 600; + src: local('Nunito SemiBold'), local('Nunito-SemiBold'), url('../../fonts/Nunito/XRXW3I6Li01BKofA6sKUYevN.ttf') format('truetype'); +} +@font-face { + font-family: 'Nunito'; + font-style: normal; + font-weight: 700; + src: local('Nunito Bold'), local('Nunito-Bold'), url('../../fonts/Nunito/XRXW3I6Li01BKofAjsOUYevN.ttf') format('truetype'); +} + +/* + * Fira Mono + * Used for monospace copy, i.e. code + */ + +@font-face { + font-family: 'Fira Mono'; + src: url('../../fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype'); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: 'Fira Mono'; + src: url('../../fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype'); + font-weight: 700; + font-style: normal; +} diff --git a/res/themes/dharma/css/dharma.scss b/res/themes/dharma/css/dharma.scss new file mode 100644 index 0000000000..0f4db55fd2 --- /dev/null +++ b/res/themes/dharma/css/dharma.scss @@ -0,0 +1,3 @@ +@import "_dharma.scss"; +@import "../../../../res/css/_components.scss"; + diff --git a/res/themes/light/css/_base.scss b/res/themes/light/css/_base.scss index 5d5f5d7c90..7d7dd8ce2e 100644 --- a/res/themes/light/css/_base.scss +++ b/res/themes/light/css/_base.scss @@ -1,3 +1,5 @@ +@import "_fonts.scss"; + /* 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 @@ -42,6 +44,8 @@ $preview-bar-bg-color: #f7f7f7; $secondary-accent-color: #eaf5f0; $tertiary-accent-color: #d3efe1; +$tagpanel-bg-color: $tertiary-accent-color; + // used by RoomDirectory permissions $plinth-bg-color: $secondary-accent-color; @@ -98,9 +102,15 @@ $rte-bg-color: #e9e9e9; $rte-code-bg-color: rgba(0, 0, 0, 0.04); $rte-room-pill-color: #aaa; +$topleftmenu-color: $primary-fg-color; +$roomheader-color: $primary-fg-color; +$roomtopic-color: $settings-grey-fg-color; + // ******************** $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); diff --git a/res/css/_fonts.scss b/res/themes/light/css/_fonts.scss similarity index 100% rename from res/css/_fonts.scss rename to res/themes/light/css/_fonts.scss diff --git a/src/Tinter.js b/src/Tinter.js index d24a4c3e74..cd87d31ca8 100644 --- a/src/Tinter.js +++ b/src/Tinter.js @@ -154,6 +154,8 @@ class Tinter { } tint(primaryColor, secondaryColor, tertiaryColor) { + return; + this.currentTint[0] = primaryColor; this.currentTint[1] = secondaryColor; this.currentTint[2] = tertiaryColor; diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js index 5acceb1009..457ed6f068 100644 --- a/src/components/structures/LeftPanel.js +++ b/src/components/structures/LeftPanel.js @@ -174,10 +174,12 @@ var LeftPanel = React.createClass({ render: function() { const RoomList = sdk.getComponent('rooms.RoomList'); const TagPanel = sdk.getComponent('structures.TagPanel'); + const TopLeftMenu = sdk.getComponent('structures.TopLeftMenu'); const BottomLeftMenu = sdk.getComponent('structures.BottomLeftMenu'); const CallPreview = sdk.getComponent('voip.CallPreview'); - let topBox; + let topBox = ; +/* if (this.context.matrixClient.isGuest()) { const LoginBox = sdk.getComponent('structures.LoginBox'); topBox = ; @@ -185,7 +187,7 @@ var LeftPanel = React.createClass({ const SearchBox = sdk.getComponent('structures.SearchBox'); topBox = ; } - +*/ const classes = classNames( "mx_LeftPanel", { @@ -216,10 +218,10 @@ var LeftPanel = React.createClass({ collapsed={this.props.collapsed} searchFilter={this.state.searchFilter} ConferenceHandler={VectorConferenceHandler} /> - ); + // } }); diff --git a/src/components/structures/TopLeftMenu.js b/src/components/structures/TopLeftMenu.js new file mode 100644 index 0000000000..586a88666e --- /dev/null +++ b/src/components/structures/TopLeftMenu.js @@ -0,0 +1,52 @@ +/* +Copyright 2018 New Vector Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from 'react'; +import PropTypes from 'prop-types'; +import sdk from '../../index'; +import dis from '../../dispatcher'; + +class TopLeftMenu extends React.Component { + + static propTypes = { + collapsed: PropTypes.bool.isRequired, + }; + + static displayName = 'TopLeftMenu'; + + render() { + const BaseAvatar = sdk.getComponent('avatars.BaseAvatar'); + const avatarHeight = 28; + const name = "My stuff" + + return ( +
+ +
+ { name } +
+ +
+ ); + } +} + +module.exports = TopLeftMenu; \ No newline at end of file diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js index c8ce79905d..be286998f1 100644 --- a/src/components/structures/UserSettings.js +++ b/src/components/structures/UserSettings.js @@ -123,6 +123,7 @@ const CRYPTO_SETTINGS = [ const THEMES = [ { label: _td('Light theme'), value: 'light' }, { label: _td('Dark theme'), value: 'dark' }, + { label: _td('2018 theme'), value: 'dharma' }, { label: _td('Status.im theme'), value: 'status' }, ]; diff --git a/src/components/views/elements/TagTile.js b/src/components/views/elements/TagTile.js index fb3ddee093..d6185547f6 100644 --- a/src/components/views/elements/TagTile.js +++ b/src/components/views/elements/TagTile.js @@ -146,7 +146,7 @@ export default React.createClass({ const RoomTooltip = sdk.getComponent('rooms.RoomTooltip'); const profile = this.state.profile || {}; const name = profile.name || this.props.tag; - const avatarHeight = 35; + const avatarHeight = 40; const httpUrl = profile.avatarUrl ? this.context.matrixClient.mxcUrlToHttp( profile.avatarUrl, avatarHeight, avatarHeight, "crop", diff --git a/src/components/views/rooms/AppsDrawer.js b/src/components/views/rooms/AppsDrawer.js index 8763ea3d7f..b94f0fb3e9 100644 --- a/src/components/views/rooms/AppsDrawer.js +++ b/src/components/views/rooms/AppsDrawer.js @@ -248,6 +248,10 @@ module.exports = React.createClass({ />); }); + if (apps.length == 0) { + return
; + } + let addWidget; if (this.props.showApps && this._canUserModify() diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js index 1851e03383..312e9e01db 100644 --- a/src/components/views/rooms/RoomHeader.js +++ b/src/components/views/rooms/RoomHeader.js @@ -302,11 +302,12 @@ module.exports = React.createClass({ } let roomAvatar = null; + const avatarSize = 28; if (canSetRoomAvatar) { roomAvatar = (
- +