PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Make the dialog look more like a new dialog

Browse source
This commit is contained in:
Travis Ralston 2019-01-18 20:09:23 -07:00
parent a7e3d7df28
commit 22435bf8d2
6 changed files with 61 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
res/css/_common.scss
View file

@ -160,7 +160,7 @@ textarea {
padding: 0 58px 36px;
width: 60%;
max-width: 704px;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);
box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
max-height: 80%;
overflow-y: auto;
}
@ -171,7 +171,7 @@ textarea {
left: 0;
width: 100%;
height: 100%;
background-color: $dialog-background-bg-color;
background-color: $dialog-backdrop-color;
opacity: 0.8;
}

2
res/css/structures/_TabbedView.scss
View file

@ -82,8 +82,8 @@ limitations under the License.
.mx_TabbedView_tabPanel {
width: calc(100% - 320px);
display: inline-block;
height: 100vh; // 100% of viewport height
margin-left: 20px;
flex-grow: 1;
}
.mx_TabbedView_tabPanelContent {

43
res/css/views/dialogs/_UserSettingsDialog.scss
View file

@ -1,3 +1,44 @@
.mx_UserSettingsDialog_header {
font-size: 24px;
display: block;
text-align: center;
color: $dialog-title-fg-color;
margin-top: 23px;
margin-bottom: 32px;
padding: 0;
}
.mx_UserSettingsDialog_close {
position: absolute;
top: 23px;
right: 25px;
}
.mx_UserSettingsDialog_closeIcon {
width: 14px;
height: 14px;
display: inline-block;
}
.mx_UserSettingsDialog_closeIcon:before {
// TODO: Use real icon
mask: url('$(res)/img/feather-icons/video.svg');
background-color: $dialog-close-fg-color;
mask-repeat: no-repeat;
mask-size: 14px;
mask-position: center;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
// ICONS
// ==========================================================
.mx_UserSettingsDialog_settingsIcon:before {
mask: url('$(res)/img/feather-icons/settings.svg');
}
@ -23,4 +64,4 @@
.mx_UserSettingsDialog_helpIcon:before {
// TODO: Use real icon
mask: url('$(res)/img/feather-icons/share.svg');
}
}

5
res/themes/dharma/css/_dharma.scss
View file

@ -96,6 +96,11 @@ $avatar-bg-color: #ffffff;
$h3-color: #3d3b39;
$dialog-title-fg-color: #454545;
$dialog-backdrop-color: rgba(46, 48, 51, 0.38);
$dialog-shadow-color: rgba(0, 0, 0, 0.48);
$dialog-close-fg-color: #9fa9ba;
$dialog-background-bg-color: #e9e9e9;
$lightbox-background-bg-color: #000;

5
res/themes/light/css/_base.scss
View file

@ -93,6 +93,11 @@ $avatar-bg-color: #ffffff;
$h3-color: #3d3b39;
$dialog-title-fg-color: #454545;
$dialog-backdrop-color: rgba(46, 48, 51, 0.38);
$dialog-shadow-color: rgba(0, 0, 0, 0.48);
$dialog-close-fg-color: #9fa9ba;
$dialog-background-bg-color: #e9e9e9;
$lightbox-background-bg-color: #000;

11
src/components/views/dialogs/UserSettingsDialog.js
View file

@ -18,6 +18,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import {Tab, TabbedView} from "../../structures/TabbedView";
import {_t, _td} from "../../../languageHandler";
import AccessibleButton from "../elements/AccessibleButton";
export default class UserSettingsDialog extends React.Component {
static propTypes = {
@ -38,12 +39,12 @@ export default class UserSettingsDialog extends React.Component {
render() {
return (
<div className="mx_UserSettingsDialog">
<h1 className="mx_UserSettingsDialog_header">
<div className="mx_UserSettingsDialog_header">
{_t("Settings")}
</h1>
<span className="mx_UserSettingsDialog_close">
X
</span>
<span className="mx_UserSettingsDialog_close">
<AccessibleButton className="mx_UserSettingsDialog_closeIcon" onClick={this.props.onFinished} />
</span>
</div>
<TabbedView tabs={this._getTabs()} />
</div>
// <UserSettings