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

Move compoenets/FontSlider to views/Slider

Browse source
This commit is contained in:
Jorik Schellekens 2020-04-21 11:29:37 +01:00
parent dd841fcde9
commit abd94a65bd
5 changed files with 14 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
res/css/_components.scss
View file

@ -7,7 +7,7 @@
@import "./structures/_CreateRoom.scss"; @import "./structures/_CreateRoom.scss";
@import "./structures/_CustomRoomTagPanel.scss"; @import "./structures/_CustomRoomTagPanel.scss";
@import "./structures/_FilePanel.scss"; @import "./structures/_FilePanel.scss";
@import "./structures/_FontSlider.scss"; @import "./structures/_Slider.scss";
@import "./structures/_GenericErrorPage.scss"; @import "./structures/_GenericErrorPage.scss";
@import "./structures/_GroupView.scss"; @import "./structures/_GroupView.scss";
@import "./structures/_HeaderButtons.scss"; @import "./structures/_HeaderButtons.scss";

12
res/css/structures/_FontSlider.scss → res/css/structures/_Slider.scss
View file

@ -39,7 +39,7 @@ limitations under the License.
.mx_Slider_bar > hr { .mx_Slider_bar > hr {
width: 100%; width: 100%;
border: 0.2rem solid $fontSlider-background-color; border: 0.2rem solid $Slider-background-color;
} }
.mx_Slider_selection { .mx_Slider_selection {
@ -55,7 +55,7 @@ limitations under the License.
position: absolute; position: absolute;
width: 1.1rem; width: 1.1rem;
height: 1.1rem; height: 1.1rem;
background-color: $fontSlider-selection-color; background-color: $Slider-selection-color;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 0 6px lightgrey; box-shadow: 0 0 6px lightgrey;
z-index: 10; z-index: 10;
@ -64,7 +64,7 @@ limitations under the License.
.mx_Slider_selection > hr { .mx_Slider_selection > hr {
transition: width 0.25s; transition: width 0.25s;
margin: 0; margin: 0;
border: 0.2rem solid $fontSlider-selection-color; border: 0.2rem solid $Slider-selection-color;
} }
.mx_Slider_dot { .mx_Slider_dot {
@ -72,18 +72,18 @@ limitations under the License.
height: 1rem; height: 1rem;
width: 1rem; width: 1rem;
border-radius: 50%; border-radius: 50%;
background-color: $fontSlider-background-color; background-color: $Slider-background-color;
margin-bottom: 5px; margin-bottom: 5px;
z-index: 0; z-index: 0;
} }
.mx_Slider_dotActive { .mx_Slider_dotActive {
background-color: $fontSlider-selection-color; background-color: $Slider-selection-color;
} }
.mx_Slider_dotValue { .mx_Slider_dotValue {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
color: $fontSlider-background-color; color: $Slider-background-color;
} }

6
res/themes/light/css/_light.scss
View file

@ -262,9 +262,9 @@ $togglesw-off-color: #c1c9d6;
$togglesw-on-color: $accent-color; $togglesw-on-color: $accent-color;
$togglesw-ball-color: #fff; $togglesw-ball-color: #fff;
// FontSlider // Slider
$fontSlider-selection-color: $accent-color; $Slider-selection-color: $accent-color;
$fontSlider-background-color: #c1c9d6; $Slider-background-color: #c1c9d6;
$progressbar-color: #000; $progressbar-color: #000;

2
src/components/structures/FontSlider.tsx → src/components/views/elements/Slider.tsx
View file

@ -16,6 +16,7 @@ limitations under the License.
import * as React from 'react'; import * as React from 'react';
import * as PropTypes from 'prop-types'; import * as PropTypes from 'prop-types';
import { replaceableComponent } from '../../../utils/replaceableComponent';
type SliderProps = { type SliderProps = {
// A callback for the selected value // A callback for the selected value
@ -93,6 +94,7 @@ type DotProps = {
label: string, label: string,
} }
@replaceableComponent("views.elements.Dot")
class Dot extends React.Component<DotProps> { class Dot extends React.Component<DotProps> {
static propTypes = { static propTypes = {
// Callback for behaviour onclick // Callback for behaviour onclick

4
src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
View file

@ -20,7 +20,7 @@ import SettingsStore, {SettingLevel} from "../../../../../settings/SettingsStore
import * as sdk from "../../../../../index"; import * as sdk from "../../../../../index";
import {enumerateThemes, ThemeWatcher} from "../../../../../theme"; import {enumerateThemes, ThemeWatcher} from "../../../../../theme";
import Field from "../../../elements/Field"; import Field from "../../../elements/Field";
import FontSlider from "../../../../structures/FontSlider"; import Slider from "../../../elements/Slider";
import AccessibleButton from "../../../elements/AccessibleButton"; import AccessibleButton from "../../../elements/AccessibleButton";
import dis from "../../../../../dispatcher"; import dis from "../../../../../dispatcher";
@ -223,7 +223,7 @@ export default class StyleUserSettingsTab extends React.Component {
_renderFontSection() { _renderFontSection() {
return <div className="mx_SettingsTab_section mx_StyleUserSettingsTab_fontScaling"> return <div className="mx_SettingsTab_section mx_StyleUserSettingsTab_fontScaling">
<span className="mx_SettingsTab_subheading">{_t("Font size")}</span> <span className="mx_SettingsTab_subheading">{_t("Font size")}</span>
<FontSlider <Slider
values={[12, 14, 16, 18, 20]} values={[12, 14, 16, 18, 20]}
value={this.state.fontSize} value={this.state.fontSize}
updateFontSize={this._onFontSizeChanged} updateFontSize={this._onFontSizeChanged}