mirror of https://github.com/vector-im/riot-web
experiments in dharma
Matthew Hodgson
parent
693ccf69c7
commit
3bf28a08ec
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,17 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="10px" height="6px" viewBox="0 0 10 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>dropdown</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
|
||||
<g id="matrix-my-stuff-no-lines-message-context-menu-smaller-icons" transform="translate(-203.000000, -25.000000)" stroke="#212121" stroke-width="1.3">
|
||||
<g id="Group-3" transform="translate(128.000000, 15.000000)">
|
||||
<g id="dropdown" transform="translate(76.000000, 11.000000)">
|
||||
<path d="M0.5,0.5 L4.35868526,3.75422271" id="Line-5"></path>
|
||||
<path d="M8.13193273,0.560421385 L4.35868526,3.75422271" id="Line-5-Copy"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1017 B |
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
@import "_dharma.scss";
|
||||
@import "../../../../res/css/_components.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);
|
||||
|
||||
|
|
|
|||
|
|
@ -154,6 +154,8 @@ class Tinter {
|
|||
}
|
||||
|
||||
tint(primaryColor, secondaryColor, tertiaryColor) {
|
||||
return;
|
||||
|
||||
this.currentTint[0] = primaryColor;
|
||||
this.currentTint[1] = secondaryColor;
|
||||
this.currentTint[2] = tertiaryColor;
|
||||
|
|
|
|||
|
|
@ -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 = <TopLeftMenu collapsed={ this.props.collapsed }/>;
|
||||
/*
|
||||
if (this.context.matrixClient.isGuest()) {
|
||||
const LoginBox = sdk.getComponent('structures.LoginBox');
|
||||
topBox = <LoginBox collapsed={ this.props.collapsed }/>;
|
||||
|
|
@ -185,7 +187,7 @@ var LeftPanel = React.createClass({
|
|||
const SearchBox = sdk.getComponent('structures.SearchBox');
|
||||
topBox = <SearchBox collapsed={ this.props.collapsed } onSearch={ this.onSearch } />;
|
||||
}
|
||||
|
||||
*/
|
||||
const classes = classNames(
|
||||
"mx_LeftPanel",
|
||||
{
|
||||
|
|
@ -216,10 +218,10 @@ var LeftPanel = React.createClass({
|
|||
collapsed={this.props.collapsed}
|
||||
searchFilter={this.state.searchFilter}
|
||||
ConferenceHandler={VectorConferenceHandler} />
|
||||
<BottomLeftMenu collapsed={this.props.collapsed}/>
|
||||
</aside>
|
||||
</div>
|
||||
);
|
||||
// <BottomLeftMenu collapsed={this.props.collapsed}/>
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div className="mx_TopLeftMenu">
|
||||
<BaseAvatar
|
||||
className="mx_TopLeftMenu_avatar"
|
||||
name={name}
|
||||
width={avatarHeight}
|
||||
height={avatarHeight}
|
||||
/>
|
||||
<div className="mx_TopLeftMenu_name">
|
||||
{ name }
|
||||
</div>
|
||||
<img className="mx_TopLeftMenu_chevron" src="img/topleft-chevron.svg" width="11" height="6"/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = TopLeftMenu;
|
||||
|
|
@ -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' },
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -248,6 +248,10 @@ module.exports = React.createClass({
|
|||
/>);
|
||||
});
|
||||
|
||||
if (apps.length == 0) {
|
||||
return <div></div>;
|
||||
}
|
||||
|
||||
let addWidget;
|
||||
if (this.props.showApps &&
|
||||
this._canUserModify()
|
||||
|
|
|
|||
|
|
@ -302,11 +302,12 @@ module.exports = React.createClass({
|
|||
}
|
||||
|
||||
let roomAvatar = null;
|
||||
const avatarSize = 28;
|
||||
if (canSetRoomAvatar) {
|
||||
roomAvatar = (
|
||||
<div className="mx_RoomHeader_avatarPicker">
|
||||
<div onClick={this.onAvatarPickerClick}>
|
||||
<ChangeAvatar ref="changeAvatar" room={this.props.room} showUploadSection={false} width={48} height={48} />
|
||||
<ChangeAvatar ref="changeAvatar" room={this.props.room} showUploadSection={false} width={avatarSize} height={avatarSize} />
|
||||
</div>
|
||||
<div className="mx_RoomHeader_avatarPicker_edit">
|
||||
<label htmlFor="avatarInput" ref="file_label">
|
||||
|
|
@ -327,7 +328,7 @@ module.exports = React.createClass({
|
|||
);
|
||||
} else if (this.props.room || (this.props.oobData && this.props.oobData.name)) {
|
||||
roomAvatar = (
|
||||
<RoomAvatar room={this.props.room} width={48} height={48} oobData={this.props.oobData}
|
||||
<RoomAvatar room={this.props.room} width={avatarSize} height={avatarSize} oobData={this.props.oobData}
|
||||
viewAvatarOnClick={true} />
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -320,7 +320,7 @@ module.exports = React.createClass({
|
|||
return <AccessibleButton className={classes} tabIndex="0" onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
|
||||
<div className={avatarClasses}>
|
||||
<div className="mx_RoomTile_avatar_container">
|
||||
<RoomAvatar room={this.props.room} width={24} height={24} />
|
||||
<RoomAvatar room={this.props.room} width={32} height={32} />
|
||||
{ directMessageIndicator }
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1034,6 +1034,7 @@
|
|||
"Uploading %(filename)s and %(count)s others|one": "Uploading %(filename)s and %(count)s other",
|
||||
"Light theme": "Light theme",
|
||||
"Dark theme": "Dark theme",
|
||||
"2018 theme": "2018 theme",
|
||||
"Status.im theme": "Status.im theme",
|
||||
"Can't load user settings": "Can't load user settings",
|
||||
"Server may be unavailable or overloaded": "Server may be unavailable or overloaded",
|
||||
|
|
|
|||
Loading…
Reference in New Issue