Design fixes for group generators and form options.

appleple · Oct 3, 2024 · f4e47e5 · f4e47e5
1 parent 7d89a37
commit f4e47e5
Show file tree

Hide file tree

Showing 41 changed files with 6,870 additions and 6,495 deletions.
diff --git a/css/acms-admin-new.css → acmscss/acms-admin-new.css b/css/acms-admin-new.css → acmscss/acms-admin-new.css
diff --git a/css/acms-admin.css → acmscss/acms-admin.css b/css/acms-admin.css → acmscss/acms-admin.css
diff --git a/src/css/custom-field-maker.css → css/custom-field-maker.css b/src/css/custom-field-maker.css → css/custom-field-maker.css
@@ -1,3 +1,145 @@
+.customFieldContainer {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 64px;
+}
+
+.customFieldContainer h2 {
+  color: #333;
+  margin: 0;
+  font-size: 20px;
+  margin-bottom: 1em;
+}
+
+/* ジェネレーター：全体
+-------------------------------------- */
+.customFieldFunction {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 24px;
+  background: #fff;
+}
+
+.customFieldFunction select {
+  min-height: 26px;
+  padding: 4px;
+  line-height: 1.5;
+  font-size: 14px;
+}
+
+/* ジェネレーター：フィールドグループ、ユニットグループ
+-------------------------------------- */
+.customFieldGeneratorGroup {
+  display: grid;
+  row-gap: 24px;
+  column-gap: 24px;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-areas:
+    "areaTitle  areaVal ."
+    "areaButton .       .";
+}
+.customFieldGeneratorGroup.-openGroup {
+  grid-template-areas: "areaTitle  areaVal .";
+}
+.customFieldGeneratorGroup dd {
+  margin: 0;
+}
+.customFieldGeneratorGroupTitle {
+  grid-area: areaTitle;
+}
+.customFieldGeneratorGroupVal {
+  grid-area: areaVal;
+}
+.customFieldGeneratorGroupButton {
+  grid-area: areaButton;
+}
+
+/* ジェネレーター：ベーシック
+-------------------------------------- */
+.customFieldGeneratorBasic {
+  display: grid;
+  row-gap: 24px;
+  column-gap: 24px;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-areas:
+    "areaInput   areaTitle       areaField"
+    "areaTooltip areaPlaceholder .";
+}
+.customFieldGeneratorBasic label,
+.customFieldGeneratorBasic dt,
+.customFieldGeneratorGroup label,
+.customFieldGeneratorGroup dt {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  padding-bottom: 8px;
+}
+.customFieldGeneratorBasicInput {
+  grid-area: areaInput;
+}
+.customFieldGeneratorBasicTitle {
+  grid-area: areaTitle;
+}
+.customFieldGeneratorBasicField {
+  grid-area: areaField;
+}
+.customFieldGeneratorBasicTooltip {
+  grid-area: areaTooltip;
+}
+.customFieldGeneratorBasicPlaceholder {
+  grid-area: areaPlaceholder;
+}
+
+/* ジェネレーター：バリデーター
+-------------------------------------- */
+.customFieldValidatorLabel {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.customFieldValidatorToggle {
+  display: inline-block;
+  width: 5px;
+  height: 5px;
+  border-right: 2px solid #333;
+  border-bottom: 2px solid #333;
+  transition: transform;
+  transform: rotateZ(-45deg);
+  transform-origin: center center;
+}
+.customFieldValidatorToggle.-open {
+  transform: rotateZ(-315deg);
+}
+
+/* アコーディオン
+-------------------------------------- */
+.customFieldAccordionContent {
+  overflow: hidden;
+  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
+  opacity: 0;
+}
+
+.customFieldAccordionContent.-open {
+  opacity: 1;
+}
+
+/* ナビゲーター：コード操作
+-------------------------------------- */
+.customFieldNavigatorCode {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 20px;
+}
+.customFieldNavigatorCodeButtonList {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+/* ボタン
+-------------------------------------- */
 .customFieldCopied {
   position: absolute;
   bottom: -40px;
@@ -19,13 +161,9 @@
 
 .hljs {
   border-radius: 5px;
-}
-
-.customFieldFunction {
-  margin-bottom: 20px;
-  padding: 20px 9px 10px;
-  border: 1px solid #e8e8e8;
-  background: #fff;
+  padding: 20px;
+  background-color: #F0F0F0;
+  min-height: 19.391px;
 }
 
 .customFieldCopied:after {
@@ -71,23 +209,29 @@
 }
 
 .customFieldValidatorArea {
+  display: grid;
+  gap: 16px;
+  grid-template-colmuns: repeat(1, minmax(0, 1fr));
+  margin-top: 8px;
   background-color: #F7F7F7;
-  border: 1px solid #cccccc;
-  padding: 10px;
+  padding: 20px;
 }
 
 .customFieldValidatorArea .acms-admin-icon-tooltip {
   margin-left: 10px;
 }
 
+.customFieldBold {
+  margin-bottom: 10px;
+}
 .customFieldBold .acms-admin-icon-tooltip {
   margin-left: 10px;
 }
 
 .customFieldOptionTable {
   width: auto !important;
-  border-top: 1px solid #ccc;
-  border-bottom: 1px solid #ccc;
+  /* border-top: 1px solid #ccc;
+  border-bottom: 1px solid #ccc; */
 }
 
 .customFieldOptionTable th,
@@ -111,7 +255,7 @@
 }
 
 .customFieldOptionTable tr {
-  border-bottom: 1px solid #cccccc;
+  /* border-bottom: 1px solid #cccccc; */
 }
 
 .customFieldOptionTable th:first-child,

diff --git a/dist/bundle.js b/dist/bundle.js
diff --git a/example/index.html b/example/index.html
@@ -5,8 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css">
-    <link rel="stylesheet" href="../css/acms-admin.css">
-    <link rel="stylesheet" href="../css/acms-admin-new.css">
+    <link rel="stylesheet" href="../acmscss/acms-admin.css">
+    <link rel="stylesheet" href="../acmscss/acms-admin-new.css">
+    <link rel="stylesheet" href="../css/custom-field-maker.css">
     <title>カスタムフィールドメーカー</title>
     <style>
     #app {

diff --git a/example/index.js b/example/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import CustomFieldMaker from '../src';
-import '../src/css/custom-field-maker.css';
+import '../css/custom-field-maker.css';
 
 const container = document.getElementById('app');
 const root = createRoot(container);

diff --git a/json/input-types.json b/json/input-types.json
@@ -1,51 +1,33 @@
-{
-  "text": {
-    "label": "テキスト",
-    "subTypes": [
-      { "value": "text", "label": "--" },
-      { "value": "tel", "label": "電話" },
+[
+  {
+    "テキスト": [
+      { "value": "text", "label": "テキスト" },
+      { "value": "tel", "label": "電話番号" },
       { "value": "number", "label": "数値" },
-      { "value": "email", "label": "メール" },
+      { "value": "email", "label": "メールアドレス" },
       { "value": "password", "label": "パスワード" }
     ]
   },
-  "textarea": {
-    "label": "テキストエリア",
-    "subTypes": [
-      { "value": "textarea", "label": "--" },
-      { "value": "lite-editor", "label": "ライトエディター" }
+  {
+    "テキストエリア": [
+      { "value": "textarea", "label": "テキストエリア" },
+      { "value": "liteEditor", "label": "ライトエディター" },
+      { "value": "richEditor", "label": "リッチエディター" }
     ]
   },
-  "checkbox": {
-    "label": "チェックボックス",
-    "subTypes": []
-  },
-  "selectbox": {
-    "label": "セレクトボックス",
-    "subTypes": []
-  },
-  "radioButton": {
-    "label": "ラジオボタン",
-    "subTypes": []
-  },
-  "media": {
-    "label": "メディア",
-    "subTypes": []
-  },
-  "image": {
-    "label": "画像",
-    "subTypes": []
-  },
-  "file": {
-    "label": "ファイル",
-    "subTypes": []
-  },
-  "richEditor": {
-    "label": "リッチエディター",
-    "subTypes": []
+  {
+    "選択": [
+      { "value": "checkbox", "label": "チェックボックス" },
+      { "value": "selectbox", "label": "セレクトボックス" },
+      { "value": "radioButton", "label": "ラジオボタン" }
+    ]
   },
-  "table": {
-    "label": "テーブル",
-    "subTypes": []
+  {
+    "その他": [
+      { "value": "media", "label": "メディア" },
+      { "value": "image", "label": "画像" },
+      { "value": "file", "label": "ファイル" },
+      { "value": "table", "label": "テーブル" }
+    ]
   }
-}
+]
diff --git a/lib/components/genelator/Field.js b/lib/components/genelator/Field.js
@@ -10,7 +10,7 @@ var _ConverterModal = require('./base/ConverterModal');
 var _Alert = require('./base/Alert');
 var _Basic = require('./base/Basic');
 var _Snippet = require('./base/Snippet');
-var _Maker = require('./base/Maker');
+var _Operator = require('./base/Operator');
 var _Validator = require('./base/Validator');
 var _OptionItem = require('./base/OptionItem');
 var _MediaOption = require('./base/MediaOption');
@@ -45,7 +45,6 @@ const defaultProps = {
   title: '',
   name: '',
   type: 'text',
-  subType: '',
   tooltip: '',
   placeholder: '',
   alert: false,
@@ -122,22 +121,15 @@ function Field() {
   return /*#__PURE__*/ _react.default.createElement(
     'div',
     null,
-    /*#__PURE__*/ _react.default.createElement(
-      'h2',
-      {
-        className: 'acms-admin-admin-title2',
-      },
-      '\u30AB\u30B9\u30BF\u30E0\u30D5\u30A3\u30FC\u30EB\u30C9'
-    ),
+    /*#__PURE__*/ _react.default.createElement(_ConverterModal.ConverterModal, {
+      field: field,
+      setField: setField,
+    }),
     /*#__PURE__*/ _react.default.createElement(
       'div',
       {
         className: 'customFieldFunction',
       },
-      /*#__PURE__*/ _react.default.createElement(_ConverterModal.ConverterModal, {
-        field: field,
-        setField: setField,
-      }),
       /*#__PURE__*/ _react.default.createElement(_Alert.Alert, {
         field: field,
         setField: setField,
@@ -231,7 +223,7 @@ function Field() {
           field: field,
           setField: setField,
         }),
-      /*#__PURE__*/ _react.default.createElement(_Maker.Maker, {
+      /*#__PURE__*/ _react.default.createElement(_Operator.Operator, {
         setField: setField,
         onSubmit: onSubmit,
       })