forked from matrix/element-web
WIP
This commit is contained in:
Matthew Hodgson
parent
01b3d6128c
commit
190811ac1c
|
|
@ -0,0 +1,68 @@
|
|||
== Skinning refactor ==
|
||||
|
||||
matrix-react-sdk
|
||||
- base images
|
||||
- base CSS
|
||||
- all the components needed to build a workable app (including the top layer)
|
||||
|
||||
riot-web: the riot skin
|
||||
- riot-specific classes (e.g. login header/footer)
|
||||
- riot-specific themes
|
||||
- light
|
||||
- dark
|
||||
|
||||
i.e. the only things which should go into riot-web are bits which apply vector-specific skinning
|
||||
specifically "Stuff that any other brand would not want to use. (e.g. riot logos, links, T&Cs)"
|
||||
- Questions:
|
||||
- Electron app? (should probably be a separate repo in its own right? but might as well go here for now)
|
||||
- index.html & index.js? (should be in matrix-react-sdk, given the SDK is useless without them?)
|
||||
|
||||
ideally matrix-react-sdk itself should ship with a default skin which actually works built in.
|
||||
|
||||
status skin (can go in the same app for now)
|
||||
- has status theme
|
||||
- which inherits from riot light theme
|
||||
- how do we share graphics between skins?
|
||||
- shove them into react-sdk, or...
|
||||
- guess we do ../../vector/img
|
||||
- this means keeping the skin name in the images (unless /img is a shortcut to the right skin's images)
|
||||
|
||||
out of scope:
|
||||
- making the components more independent, so they can be used in isolation.
|
||||
- that said, the bits which should probably be used by being embeded into a different app:
|
||||
- login/reg
|
||||
- RoomView + RoomSettings
|
||||
- MessageComposer
|
||||
- RoomList
|
||||
- MemberList
|
||||
- MemberInfo
|
||||
- Voip UI
|
||||
- UserSettings
|
||||
- sharing different js-sdks between the different isolated modules
|
||||
|
||||
other changes:
|
||||
- how do we handle i18n?
|
||||
- each skin should really be its own i18n project. As long as all the commonality stuff is in matrix-react-sdk this shouldn't be too bad.
|
||||
- ability to associate components with a given skin
|
||||
- skins/vector/src <-- components
|
||||
- skins/vector/css
|
||||
- skins/vector/img
|
||||
- skins/vector/fonts
|
||||
- gather together themes (per skin) into a single place too
|
||||
- skins/vector/themes/foo/css
|
||||
- skins/vector/themes/foo/img
|
||||
- skins/vector/themes/foo/fonts
|
||||
- ideally riot-web would contain almost nothing but skins/vector directory.
|
||||
- ability to entirely replace CSS rather than override it for a given theme
|
||||
- e.g. if we replace `Login.js` with `StatusLogin.js`, then we should similarly be able to replace `_Login.scss` with `_StatusLogin.scss`.
|
||||
|
||||
random thoughts;
|
||||
- should we be able to change the entire skin at runtime (more like wordpress) - to the extent of replacing entire components?
|
||||
- might pose security issues if a theme can be swapped out to replace MatrixChat or other fundamental functionality at runtime
|
||||
- if so, perhaps skins & themes should converge...
|
||||
|
||||
-----------------
|
||||
|
||||
Immediate plan for Status:
|
||||
* Implement it as a theme for the riot skin
|
||||
* Ideally move skins to a sensible level (possibly even including src?)
|
||||
|
|
@ -18,6 +18,7 @@ limitations under the License.
|
|||
|
||||
var React = require('react');
|
||||
import { _t } from 'matrix-react-sdk/lib/languageHandler';
|
||||
import UserSettingsStore from 'matrix-react-sdk/lib/UserSettingsStore';
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'VectorLoginFooter',
|
||||
|
|
@ -26,6 +27,8 @@ module.exports = React.createClass({
|
|||
},
|
||||
|
||||
render: function() {
|
||||
if (UserSettingsStore.getTheme() === 'status') return <div/>;
|
||||
|
||||
return (
|
||||
<div className="mx_Login_links">
|
||||
<a href="https://medium.com/@RiotChat">blog</a> ·
|
||||
|
|
|
|||
|
|
@ -33,9 +33,11 @@ module.exports = React.createClass({
|
|||
|
||||
render: function() {
|
||||
return (
|
||||
<div className="mx_Login_header">
|
||||
<div className="mx_Login_logo">
|
||||
<img src={this.props.icon || DEFAULT_LOGO_URI} alt="Riot"/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -26,7 +26,6 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_Login h2 {
|
||||
color: $primary-fg-color;
|
||||
font-weight: 300;
|
||||
margin-top: 32px;
|
||||
margin-bottom: 20px;
|
||||
|
|
|
|||
|
|
@ -1,155 +0,0 @@
|
|||
@font-face {
|
||||
font-family:PostGrotesk-Medium;
|
||||
src:url(../fonts/PostGrotesk-Medium.eot);
|
||||
src:url(../fonts/PostGrotesk-Medium.eot?#iefix) format("embedded-opentype"),url(../fonts/PostGrotesk-Medium.woff) format("woff"),url(../fonts/PostGrotesk-Medium.svg#PostGrotesk-Medium) format("svg");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family:PostGrotesk-Book;
|
||||
src:url(../fonts/PostGrotesk-Book.eot);
|
||||
src:url(../fonts/PostGrotesk-Book.eot?#iefix) format("embedded-opentype"),url(../fonts/PostGrotesk-Book.woff) format("woff"),url(../fonts/PostGrotesk-Book.svg#PostGrotesk-Book) format("svg");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// We deliberately prioritise Arial over Helvetica here due to diacritic problems (see _base.scss)
|
||||
// N.B. that the status.im website uses:
|
||||
// font-family:PostGrotesk-Book,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
|
||||
// ...but can't be bothered to work out how the apple fonts & segoe interact, so keepingn it simple for now.
|
||||
|
||||
$font-family: PostGrotesk-Book, Arial, Helvetica, Sans-Serif;
|
||||
|
||||
// typical text (dark-on-white in light skin)
|
||||
$primary-fg-color: #70808D;
|
||||
$primary-bg-color: #EEF2F5;
|
||||
|
||||
// ***** Status theme specifics ******
|
||||
$header-color: #49555F;
|
||||
$header-font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
|
||||
|
||||
h1,h2,h3,h4,h5 {
|
||||
color: $header-color;
|
||||
font-family: $header-font-family;
|
||||
font-weight: 400 ! important;
|
||||
}
|
||||
|
||||
// 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);
|
||||
|
||||
$group-alert-color: #774f7e;
|
||||
|
||||
$preview-bar-bg-color: #f7f7f7;
|
||||
|
||||
// left-panel style muted accent color
|
||||
$secondary-accent-color: #eaf5f0;
|
||||
|
||||
// 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: #eaf5f0;
|
||||
|
||||
// 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;
|
||||
|
||||
$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;
|
||||
|
||||
// ********************
|
||||
|
||||
$roomtile-name-color: rgba(69, 69, 69, 0.8);
|
||||
$roomtile-selected-bg-color: rgba(255, 255, 255, 0.8);
|
||||
$roomtile-focused-bg-color: rgba(255, 255, 255, 0.9);
|
||||
|
||||
$roomsublist-label-fg-color: $h3-color;
|
||||
$roomsublist-label-bg-color: #d3efe1;
|
||||
|
||||
// ********************
|
||||
|
||||
// event tile lifecycle
|
||||
$event-encrypting-color: #abddbc;
|
||||
$event-sending-color: #ddd;
|
||||
$event-notsent-color: #f44;
|
||||
|
||||
// event redaction
|
||||
$event-redacted-img: url('../../img/redacted.jpg');
|
||||
|
||||
// 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;
|
||||
|
|
@ -17,40 +17,70 @@ limitations under the License.
|
|||
// overrides for mx_Login* specific to Status.
|
||||
// Ideally this would be all Status prefixes for a Status specific version of the component
|
||||
// but given we're not doing Status as a dedicated 'skin' yet...
|
||||
.mx_Login {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
.mx_Login {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.mx_Login h2 {
|
||||
color: $primary-fg-color;
|
||||
font-weight: 300;
|
||||
margin-top: 32px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.mx_Login_box {
|
||||
width: 300px;
|
||||
min-height: 450px;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
margin: auto;
|
||||
width: 350px;
|
||||
min-height: initial;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 10px;
|
||||
padding-left: 33px;
|
||||
padding-right: 33px;
|
||||
border-radius: 8px;
|
||||
margin: initial;
|
||||
background-color: $form-bg-color;
|
||||
box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mx_Login_logo {
|
||||
text-align: center;
|
||||
height: 150px;
|
||||
margin-bottom: 45px;
|
||||
background-color: #fff;
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
border-radius: 37px;
|
||||
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
|
||||
position: absolute;
|
||||
top: -36px;
|
||||
left: 50%;
|
||||
margin-left: -36px;
|
||||
}
|
||||
|
||||
.mx_Login_logo img {
|
||||
max-height: 100%
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 19px;
|
||||
}
|
||||
|
||||
.mx_Login_box h2 {
|
||||
text-align: center;
|
||||
color: $form-fg-color;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.mx_LoginPageHeader_brand {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.mx_LoginPageHeader_title {
|
||||
text-align: center;
|
||||
margin-top: 90px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.mx_LoginPageHeader_title h1 {
|
||||
font-size: 29px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.mx_LoginPageHeader_subtitle {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.mx_Login_support {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ $font-family: PostGrotesk-Book, Arial, Helvetica, Sans-Serif;
|
|||
$primary-fg-color: #70808D;
|
||||
$primary-bg-color: #EEF2F5;
|
||||
|
||||
// ***** Status theme specifics ******
|
||||
// ***** Start of Status theme specifics ******
|
||||
$header-color: #49555F;
|
||||
$header-font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
|
||||
|
||||
|
|
@ -35,6 +35,11 @@ h1,h2,h3,h4,h5 {
|
|||
font-weight: 400 ! important;
|
||||
}
|
||||
|
||||
$form-bg-color: #4360DF;
|
||||
$form-fg-color: #ffffff;
|
||||
|
||||
// ***** End of Status theme specifics ******
|
||||
|
||||
// used for dialog box text
|
||||
$light-fg-color: #747474;
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 18 KiB |
Loading…
Reference in New Issue