update mdc lib

public/index.html

@@ -116,7 +116,7 @@
         const iconEl = document.querySelector('#hideui');
         iconEl.addEventListener('MDCIconToggle:change', (e) => {
 
-            let ui = document.querySelector('.mdc-toolbar');
+            let ui = document.querySelector('.mdc-top-app-bar');
             if (ui) {
 
                 let chkAttr = e.detail.isOn;

public/lib/widgets.js

@@ -15,6 +15,91 @@
             }
         }
 
+            inputTextFieldOutlined(obj){
+                function initFunc() {
+                    new mdc.textField.MDCTextField.attachTo(this);
+                }
+                let inputType = obj.type ? obj.type: 'text';
+                let init = obj.init ? obj.init: initFunc;
+                return {
+                    $cell: true,
+                    $type: "div",
+                    class: "mdc-text-field mdc-text-field--outlined mdc-text-field--dense",
+                    $init: init,
+                    $components:[
+                        {
+                            $type: "input",
+                            type: inputType,
+                            id: obj.id,
+                            class: "mdc-text-field__input",
+                            value: obj.value,
+                            onchange: obj.change
+                        },
+                        {
+                            $type: "label",
+                            class: "mdc-floating-label",
+                            for: obj.id,
+                            $text: obj.label
+                        },
+                        {
+                            $type: "div",
+                            class: "mdc-notched-outline",
+                            $components:[
+                                {
+                                    $type: "svg",
+                                    $components:[
+                                        {
+                                            $type: "path",
+                                            class: "mdc-notched-outline__path"
+                                        }
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            $type: "div",
+                            class: "mdc-notched-outline__idle"
+                        }
+                    ]
+                    //onclick: obj.onclick
+                }
+            }
+
+            inputTextFieldStandart(obj){
+                return {
+                    $cell: true,
+                    $type: "div",
+                    class: "mdc-text-field text-field mdc-ripple-upgraded",
+                    $init: function(){
+                    //new mdc.mdc.notchedOutline.MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));
+                       new mdc.textField.MDCTextField.attachTo(this);
+                    },
+                    $components:[
+                        {
+                            $type: "input",
+                            type: "text",
+                            id: obj.id,
+                            class: "mdc-text-field__input",
+                            value: obj.value,
+                            onchange: obj.change
+                        },
+                        {
+                            $type: "label",
+                            class: "mdc-floating-label",
+                            for: obj.id,
+                            $text: obj.label
+                        },
+                        {
+                            $type: "div",
+                            class: "mdc-line-ripple"
+                        }
+                        
+                    ]
+                    //onclick: obj.onclick
+                }
+            }
+
+
         headerH3(headertype, label, cssclass) {
 
             return  {
@@ -479,6 +564,12 @@
                 $cell: true,
                 $type: "div",
                 class: "mdc-switch",
+                _switch: null,
+                id: obj.id,
+                $init: obj.init, 
+                //function(){
+                //     new mdc.switchControl.MDCSwitch(this);
+                // },
                 $components: [
                     {
                         $type: "div",
@@ -496,8 +587,8 @@
                                         $type: "input",
                                         type: "checkbox",
                                         class: "mdc-switch__native-control",
-                                        id: obj.id,
-                                        $init: obj.init,
+                                        
+                                        //$init: obj.init,
                                         //id: "basic-switch",
                                         onchange: obj.onchange,
                                         role: "switch"

public/vwf/view/lib/editorLive.css

@@ -67,7 +67,7 @@
         padding-left: 16px;
         overflow-x: hidden;
         overflow-y: auto;
-        background-color: rgba(236, 236, 236, 0.88);
+        background-color: rgba(240, 240, 240, 0.90);
         z-index: 3;
         position: fixed;
         width: 450px;

public/web/app.html

@@ -5,19 +5,29 @@
         </div>
     <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3">
       <div id="reflectorMenu" class="text-field-container">
-        <div id="reflectorSelect" class="mdc-text-field text-field mdc-text-field--upgraded">
-          <input id="currentReflector" type="text" class="mdc-text-field__input mdc-typography--headline6" style="width:250px;">
-          <label for="currentReflector" class="mdc-floating-label mdc-floating-label--float-above">Reflector</label>
-          <div class="mdc-line-ripple" style="transform-origin: 76px center 0px;"></div>
+        <div id="reflectorSelect" class="mdc-text-field mdc-text-field--outlined mdc-text-field--dense">
+          <input id="currentReflector" type="text" class="mdc-text-field__input mdc-typography--headline6" style="width:300px;">
+          <label for="currentReflector" class="mdc-floating-label">Reflector</label>
+          <div class="mdc-notched-outline">
+            <svg>
+              <path class="mdc-notched-outline__path"/>
+            </svg>
+          </div>
+          <div class="mdc-notched-outline__idle"></div>
         </div>
       </div>
     </div>
     <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
       <div id="dbMenu" class="text-field-container">
-        <div id="dbSelect" class="mdc-text-field text-field mdc-text-field--upgraded">
+        <div id="dbSelect" class="mdc-text-field mdc-text-field--outlined mdc-text-field--dense">
           <input id="currentdb" type="text" class="mdc-text-field__input mdc-typography--headline6" style="width:300px;">
           <label for="currentdb" class="mdc-floating-label mdc-floating-label--float-above">DB Host</label>
-          <div class="mdc-line-ripple" style="transform-origin: 76px center 0px;"></div>
+          <div class="mdc-notched-outline">
+            <svg>
+              <path class="mdc-notched-outline__path"/>
+            </svg>
+          </div>
+          <div class="mdc-notched-outline__idle"></div>
         </div>
       </div>
     </div>

public/web/index-app.js

@@ -307,23 +307,32 @@ class IndexApp {
                                         class: "mdc-typography--headline5",
                                         $text: "Login: "
                                     },
-                                    {
-                                        class: "mdc-text-field",
-                                        $type: "span",
-                                        $init: function() {
-                                            this._aliasField = new mdc.textField.MDCTextField(this);
-                                        },
-                                        $components: [
-                                            {
-                                                class: "mdc-text-field__input prop-text-field-input mdc-typography--headline6",
-                                                $type: "input",
-                                                type: "text",
-                                                value: this._alias
-                                            }
-
-                                        ]
-
-                                    }
+                                    window._app.widgets.inputTextFieldOutlined({
+                                        "id": 'aliasInput',
+                                        "label": "Login",
+                                        "value": this._alias,
+                                        "type": "text",
+                                        "init": function() {
+                                                    this._aliasField = new mdc.textField.MDCTextField(this);
+                                                }
+                                    }),
+                                    // {
+                                    //     class: "mdc-text-field",
+                                    //     $type: "span",
+                                    //     $init: function() {
+                                    //         this._aliasField = new mdc.textField.MDCTextField(this);
+                                    //     },
+                                    //     $components: [
+                                    //         {
+                                    //             class: "mdc-text-field__input prop-text-field-input mdc-typography--headline6",
+                                    //             $type: "input",
+                                    //             type: "text",
+                                    //             value: this._alias
+                                    //         }
+
+                                    //     ]
+
+                                    // }
 
                                 ]
                             },
@@ -336,23 +345,32 @@ class IndexApp {
                                         class: "mdc-typography--headline5",
                                         $text: "Password: "
                                     },
-                                    {
-                                        class: "mdc-text-field",
-                                        $type: "span",
-                                        $init: function() {
+                                    window._app.widgets.inputTextFieldOutlined({
+                                        "id": 'passwordInput',
+                                        "label": "Password",
+                                        "value": this._pass,
+                                        "type": "password",
+                                        "init": function() {
                                             this._passField = new mdc.textField.MDCTextField(this);
-                                        },
-                                        $components: [
-                                            {
-                                                class: "mdc-text-field__input prop-text-field-input mdc-typography--headline6",
-                                                $type: "input",
-                                                type: "password",
-                                                value: this._pass
-                                            }
-
-                                        ]
-
-                                    }
+                                        }
+                                    }),
+                                    // {
+                                    //     class: "mdc-text-field",
+                                    //     $type: "span",
+                                    //     $init: function() {
+                                    //         this._passField = new mdc.textField.MDCTextField(this);
+                                    //     },
+                                    //     $components: [
+                                    //         {
+                                    //             class: "mdc-text-field__input prop-text-field-input mdc-typography--headline6",
+                                    //             $type: "input",
+                                    //             type: "password",
+                                    //             value: this._pass
+                                    //         }
+
+                                    //     ]
+
+                                    // }
 
                                 ]
                             },