OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge branch 'develop' into travis/granular

pull/5468/head
Travis Ralston 2017-11-14 19:16:35 -07:00
parent 977599a660 142a9d7549
commit a583c2b658
16 changed files with 377 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src/components/views/context_menus/PresenceContextMenu.js Normal file
View File

@ -0,0 +1,101 @@
/*
Copyright 2017 Travis Ralston
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 { _t, _td } from 'matrix-react-sdk/lib/languageHandler';
import sdk from 'matrix-react-sdk';
const STATUS_LABELS = {
"online": _td("Online"),
"unavailable": _td("Away"),
"offline": _td("Appear Offline"),
};
const PresenceContextMenuOption = React.createClass({
displayName: 'PresenceContextMenuOption',
propTypes: {
forStatus: React.PropTypes.string.isRequired,
isCurrent: React.PropTypes.bool,
onChange: React.PropTypes.func.isRequired,
},
onClick: function() {
if (this.isCurrent) return;
this.props.onChange(this.props.forStatus);
},
render: function() {
const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
const indicatorClasses = "mx_PresenceContextMenuOption_indicator "
+ "mx_PresenceContextMenuOption_indicator_" + this.props.forStatus;
let classNames = "mx_PresenceContextMenuOption";
if (this.props.isCurrent) classNames += " mx_PresenceContextMenuOption_current";
return (
<AccessibleButton className={classNames} element="div" onClick={this.onClick}>
<div className={indicatorClasses}></div>
{ _t(STATUS_LABELS[this.props.forStatus]) }
</AccessibleButton>
);
},
});
module.exports = React.createClass({
displayName: 'PresenceContextMenu',
propTypes: {
// "online", "unavailable", or "offline"
currentStatus: React.PropTypes.string.isRequired,
// Called when the user wants to change their status.
// Args: (newStatus:string)
onChange: React.PropTypes.func.isRequired,
// callback called when the menu is dismissed
onFinished: React.PropTypes.func,
},
getInitialState() {
return {
currentStatus: this.props.currentStatus,
};
},
onChange: function(newStatus) {
this.props.onChange(newStatus);
this.setState({currentStatus: newStatus});
},
render: function() {
const statusElements = [];
for (let status of Object.keys(STATUS_LABELS)) {
statusElements.push((
<PresenceContextMenuOption forStatus={status} key={status}
onChange={this.onChange}
isCurrent={status === this.state.currentStatus} />
));
}
return (
<div>
{ statusElements }
</div>
);
},
});

2
src/i18n/strings/en_EN.json
View File

@ -68,6 +68,8 @@
"What's New": "What's New",
"Update": "Update",
"What's new?": "What's new?",
"Appear Offline": "Appear Offline",
"Away": "Away",
"A new version of Riot is available.": "A new version of Riot is available.",
"To return to your account in future you need to <u>set a password</u>": "To return to your account in future you need to <u>set a password</u>",
"Toolbox": "Toolbox",

4
src/skins/vector/css/_common.scss
View File

@ -132,6 +132,10 @@ textarea {
color: $secondary-accent-color;
}
#mx_theme_tertiaryAccentColor {
color: $roomsublist-label-bg-color;
}
.mx_Dialog_wrapper {
position: fixed;
z-index: 4000;

2
src/skins/vector/css/_components.scss
View File

@ -15,6 +15,7 @@
@import "./matrix-react-sdk/structures/_UserSettings.scss";
@import "./matrix-react-sdk/structures/login/_Login.scss";
@import "./matrix-react-sdk/views/avatars/_BaseAvatar.scss";
@import "./matrix-react-sdk/views/avatars/_MemberPresenceAvatar.scss";
@import "./matrix-react-sdk/views/dialogs/_BugReportDialog.scss";
@import "./matrix-react-sdk/views/dialogs/_ChatCreateOrReuseChatDialog.scss";
@import "./matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss";
@ -80,6 +81,7 @@
@import "./vector-web/structures/_RoomSubList.scss";
@import "./vector-web/structures/_ViewSource.scss";
@import "./vector-web/views/context_menus/_MessageContextMenu.scss";
@import "vector-web/views/context_menus/_PresenceContextMenuOption.scss";
@import "./vector-web/views/context_menus/_RoomTileContextMenu.scss";
@import "./vector-web/views/dialogs/_ChangelogDialog.scss";
@import "./vector-web/views/dialogs/_DevtoolsDialog.scss";

54
src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss
View File

@ -94,6 +94,60 @@ limitations under the License.
left: 1px;
}
.mx_ContextualMenu.mx_ContextualMenu_top {
top: 8px;
}
.mx_ContextualMenu_chevron_top {
position: absolute;
left: 0px;
top: -8px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-bottom: 8px solid $menu-border-color;
border-right: 8px solid transparent;
}
.mx_ContextualMenu_chevron_top:after{
content:'';
width: 0;
height: 0;
border-left: 7px solid transparent;
border-bottom: 7px solid $menu-bg-color;
border-right: 7px solid transparent;
position:absolute;
left: -7px;
top: 1px;
}
.mx_ContextualMenu.mx_ContextualMenu_bottom {
bottom: 8px;
}
.mx_ContextualMenu_chevron_bottom {
position: absolute;
left: 0px;
bottom: -8px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-top: 8px solid $menu-border-color;
border-right: 8px solid transparent;
}
.mx_ContextualMenu_chevron_bottom:after{
content:'';
width: 0;
height: 0;
border-left: 7px solid transparent;
border-top: 7px solid $menu-bg-color;
border-right: 7px solid transparent;
position:absolute;
left: -7px;
bottom: 1px;
}
.mx_ContextualMenu_field {
padding: 3px 6px 3px 6px;
cursor: pointer;

43
src/skins/vector/css/matrix-react-sdk/views/avatars/_MemberPresenceAvatar.scss Normal file
View File

@ -0,0 +1,43 @@
/*
Copyright 2017 Travis Ralston
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_MemberPresenceAvatar {
display: inline-block;
position: relative;
}
.mx_MemberPresenceAvatar_status {
display: block;
width: 10px;
height: 10px;
border-radius: 10px;
position: absolute;
bottom: -2px;
right: -3px;
}
.mx_MemberPresenceAvatar_status_online {
background-color: $presence-online;
}
.mx_MemberPresenceAvatar_status_unavailable {
background-color: $presence-unavailable;
}
.mx_MemberPresenceAvatar_status_offline {
background-color: $presence-offline;
}

23
src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss
View File

@ -14,8 +14,9 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
// .mx_AppsDrawer {
// }
.mx_AppsDrawer {
margin: 5px;
}
.mx_AppsContainer {
display: flex;
@ -75,16 +76,22 @@ limitations under the License.
}
.mx_AppTileMenuBar {
// height: 15px;
margin: 0;
padding: 2px 10px;
// background-color: $e2e-verified-color;
border-bottom: 1px solid $primary-hairline-color;
font-size: 10px;
background-color: $widget-menu-bar-bg-color;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.mx_AppTileMenuBarWidgets {
float: right;
display: flex;
flex-direction: row;
align-items: center;
}
.mx_AppTileMenuBarWidget {
// pointer-events: none;
@ -101,7 +108,7 @@ limitations under the License.
}
.mx_AppTileMenuBarWidget:hover {
border: 1px solid $primary-hairline-color;
border: 1px solid $primary-fg-color;
border-radius: 2px;
}
@ -193,8 +200,12 @@ form.mx_Custom_Widget_Form div {
.mx_AppPermissionWarning {
text-align: center;
padding: 30px 0;
background-color: $primary-bg-color;
display: flex;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mx_AppPermissionWarningImage {

10
src/skins/vector/css/themes/_base.scss
View File

@ -111,6 +111,10 @@ $panel-divider-color: rgba(118, 207, 166, 0.2);
// ********************
$widget-menu-bar-bg-color: #d3efe1;
// ********************
// event tile lifecycle
$event-encrypting-color: #abddbc;
$event-sending-color: #ddd;
@ -131,6 +135,11 @@ $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
$e2e-unverified-color: #e8bf37;
$e2e-warning-color: #ba6363;
// presence
$presence-online: #60de00;
$presence-unavailable: #deb800;
$presence-offline: #b7b7b7;
/*** ImageView ***/
$lightbox-bg-color: #454545;
$lightbox-fg-color: #ffffff;
@ -156,6 +165,7 @@ $progressbar-color: #000;
padding-right: 1.5em;
cursor: pointer;
display: inline-block;
outline: none;
}
@define-mixin mx_DialogButton_hover {

34
src/skins/vector/css/themes/_dark.scss
View File

@ -30,6 +30,17 @@ $preview-bar-bg-color: #333;
// left-panel style muted accent color
$secondary-accent-color: $primary-bg-color;
// stop the tinter trying to change the secondary accent color
// by overriding the key to something untintable
// XXX: this is a bit of a hack.
#mx_theme_secondaryAccentColor {
color: #c0ff33 ! important; // deliberately off by one
}
#mx_theme_tertiaryAccentColor {
color: #c0ffee ! important;
}
// used by RoomDirectory permissions
$plinth-bg-color: #474747;
@ -99,6 +110,10 @@ $panel-divider-color: rgba(118, 207, 166, 0.2);
// ********************
$widget-menu-bar-bg-color: #454545;
// ********************
// event tile lifecycle
$event-encrypting-color: rgba(171, 221, 188, 0.4);
$event-sending-color: #888;
@ -127,6 +142,25 @@ $lightbox-border-color: #ffffff;
// unused?
$progressbar-color: #000;
// XXX: copypasted from _base in order to pick up the right FG color...
@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;
}
// Nasty hacks to apply a filter to arbitrary monochrome artwork to make it
// better match the theme. Typically applied to dark grey 'off' buttons or
// light grey 'on' buttons.

