diff --git a/studio/controls/layout.cp.js b/studio/controls/layout.cp.js index ebb3548..42812e2 100644 --- 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 index 2322f55..ee0678e 100644 --- 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 index 701b5b7..625982f 100644 --- 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 index 4d8db3c..2f139c9 100644 --- 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 index 1b15128..73b723a 100644 --- 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 + } + } + ] + } + ] } ] },