Browse Source

WIP

pull/5578/head
Matthew Hodgson 5 years ago
parent
commit
190811ac1c
  1. 68
      docs/skinning thoughts.md
  2. 3
      src/components/views/login/VectorLoginFooter.js
  3. 6
      src/components/views/login/VectorLoginHeader.js
  4. 1
      src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
  5. 155
      src/skins/vector/css/themes/_status.scss
  6. 72
      src/skins/vector/themes/status/css/_StatusLogin.scss
  7. 7
      src/skins/vector/themes/status/css/_status.scss
  8. 16
      src/skins/vector/themes/status/img/logo.svg

68
docs/skinning thoughts.md

@ -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?)

3
src/components/views/login/VectorLoginFooter.js

@ -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>&nbsp;&nbsp;&middot;&nbsp;&nbsp;

6
src/components/views/login/VectorLoginHeader.js

@ -33,8 +33,10 @@ module.exports = React.createClass({
render: function() {
return (
<div className="mx_Login_logo">
<img src={this.props.icon || DEFAULT_LOGO_URI} alt="Riot"/>
<div className="mx_Login_header">
<div className="mx_Login_logo">
<img src={this.props.icon || DEFAULT_LOGO_URI} alt="Riot"/>
</div>
</div>
);
}

1
src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss

@ -26,7 +26,6 @@ limitations under the License.
}
.mx_Login h2 {
color: $primary-fg-color;
font-weight: 300;
margin-top: 32px;
margin-bottom: 20px;

155
src/skins/vector/css/themes/_status.scss

@ -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;

72
src/skins/vector/themes/status/css/_StatusLogin.scss

@ -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_box {
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 h2 {
color: $primary-fg-color;
font-weight: 300;
margin-top: 32px;
margin-bottom: 20px;
.mx_Login_logo {
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_box {
width: 300px;
min-height: 450px;
padding-top: 50px;
padding-bottom: 50px;
margin: auto;
.mx_Login_logo img {
width: 36px;
height: 36px;
padding: 19px;
}
.mx_Login_logo {
.mx_Login_box h2 {
text-align: center;
height: 150px;
margin-bottom: 45px;
color: $form-fg-color;
font-size: 25px;
}
.mx_Login_logo img {
max-height: 100%
.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 {

7
src/skins/vector/themes/status/css/_status.scss

@ -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;

16
src/skins/vector/themes/status/img/logo.svg

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 18 KiB

Loading…
Cancel
Save