From abd94a65bd4f5a8e60478fc52d3475318b63b562 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Tue, 21 Apr 2020 11:29:37 +0100
Subject: [PATCH] Move compoenets/FontSlider to views/Slider

---
 res/css/_components.scss                             |  2 +-
 .../structures/{_FontSlider.scss => _Slider.scss}    | 12 ++++++------
 res/themes/light/css/_light.scss                     |  6 +++---
 .../FontSlider.tsx => views/elements/Slider.tsx}     |  2 ++
 .../settings/tabs/user/AppearanceUserSettingsTab.js  |  4 ++--
 5 files changed, 14 insertions(+), 12 deletions(-)
 rename res/css/structures/{_FontSlider.scss => _Slider.scss} (84%)
 rename src/components/{structures/FontSlider.tsx => views/elements/Slider.tsx} (96%)

diff --git a/res/css/_components.scss b/res/css/_components.scss
index 9d6629e703..ab602be49e 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -7,7 +7,7 @@
 @import "./structures/_CreateRoom.scss";
 @import "./structures/_CustomRoomTagPanel.scss";
 @import "./structures/_FilePanel.scss";
-@import "./structures/_FontSlider.scss";
+@import "./structures/_Slider.scss";
 @import "./structures/_GenericErrorPage.scss";
 @import "./structures/_GroupView.scss";
 @import "./structures/_HeaderButtons.scss";
diff --git a/res/css/structures/_FontSlider.scss b/res/css/structures/_Slider.scss
similarity index 84%
rename from res/css/structures/_FontSlider.scss
rename to res/css/structures/_Slider.scss
index 2112ac9a88..51f1688f6b 100644
--- a/res/css/structures/_FontSlider.scss
+++ b/res/css/structures/_Slider.scss
@@ -39,7 +39,7 @@ limitations under the License.
 
 .mx_Slider_bar > hr {
     width: 100%;
-    border: 0.2rem solid $fontSlider-background-color;
+    border: 0.2rem solid $Slider-background-color;
 }
 
 .mx_Slider_selection {
@@ -55,7 +55,7 @@ limitations under the License.
     position: absolute;
     width: 1.1rem;
     height: 1.1rem;
-    background-color: $fontSlider-selection-color;
+    background-color: $Slider-selection-color;
     border-radius: 50%;
     box-shadow: 0 0 6px lightgrey;
     z-index: 10;
@@ -64,7 +64,7 @@ limitations under the License.
 .mx_Slider_selection > hr {
     transition: width 0.25s;
     margin: 0;
-    border: 0.2rem solid $fontSlider-selection-color;
+    border: 0.2rem solid $Slider-selection-color;
 }
 
 .mx_Slider_dot {
@@ -72,18 +72,18 @@ limitations under the License.
     height: 1rem;
     width: 1rem;
     border-radius: 50%;
-    background-color: $fontSlider-background-color;
+    background-color: $Slider-background-color;
     margin-bottom: 5px;
     z-index: 0;
 }
 
 .mx_Slider_dotActive {
-    background-color: $fontSlider-selection-color;
+    background-color: $Slider-selection-color;
 }
 
 .mx_Slider_dotValue {
     display: flex;
     flex-direction: column;
     align-items: center;
-    color: $fontSlider-background-color;
+    color: $Slider-background-color;
 }
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index b457a8bccb..e06ba33594 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -262,9 +262,9 @@ $togglesw-off-color: #c1c9d6;
 $togglesw-on-color: $accent-color;
 $togglesw-ball-color: #fff;
 
-// FontSlider
-$fontSlider-selection-color: $accent-color;
-$fontSlider-background-color: #c1c9d6;
+// Slider
+$Slider-selection-color: $accent-color;
+$Slider-background-color: #c1c9d6;
 
 $progressbar-color: #000;
 
diff --git a/src/components/structures/FontSlider.tsx b/src/components/views/elements/Slider.tsx
similarity index 96%
rename from src/components/structures/FontSlider.tsx
rename to src/components/views/elements/Slider.tsx
index 7985fa206a..2070f3f167 100644
--- a/src/components/structures/FontSlider.tsx
+++ b/src/components/views/elements/Slider.tsx
@@ -16,6 +16,7 @@ limitations under the License.
 
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
+import { replaceableComponent } from '../../../utils/replaceableComponent';
 
 type SliderProps = {
         // A callback for the selected value
@@ -93,6 +94,7 @@ type DotProps = {
     label: string,
 }
 
+@replaceableComponent("views.elements.Dot")
 class Dot extends React.Component<DotProps> {
     static propTypes = {
         // Callback for behaviour onclick
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
index d09f4b3e6a..9e9f134613 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
@@ -20,7 +20,7 @@ import SettingsStore, {SettingLevel} from "../../../../../settings/SettingsStore
 import * as sdk from "../../../../../index";
 import {enumerateThemes, ThemeWatcher} from "../../../../../theme";
 import Field from "../../../elements/Field";
-import FontSlider from "../../../../structures/FontSlider";
+import Slider from "../../../elements/Slider";
 import AccessibleButton from "../../../elements/AccessibleButton";
 import dis from "../../../../../dispatcher";
 
@@ -223,7 +223,7 @@ export default class StyleUserSettingsTab extends React.Component {
     _renderFontSection() {
         return <div className="mx_SettingsTab_section mx_StyleUserSettingsTab_fontScaling">
             <span className="mx_SettingsTab_subheading">{_t("Font size")}</span>
-            <FontSlider
+            <Slider
                 values={[12, 14, 16, 18, 20]}
                 value={this.state.fontSize}
                 updateFontSize={this._onFontSizeChanged}