added wp.skltn styles to settings

CHANGES.md

@@ -0,0 +1,15 @@
+## Branch 2.X ##
+
+### 2.1.0 ###
+
+* Added: `wp-skltn` component wrapper around the settings elements
+* Added: additional description to the base theme settings
+* Changed: empty values within customizer take presendence over base theme (empty values cause the css rule to be deleted if exist)
+
+### 2.0.0 ###
+
+* Re-created from scratch as standalone component
+
+## Branch 1.X ##
+
+Legacy ThemeCustomizer as part of the Enlighter WordPress Plugin `<= v3`

package.json

@@ -1,7 +1,7 @@
 {
     "name": "enlighterjs-theme-customizer",
     "description": "an open source syntax highlighter written in pure javascript",
-    "version": "2.0.0",
+    "version": "2.1.0",
     "private": true,
     "homepage": "https://enlighterjs.org",
     "author": {

src/css/merger.js

@@ -33,12 +33,17 @@ export function renderStylesheet(name){
         }
 
         // merge style
-        // properties can be empty (not set by customizer)
+        // properties can be empty (not set by customizer) => reset them
         for (const prop in componentRuleset[selector]){
+            // get value
             const value = componentRuleset[selector][prop];
+
             // value set ?
-            if (value.length > 0){
+            if (value && value.length > 0){
                 ruleset[selector][prop] = value;
+            }else{
+                // reset
+                ruleset[selector][prop] = '';
             }
         }
     }

src/ui/elements/theme.jsx → src/ui/elements/theme-base.jsx

@@ -10,8 +10,7 @@
 import * as React from 'dom-magic';
 
 import {getBaseThemeList, getBaseTheme} from '../../customizer/manager';
-
-// form
+import {WPFormWrapper} from '../forms/wp-wrapper.jsx';
 import {FormSelect} from '../forms/select.jsx';
 
 // wrap child elements into div container
@@ -21,6 +20,11 @@ export class ThemeSelect{
     constructor(props){
         this.el = null;
         this.onChange = props.onChange;
+        this.props = props || {};
+        this.uid="4khwf0923g";
+        this.props.title="Base theme";
+        this.props.label="";
+        this.props.description="Select the theme which should used for derivation. The theme customizer will use the styles of this theme."
     }
 
     setValue(v){
@@ -42,9 +46,11 @@ export class ThemeSelect{
         });
 
         // create stateless dom element
-        this.el = <FormSelect options={options} onChange={this.onChange} value={getBaseTheme()} />;
+        this.el = <FormSelect id={this.uid} options={options} onChange={this.onChange} value={getBaseTheme()} />;
 
         // return dom element
-        return this.el;
+        return <WPFormWrapper type="select" uid={this.uid} label={this.props.label} description={this.props.description} title={this.props.title}>
+            {this.el}
+        </WPFormWrapper>;
     }
 }

src/ui/elements/theme-load.jsx

@@ -0,0 +1,44 @@
+// ----------------------------------------------------------------------
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+// --
+// Copyright 2019-2020 Andi Dittrich <https://andidittrich.de>
+// ----------------------------------------------------------------------
+
+// Internal "ReactDOM"
+import * as React from 'dom-magic';
+
+import {WPFormWrapper} from '../forms/wp-wrapper.jsx';
+import {FormButton} from '../forms/button.jsx';
+
+// wrap child elements into div container
+export class ThemeLoadButton{
+
+    // eslint-disable-next-line constructor-super
+    constructor(props){
+        this.el = null;
+        this.onChange = props.onChange;
+        this.props = props || {};
+        this.uid="h802zfh8";
+        this.props.title="Load styles";
+        this.props.label="";
+        this.props.description="After selecting a base theme you have to load the styles into the customizer. This will remove all previous settings!"
+    }
+
+    setValue(v){
+        this.value=v;
+        this.el.value=v;
+    }
+
+    render(){
+
+        // create stateless dom element
+        this.el = <FormButton id={this.uid} onClick={this.props.onClick} label="load" className="button button-primary" />;
+
+        // return dom element
+        return <WPFormWrapper type="text" uid={this.uid} label={this.props.label} description={this.props.description} title={this.props.title}>
+            {this.el}
+        </WPFormWrapper>;
+    }
+}

src/ui/views/settings.jsx

@@ -11,11 +11,8 @@ import * as React from 'dom-magic';
 
 import {Container} from '../components/container.jsx';
 import {Group} from '../components/group.jsx';
-
-// form
-import {ThemeSelect} from '../elements/theme.jsx';
-import {FormButton} from '../forms/button.jsx';
-
+import {ThemeSelect} from '../elements/theme-base.jsx';
+import {ThemeLoadButton} from '../elements/theme-load.jsx';
 import {setBaseTheme, applyBaseTheme} from '../../customizer/manager';
 
 export function SettingsView(){
@@ -32,7 +29,7 @@ export function SettingsView(){
     return <Container className="ejs-customizer-settings">
         <Group title="Base theme">
             <ThemeSelect onChange={onChange} />
-            <FormButton label="load base theme" onClick={load} />
+            <ThemeLoadButton onClick={load} />
         </Group>
     </Container>;
 }