42
src/skins/vector/css/vector-web/views/context_menus/_PresenceContextMenuOption.scss Normal file
View File

@ -0,0 +1,42 @@
/*
Copyright 2017 Travis Ralston
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_PresenceContextMenuOption_indicator {
width: 10px;
height: 10px;
border-radius: 10px;
display: inline-block;
margin-right: 5px;
}
.mx_PresenceContextMenuOption_indicator.mx_PresenceContextMenuOption_indicator_online {
background-color: $presence-online;
}
.mx_PresenceContextMenuOption_indicator.mx_PresenceContextMenuOption_indicator_unavailable {
background-color: $presence-unavailable;
}
.mx_PresenceContextMenuOption_indicator.mx_PresenceContextMenuOption_indicator_offline {
background-color: $presence-offline;
}
.mx_PresenceContextMenuOption {
padding: 2px;
}
.mx_PresenceContextMenuOption.mx_PresenceContextMenuOption_current {
font-weight: 700;
}

16
src/skins/vector/img/edit.svg
View File

@ -1,13 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<g>
<rect x="178.846" y="92.087" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 224.3476 631.1498)" width="128.085" height="354.049"/>
<path d="M471.723,88.393l-48.115-48.114c-11.723-11.724-31.558-10.896-44.304,1.85l-45.202,45.203l90.569,90.568l45.202-45.202
C482.616,119.952,483.445,100.116,471.723,88.393z"/>
<polygon points="64.021,363.252 32,480 148.737,447.979 "/>
</g>
width="512px" height="512px" viewBox="0 0 512 512" xml:space="preserve">
<g>
<rect fill="#000000" x="167.664" y="69.108" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 219.262 633.2606)" width="146.238" height="404.224"/>
<path fill="#000000" d="M502.05,64.887L447.116,9.952c-13.386-13.385-36.032-12.44-50.585,2.113l-51.609,51.61L448.328,167.08l51.609-51.608
C514.486,100.918,515.434,78.271,502.05,64.887z"/>
<polygon fill="#000000" points="36.56,378.704 0,512 133.283,475.439"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 876 B

After

Width:  |  Height:  |  Size: 780 B

11
src/skins/vector/img/edit_green.svg Normal file
View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="512px" height="512px" viewBox="0 0 512 512" xml:space="preserve">
<g>
<rect fill="#76CFA6" x="167.664" y="69.108" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 219.262 633.2606)" width="146.238" height="404.224"/>
<path fill="#76CFA6" d="M502.05,64.887L447.116,9.952c-13.386-13.385-36.032-12.44-50.585,2.113l-51.609,51.61L448.328,167.08l51.609-51.608
C514.486,100.918,515.434,78.271,502.05,64.887z"/>
<polygon fill="#76CFA6" points="36.56,378.704 0,512 133.283,475.439"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 780 B

34
src/skins/vector/img/warning_yellow.svg Normal file
View File

@ -0,0 +1,34 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<g>
<g>
<g>
<defs>
<path id="SVGID_1_" d="M191.667,56.25c33.333-60.417,85.417-60.417,118.75,0l172.916,320.834
C516.667,437.5,487.5,487.5,416.667,487.5H83.333c-68.75,0-97.917-50-66.667-110.416L191.667,56.25L191.667,56.25z"/>
</defs>
<use xlink:href="#SVGID_1_" overflow="visible" fill="#E8BF37"/>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<rect x="-100" y="-93.75" clip-path="url(#SVGID_2_)" fill="#E8BF37" width="700" height="685.417"/>
</g>
</g>
<g>
<g>
<defs>
<path id="SVGID_3_" d="M264.584,322.916l6.25-200h-41.667l6.25,200H264.584L264.584,322.916z M250,408.334
c14.584,0,25-10.418,25-25c0-14.584-10.416-25-25-25c-14.583,0-25,10.416-25,25C225,397.916,235.417,408.334,250,408.334
L250,408.334L250,408.334z"/>
</defs>
<clipPath id="SVGID_4_">
<use xlink:href="#SVGID_3_" overflow="visible"/>
</clipPath>
<rect x="120.833" y="18.75" clip-path="url(#SVGID_4_)" fill="#FFFFFF" width="258.333" height="493.75"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

10
src/skins/vector/themes/status/css/_status.scss
View File

@ -90,7 +90,11 @@ $secondary-accent-color: #586C7B;
// by overriding the key to something untintable
// XXX: this is a bit of a hack.
#mx_theme_secondaryAccentColor {
color: #586C7C ! important; // deliberately off by one
color: #c0ffee ! important;
}
#mx_theme_tertiaryAccentColor {
color: #c0ffee ! important;
}
// used by RoomDirectory permissions
@ -163,6 +167,10 @@ $panel-divider-color: rgba(0, 0, 0, 0.2);
// ********************
$widget-menu-bar-bg-color: #f7f7f7;
// ********************
// event tile lifecycle
$event-encrypting-color: #abddbc;
$event-sending-color: #ddd;

4
src/vector/index.html
View File

@ -27,7 +27,7 @@
if (match) {
var title = match[1].charAt(0).toUpperCase() + match[1].slice(1);
%>
<link rel="stylesheet" disabled title="<%= title %>" href="<%= file %>">
<link rel="stylesheet" disabled="disabled" title="<%= title %>" href="<%= file %>">
<% } else { %>
<link rel="stylesheet" href="<%= file %>">
<% }
@ -73,6 +73,6 @@
</audio>
<audio id="remoteAudio"/>
<!-- let CSS themes pass constants to the app -->
<div id="mx_theme_accentColor"></div><div id="mx_theme_secondaryAccentColor"/></div>
<div id="mx_theme_accentColor"></div><div id="mx_theme_secondaryAccentColor"/></div><div id="mx_theme_tertiaryAccentColor"/></div>
</body>
</html>

7
src/vector/index.js
View File

@ -310,10 +310,13 @@ async function loadApp() {
a.removeAttribute("disabled");
// in case the Tinter.tint() in MatrixChat fires before the
// CSS has actually loaded (which in practice happens)
// CSS has actually loaded (which in practice happens)...
// FIXME: we should probably block loading the app or even
// showing a spinner until the theme is loaded, to avoid
// flashes of unstyled content.
a.onload = () => {
Tinter.setTheme(theme);
Tinter.tint();
};
}
}