Update usage of lively native checkboxes

engageLively · Dec 4, 2023 · e9d4f7e · e9d4f7e
1 parent 9eadb89
commit e9d4f7e
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 36 deletions.
diff --git a/studio/controls/layout.cp.js b/studio/controls/layout.cp.js
@@ -1,19 +1,8 @@
 import { component } from 'lively.morphic/components/core.js';
 import { MiniLayoutPreview, LayoutControl, MiniLayoutPreviewActive, AutoLayoutAlignmentFlap } from 'lively.ide/studio/controls/layout.cp.js';
 import { Color, pt } from 'lively.graphics';
-import { GalyleoNumberInput, GalyleoDropDownList, GalyleoPropertyLabel, GalyleoAddButton, GalyleoAddButtonHovered, GalyleoDropDown } from '../shared.cp.js';
+import { GalyleoNumberInput, GalyleoDropDownList, GalyleoPropertyLabel, GalyleoAddButton, GalyleoAddButtonHovered, GalyleoDropDown, GalyleoCheckboxChecked, GalyleoCheckboxUnchecked } from '../shared.cp.js';
 import { GalyleoPropertySection, GalyleoPropertySectionInactive } from './section.cp.js';
-import { CheckboxActive, CheckboxInactive } from 'lively.ide/studio/shared.cp.js';
-
-const GalyleoCheckboxActive = component(CheckboxActive, {
-  name: 'galyleo/checkbox/active',
-  fill: Color.rgb(245, 127, 23)
-});
-
-const GalyleoCheckboxInactive = component(CheckboxInactive, {
-  name: 'galyleo/checkbox/inactive',
-  borderColor: Color.black
-});
 
 // GalyleoMiniLayoutPreview.openInWorld()
 const GalyleoMiniLayoutPreview = component(MiniLayoutPreview, {
@@ -137,18 +126,23 @@ const GalyleoLayoutControl = component(LayoutControl, {
       ]
     },
     {
-      name: 'wrap submorphs checkbox',
-      activeCheckboxComponent: GalyleoCheckboxActive,
-      inactiveCheckboxComponent: GalyleoCheckboxInactive,
-      submorphs: [
-        {
-          name: 'checkbox',
-          master: GalyleoCheckboxActive
-        },
-        {
-          name: 'prop label',
-          fontColor: Color.rgb(66, 73, 73)
-        }]
+      name: 'wrap checkbox wrapper',
+      submorphs: [{
+        name: 'wrap submorphs checkbox',
+        submorphs: [
+          {
+            name: 'checkbox',
+            viewModel: {
+              checkedCheckboxComponent: GalyleoCheckboxChecked,
+              uncheckedCheckboxComponent: GalyleoCheckboxUnchecked
+            }
+          },
+          {
+            name: 'label',
+            fontColor: Color.rgb(66, 73, 73)
+          }
+        ]
+      }]
     }]
 });
 

diff --git a/studio/controls/popups.cp.js b/studio/controls/popups.cp.js
@@ -3,7 +3,7 @@ import { component, part, add, without } from 'lively.morphic/components/core.js
 import { Color } from 'lively.graphics';
 import { TilingLayout } from 'lively.morphic';
 import { rect } from 'lively.graphics/geometry-2d.js';
