Implement resizable icons.

src/extensionPreferences/css/olPreferences.css

@@ -22,7 +22,8 @@ body.olPreferencesOpen {
     font-size: var(--md-sys-typescale-body-large-font-size);
     line-height: var(--md-sys-typescale-body-large-font-line-height);
 }
-.ol-set-description {
+.ol-set-description,
+.ol-set-val {
     color: var(--md-sys-color-on-surface-variant);
     font-family: var(--md-sys-typescale-body-medium-font-family-name);
     font-weight: var(--md-sys-typescale-body-medium-font-weight);
@@ -54,3 +55,13 @@ body.olPreferencesOpen {
     padding-right: 16px;
     padding-top: 8px;
 }
+.ol-setting-slider {
+    justify-content: center;
+    flex-direction: column;
+    align-items: stretch;
+}
+.ol-setting-slider .ol-set-inner {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}

src/features/base.ts

@@ -13,7 +13,7 @@ export class OLFeature {
         return;
     }
 }
-class SettingOption {
+export class SettingOption {
     element: HTMLDivElement;
     constructor(title: string, description: string) {
         this.element = document.createElement("div");
@@ -43,7 +43,9 @@ export class SettingToggle extends SettingOption {
         this.settingId = settingId;
         this.callback = callback;
         this.element.classList.add("ol-setting-toggle");
-        this.element.innerHTML = `<span class="ol-set-inner"><p class="ol-set-title">${title}</p><p class="ol-set-desc">${description}</p></span><input type="checkbox" id="${settingId}" class="ol-setting-toggle-checkbox">`;
+        this.element.innerHTML =
+            `<span class="ol-set-inner"><p class="ol-set-title">${title}</p>` +
+            `<p class="ol-set-desc">${description}</p></span><input type="checkbox" id="${settingId}" class="ol-setting-toggle-checkbox">`;
         this.element.addEventListener(
             "click",
             async () => await this.toggleSetting()
@@ -69,3 +71,65 @@ export class SettingToggle extends SettingOption {
         this.callback(new_value);
     }
 }
+export class SettingSlider extends SettingOption {
+    settingId: string;
+    callback: (newState: number) => void;
+    default: number = 0;
+    minVal: number = 1;
+    maxVal: number = Infinity;
+    constructor(
+        title: string,
+        settingId: string,
+        valSuffix: string,
+        defaultValue: number,
+        minValue: number,
+        maxValue: number,
+        callback: (newState: number) => void
+    ) {
+        super(title, "");
+        this.settingId = settingId;
+        this.callback = callback;
+        this.minVal = minValue;
+        this.maxVal = maxValue;
+        this.default = defaultValue;
+        this.element.classList.add("ol-setting-slider");
+        this.element.innerHTML =
+            `<span class="ol-set-inner"><p class="ol-set-title">${title}</p>` +
+            `<span><span class="ol-set-val">${defaultValue}</span><span class="ol-set-description">${valSuffix}</span></span></span>` +
+            `<input type="range" min="${minValue}" max="${maxValue}" value="${defaultValue}" id="${settingId}" class="ol-setting-range">`;
+        this.element
+            .querySelector("input")
+            ?.addEventListener("change", (e) => this.update(e));
+        this.loadPD();
+    }
+    async getValue(): Promise<number> {
+        const prefData = await store.get(this.settingId);
+        console.log("pd:", prefData);
+        // @ts-ignore
+        return prefData ?? this.default;
+    }
+    async loadPD() {
+        const value = await this.getValue();
+        this.element.querySelector("input")!.value = value.toString();
+        (
+            this.element.querySelector(".ol-set-val") as HTMLParagraphElement
+        ).innerText = value.toString();
+        this.callback(value);
+    }
+    async update(e: Event) {
+        const new_value = Number((e.currentTarget as HTMLInputElement).value);
+        if (new_value < this.minVal || new_value > this.maxVal) {
+            console.log("invalid value, not updating storage");
+            (e.currentTarget as HTMLInputElement).value = (
+                await this.getValue()
+            ).toString();
+            return;
+        }
+        await store.set(this.settingId, new_value);
+        console.log("updating", this.settingId, new_value);
+        this.callback(new_value);
+        (
+            this.element.querySelector(".ol-set-val") as HTMLParagraphElement
+        ).innerText = new_value.toString();
+    }
+}

src/features/iconRegulator.ts

@@ -0,0 +1,94 @@
+import { OLFeature, SettingOption, SettingSlider } from "./base";
+
+class IconSizePreview extends SettingOption {
+    settingId = "iconSizePreview";
+    constructor() {
+        super("", "");
+        // @ts-ignore
+        this.element = document.createElement("div");
+        this.element.innerHTML = `
+        <p class="ol-set-title ol-setting">Preview: </p>
+        <ul class="flat-list buttons">
+        <li class="ol-vote-container">
+        <a class="ol-upvote" href="javascript:void(0)">arrow_circle_up</a
+        ><a class="ol-downvote" href="javascript:void(0)">arrow_circle_down</a>
+        </li>
+        <li class="first">
+            <a
+                data-event-action="comments"
+                class="bylink comments may-blank"
+                rel="nofollow"
+                >99</a
+            >
+        </li>
+        <li class="share">
+            <a
+                class="post-sharing-button"
+                style="display: none"
+                >share</a
+            ><a class="riok-share" href="javascript:void(0)"></a>
+        </li>
+        <li class="link-save-button save-button login-required">
+            <a href="javascript:void(0)">save</a>
+        </li>
+        <li>
+            <form
+                action="/post/hide"
+                method="post"
+                class="state-button hide-button"
+            >
+                <span
+                    ><a
+                        href="javascript:void(0)"
+                        class=""
+                        data-event-action="hide"
+                        >hide</a
+                    ></span
+                >
+            </form>
+        </li>
+        <li class="report-button login-required">
+            <a
+                href="javascript:void(0)"
+                class="reportbtn access-required"
+                data-event-action="report"
+                >report</a
+            >
+        </li>
+        <li class="crosspost-button">
+            <a
+                class="post-crosspost-button"
+                href="javascript: void 0;"
+                data-type="crosspost"
+                >crosspost</a
+            >
+        </li>
+        <li><a class="modal-spawner" href="javascript:void(0);"></a></li>
+        `;
+    }
+}
+
+export default class IconSizeChange extends OLFeature {
+    moduleId: string = "iconSize";
+    moduleName: string = "Icon size";
+    async init() {
+        this.settingOptions.push(
+            new IconSizePreview(),
+            new SettingSlider(
+                "Icon size",
+                "postIconSize",
+                "px",
+                28,
+                0,
+                100,
+                (val) => {
+                    console.log("updating icon-size to", val);
+                    document.documentElement.style.setProperty(
+                        "--icon-size",
+                        val + "px"
+                    );
+                }
+            )
+        );
+    }
+}

src/features/index.ts

@@ -7,6 +7,7 @@ import PostsEnhancements from "./posts";
 import { OLFeature } from "./base";
 import WhiteTheme from "./themeSwitch";
 import RedesignRedirect from "./redesignRedirect";
+import IconSizeChange from "./iconRegulator";
 type Constructor = new (...args: any[]) => OLFeature;
 const features: Array<Constructor> = [
     Expandos,
@@ -16,6 +17,7 @@ const features: Array<Constructor> = [
     RedditMarquee,
     WhiteTheme,
     RedesignRedirect,
+    IconSizeChange,
 ];
 features.push(...PostsEnhancements);
 export default features;