Working on removing Material Design 2

bbalganjjm · Jun 25, 2024 · a8c95e6 · a8c95e6
1 parent 0d37ac0
commit a8c95e6
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 41 deletions.
diff --git a/src/main/resources/static/html/com/app/sample/type0201.html b/src/main/resources/static/html/com/app/sample/type0201.html
@@ -65,7 +65,10 @@
                 </select></td>
                 <td rowspan="2" style="text-align: center;"><input id="age" type="text" data-validate='[["required"], ["integer"]]'></td>
                 <td><input id="registered" type="text" data-format='[["date", 8, "date"]]' data-validate='[["required"]]'></td>
-                <td style="text-align: center;"><input id="isActive" type="checkbox"></td>
+                <td style="text-align: center; line-height: 0;"><label class="toggle-switch">
+                    <input id="isActive" type="checkbox">
+                    <span class="slider"></span>
+                </label></td>
             </tr>
             <tr>
                 <td><input id="about" type="text"></td>
@@ -96,17 +99,6 @@
         checkAllTarget : ".checkAllTarget",
         scrollPaging : {
             size : 15
-        },
-        rowHandlerBeforeBind : function(rowIdx, rowEle, rowData) {
-            // 선택한 날짜가 오늘 날짜보다 크면 #isActive 요소 체크, 아니면 체크 해제.
-            // rowHandlerBeforeBind는 행에 데이터가 바인딩되기 전에 실행되는 핸들러 함수 이므로 바인딩될 데이터의 값을 바꾸어 주면 바뀐 데이터로 바인딩 됨.
-            if(!N.string.isEmpty(rowData.registered)) {
-                if(N.date.diff((new Date()).formatDate("Ymd"), rowData.registered) > 0) {
-                    rowData.isActive = "Y";
-                } else {
-                    rowData.isActive = "N";
-                }
-            }
         }
     },
     "p.popup.dept" : {
@@ -193,7 +185,7 @@
     "e.registered.onSelect" : function(e, inputEle, selDate, isMonthonly, idx) {
         e.preventDefault();
         // 선택한 날짜가 오늘 날짜보다 크면 #isActive 요소 체크, 아니면 체크 해제.
-        //  - 입력 요소를 jQuery val 메서드로 직접 다루지 말고 반드시 바인딩되어 있는 컴포넌트의 val 메서드로 값을 세팅해 주세요.
+        //  - 입력 요소를 jQuery val 메서드로 직접 다루지 말고 반드시 컴포넌트 인스턴스의 val 메서드로 값을 입력해주세요.
         //  - 입력 요소를 jQuery val 메서드로 직접 다루면 컴포넌트 내부 데이터셋과 동기화되지 않습니다.
         if(N.date.diff((new Date()).formatDate("Ymd"), selDate.obj.formatDate(selDate.format)) > 0) {
             cont["p.grid.master"].val(idx, "isActive", "Y");

diff --git a/src/main/resources/static/html/com/app/sample/type0601.html b/src/main/resources/static/html/com/app/sample/type0601.html
@@ -87,7 +87,10 @@
                         </select></td>
                         <td style="text-align: center;"><input id="age" type="text" data-validate='[["required"],["integer"]]'></td>
                         <td><input id="registered" type="text" data-format='[["date",8,"date"]]' data-validate='[["required"]]'></td>
-                        <td style="text-align: center;"><input id="isActive" type="checkbox"></td>
+                        <td style="text-align: center; line-height: 0;"><label class="toggle-switch">
+                            <input id="isActive" type="checkbox">
+                            <span class="slider"></span>
+                        </label></td>
                         <td><textarea id="about" style="min-width: 500px; min-height: 100px;"></textarea></td>
                         <td><textarea id="greeting"></textarea></td>
                     </tr>

diff --git a/src/main/resources/static/js/natural_js/css/natural.ui.css b/src/main/resources/static/js/natural_js/css/natural.ui.css
@@ -1822,65 +1822,76 @@ a.btn_elevated__, input[type='button'].btn_elevated__, button.btn_elevated__ {
 }
 
 /* Checkbox toggle switch */
-/* HTML Template
-<label class="toggle-switch">
+/**
+HTML Template & variables
+<label class="toggle-switch" style="
+    --njs-toggle-switch-height: ${height};
+    --njs-toggle-switch-width: ${width};
+    --njs-toggle-switch-padding: ${padding};
+    --njs-toggle-switch-height: ${height};
+    --njs-toggle-switch-on-content: ${on-content};
+    --njs-toggle-switch-off-content: ${off-content};
+    --njs-toggle-switch-font-size: ${font-size};
+    ">
     <input id="${id}" type="checkbox">
     <span class="slider"></span>
 </label>
  */
 .toggle-switch {
-    --njs-toggle-switch-height: 26px;
-    position: relative;
+    --njs-toggle-switch-height: 24px;
+    --njs-toggle-switch-width: calc(var(--njs-toggle-switch-height) * 2);
+    --njs-toggle-switch-padding: calc(var(--njs-toggle-switch-height) / 7);
+    --njs-toggle-switch-on-content: "ON";
+    --njs-toggle-switch-off-content: "OFF";
     display: inline-block;
-    width: calc(var(--njs-toggle-switch-height) * 2);
+    position: relative;
     height: var(--njs-toggle-switch-height);
+    width: var(--njs-toggle-switch-width);
 }
 .toggle-switch input {
     display: none;
 }
 .toggle-switch .slider {
-    position: absolute;
+    display: flex;
+    height: var(--njs-toggle-switch-height);
+    padding: var(--njs-toggle-switch-padding);
     cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
     background-color: var(--md-sys-color-primary-container);
-    transition: var(--njs-motion-duration-fast);
+    transition: left var(--njs-motion-duration-fast) ease, background-color var(--njs-motion-duration-fast) ease;
     border-radius: 999999px;
 }
 .toggle-switch .slider:before {
-    position: absolute;
     content: "";
-    height: calc(var(--njs-toggle-switch-height) - (var(--njs-toggle-switch-height) / 4));
-    width: calc(var(--njs-toggle-switch-height) - (var(--njs-toggle-switch-height) / 4));
-    left: calc(((var(--njs-toggle-switch-height) / 4) / 2) + 1px);
-    bottom: calc((var(--njs-toggle-switch-height) / 4) / 2);
+    position: absolute;
+    display: inline-block;
+    height: calc(var(--njs-toggle-switch-height) - (var(--njs-toggle-switch-padding) * 2));
+    width: calc(var(--njs-toggle-switch-height) - (var(--njs-toggle-switch-padding) * 2));
     background-color: var(--md-sys-color-inverse-on-surface);
     transition: var(--njs-motion-duration-normal);
+    left: var(--njs-toggle-switch-padding);
     border-radius: 999999px;
 }
 .toggle-switch input:checked+.slider {
     background-color: var(--md-sys-color-primary);
 }
-.toggle-switch input:focus+.slider {
-    box-shadow: 0 0 1px var(--md-sys-color-shadow);
-}
 .toggle-switch input:checked+.slider:before {
-    transform: translateX(calc(var(--njs-toggle-switch-height) - 1px));
+    left: calc(var(--njs-toggle-switch-width) - (var(--njs-toggle-switch-height) - var(--njs-toggle-switch-padding)));
 }
 .toggle-switch .slider::after {
-    content: "OFF";
+    content: var(--njs-toggle-switch-off-content);
     display: inline-block;
     position: absolute;
-    top: 50%;
-    left: calc(100% - (var(--njs-toggle-switch-height) - 1px));
-    transform: translateY(-50%);
-    font-size: 75%;
+    text-align: center;
+    line-height: calc(var(--njs-toggle-switch-height) - (var(--njs-toggle-switch-padding) * 2));
+    height: calc(var(--njs-toggle-switch-height) - (var(--njs-toggle-switch-padding) * 2));
+    width: calc(var(--njs-toggle-switch-width) - (var(--njs-toggle-switch-height) + (var(--njs-toggle-switch-padding) * 2)));
+    right: calc(var(--njs-toggle-switch-padding) * 2);
     color: var(--md-sys-color-on-primary-container);
+    white-space: nowrap;
+    font-size: var(--njs-toggle-switch-font-size, calc((var(--njs-toggle-switch-height) / 2) - (var(--njs-toggle-switch-padding) / 1.3)));
 }
 .toggle-switch input:checked+.slider::after {
-    content: "ON";
-    left: calc((var(--njs-toggle-switch-height) / 4) + ((var(--njs-toggle-switch-height) / 4) / 2));
+    content: var(--njs-toggle-switch-on-content);
+    left: calc(var(--njs-toggle-switch-padding) * 2);
     color: var(--md-sys-color-on-primary);
 }