-import { GalyleoNumberInput, CloseButtonFloat, WindowHeader, GalyleoDropDown, GalyleoColorInput } from '../shared.cp.js';
+import { GalyleoNumberInput, CloseButtonFloat, WindowHeader, GalyleoDropDown, GalyleoColorInput, GalyleoCheckboxChecked, GalyleoCheckboxUnchecked } from '../shared.cp.js';
 
 // part(GalyleoShadowPopup).openInWorld()
 const GalyleoShadowPopup = component(ShadowPopup, {
@@ -41,8 +41,18 @@ const GalyleoShadowPopup = component(ShadowPopup, {
         {
           name: 'h wrapper',
           submorphs: [
-            { name: 'fast shadow checkbox', fill: Color.orange },
-            { name: 'prop label', fontColor: Color.rgb(68, 68, 68) }
+            {
+              name: 'fast shadow checkbox',
+              submorphs: [
+                {name: 'checkbox',
+                viewModel: {
+                checkedCheckboxComponent: GalyleoCheckboxChecked,
+                uncheckedCheckboxComponent: GalyleoCheckboxUnchecked
+              }
+            }, {
+              name: 'label', fontColor: Color.rgb(68, 68, 68)
+            }]
+            },
           ]
         }
       ]

diff --git a/studio/int/jp/side-bar.cp.js b/studio/int/jp/side-bar.cp.js
@@ -163,9 +163,14 @@ const GalyleoSideBarJp = component(GalyleoSideBar, {
                 ]
               },
               {
-                name: 'wrap submorphs checkbox',
+                name: 'wrap checkbox wrapper',
                 submorphs: [
-                  { name: 'prop label', textAndAttributes: ['副要素の折り返し', null] }
+                  {
+                    name: 'wrap submorphs checkbox',
+                    viewModel: {
+                      label: '副要素の折り返し'
+                    }
+                  } 
                 ]
               }
             ]

diff --git a/studio/shared.cp.js b/studio/shared.cp.js
@@ -11,9 +11,20 @@ import { ColorInput } from 'lively.ide/styling/color-picker.cp.js';
 import { ConfirmPromptModel } from 'lively.components/prompts.cp.js';
 import { ButtonModel } from 'lively.components/buttons.js';
 import { projectAsset } from 'lively.project/helpers.js';
+import { CheckboxChecked, CheckboxUnchecked } from 'lively.components/checkbox.cp.js';
 
 const galyleoFont = 'Noto Sans';
 
+const GalyleoCheckboxChecked = component(CheckboxChecked, {
+  name: 'galyleo/checkbox/active',
+  fill: Color.rgb(245, 127, 23)
+});
+
+const GalyleoCheckboxUnchecked = component(CheckboxUnchecked, {
+  name: 'galyleo/checkbox/inactive',
+  borderColor: Color.black
+});
+
 export class SelectableEntryModel extends ViewModel {
   static wrap (entryName, opts) {
     const entry = part(SelectableEntry, { // eslint-disable-line no-use-before-define
@@ -100,7 +111,7 @@ export class SelectableEntryModel extends ViewModel {
       : SelectableEntry; // eslint-disable-line no-use-before-define
     entryName.value = this.entryName;
     // dragControl.draggable = this.orderMode;
-    checkbox.master = this.isSelected ? CheckboxChecked : CheckboxUnchecked; // eslint-disable-line no-use-before-define
+    checkbox.master = this.isSelected ? GalyleoEntryCheckboxChecked : GalyleoEntryCheckboxUnchecked; // eslint-disable-line no-use-before-define
     const updateElements = () => {
       if (checkbox.visible !== !this.orderMode) {
         checkbox.visible = !this.orderMode;
@@ -823,7 +834,7 @@ const PromptButton = component(PromptButtonAuto, {
   master: { auto: PromptButtonAuto, click: PromptButtonClick }
 });
 
-const CheckboxChecked = component({
+const GalyleoEntryCheckboxChecked = component({
   name: 'checkbox/checked',
   borderColor: Color.rgb(127, 140, 141),
   borderRadius: 2,
@@ -860,7 +871,7 @@ const CheckboxChecked = component({
 });
 
 // CheckboxUnchecked.openInWorld()
-const CheckboxUnchecked = component({
+const GalyleoEntryCheckboxUnchecked = component({
   name: 'checkbox/unchecked',
   borderColor: Color.rgb(127, 140, 141),
   borderRadius: 2,
@@ -932,7 +943,7 @@ const SelectableEntry = component({
     reactsToPointer: false,
     padding: rect(3, 5, 0, 0),
     textAndAttributes: Icon.textAttribute('bars')
-  }, part(CheckboxChecked, { name: 'checkbox' }), {
+  }, part(GalyleoEntryCheckboxChecked, { name: 'checkbox' }), {
     type: Label,
     name: 'entry name',
     reactsToPointer: false,
@@ -1135,8 +1146,8 @@ const CloseButtonFloat = component({
 });
 
 export {
-  GalyleoWindow, GalyleoList, MenuBarButton, PromptButton, CheckboxChecked,
-  CheckboxUnchecked, SelectableEntry, SelectableEntryDragged, GalyleoDropDownList, GalyleoDropDownError, GalyleoTextInput,
+  GalyleoWindow, GalyleoList, MenuBarButton, PromptButton, GalyleoCheckboxChecked,
+  GalyleoCheckboxUnchecked, SelectableEntry, SelectableEntryDragged, GalyleoDropDownList, GalyleoDropDownError, GalyleoTextInput,
   TableEntry, TableEntryEdit, TableEntryVisual, GalyleoDropDown, GalyleoNumberInput, GalyleoColorInput, GalyleoAddButtonActive, GalyleoDropDownAuto,
   GalyleoAddButton, GalyleoPropertyLabel, GalyleoPropertyLabelActive, GalyleoPropertyLabelHovered, GalyleoAddButtonDefault, GalyleoAddButtonHovered, GalyleoConfirmPrompt, WindowHeader, CloseButtonFloat, galyleoFont, GalyleoEnumSelector
 };
diff --git a/studio/side-bar.cp.js b/studio/side-bar.cp.js
@@ -6,7 +6,7 @@ import {
 } from 'lively.morphic';
 import { component, ViewModel, part } from 'lively.morphic/components/core.js';
 import { arr } from 'lively.lang';
-import { GalyleoColorInput, TableEntryMorph, MenuBarButton, GalyleoDropDownList, GalyleoAddButtonActive, GalyleoDropDownListModel, PromptButton, GalyleoList, GalyleoAddButtonHovered, GalyleoAddButtonDefault, GalyleoAddButton, TableEntry, galyleoFont } from './shared.cp.js';
+import { GalyleoColorInput, TableEntryMorph, MenuBarButton, GalyleoDropDownList, GalyleoAddButtonActive, GalyleoDropDownListModel, PromptButton, GalyleoList, GalyleoAddButtonHovered, GalyleoAddButtonDefault, GalyleoAddButton, TableEntry, galyleoFont, GalyleoCheckboxChecked, GalyleoCheckboxUnchecked } from './shared.cp.js';
 import { ViewCreatorPrompt } from './view-creator.cp.js';
 import { ChartBuilder } from './chart-creator.cp.js';
 import { FilterBuilder, FilterEditor } from './filter-creator.cp.js';
@@ -570,6 +570,23 @@ const GalyleoPropertiesPanel = component(PropertiesPanel, {
             activeComponent: GalyleoMiniLayoutPreviewActive,
             inactiveComponent: GalyleoMiniLayoutPreview
           }]
+        },
+        {
+          name: 'wrap checkbox wrapper',
+          submorphs: [
+            {
+              name: 'wrap submorphs checkbox',
+              submorphs: [
+                {
+                  name: 'checkbox',
+                  viewModel: {
+                    checkedCheckboxComponent: GalyleoCheckboxChecked,
+                    uncheckedCheckboxComponent: GalyleoCheckboxUnchecked
+                  }
+                }
+              ]
+            }
+          ]
         }
       ]
     },