experiments in dharma

2018-05-25 03:17:29 +01:00
parent 693ccf69c7
commit 3bf28a08ec
30 changed files with 454 additions and 72 deletions
--- 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";
--- a/res/css/_fonts.scss
+++ b/res/css/_fonts.scss
@@ -1,67 +0,0 @@
-/*
- * Open Sans
- * Includes extended Latin, Greek, Cyrillic and Vietnamese character sets
- */
-
-/* the 'src' links are relative to the bundle.css, which is in a subdirectory.
- */
-@font-face {
-    font-family: 'Open Sans';
-    src: url('../../fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
-    font-weight: 400;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Open Sans';
-    src: url('../../fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
-    font-weight: 400;
-    font-style: italic;
-}
-
-@font-face {
-    font-family: 'Open Sans';
-    src: url('../../fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype');
-    font-weight: 600;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Open Sans';
-    src: url('../../fonts/Open_Sans/OpenSans-SemiboldItalic.ttf') format('truetype');
-    font-weight: 600;
-    font-style: italic;
-}
-
-@font-face {
-    font-family: 'Open Sans';
-    src: url('../../fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
-    font-weight: 700;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Open Sans';
-    src: url('../../fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
-    font-weight: 700;
-    font-style: italic;
-}
-
-/*
- * 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;
-}
--- 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 {
--- 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;
--- 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;
 }
--- 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 {
--- a/res/css/structures/_TopLeftMenu.scss
+++ 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;
+}
--- 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;
--- 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 {
--- 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;