workin on skin installation, uninstallation

src/Toplo/BlElement.extension.st

@@ -19,7 +19,8 @@ BlElement >> dispatchLookEvent: anEvent [
 BlElement >> dispatchSkinChangedEvent [
 
 	self dispatchEvent: ToElementSkinChangedEvent new.
-	self childrenDo: [ :child | child dispatchSkinChangedEvent ]
+	self childrenDo: [ :child | child dispatchSkinChangedEvent ].
+
 
 ]
 

src/Toplo/TToLabeledIcon.trait.st

@@ -69,7 +69,6 @@ TToLabeledIcon >> labelFirst: aBoolean [
 { #category : #'t - labeled icon' }
 TToLabeledIcon >> labelText: aText [
 
-	self label ifNotNil: [ :lab | ^ lab text: aText ].
 	self label: (ToLabel text: aText)
 ]
 

src/Toplo/TToSkinable.trait.st

@@ -46,6 +46,7 @@ TToSkinable >> withSkin: aSkin [
 	Toplo useLookAndFeel ifTrue: [ ^ self ].
 	privateSkin ifNotNil: [
 		self addEventHandler: privateSkin.
+		self requestLayout.
 		self dispatchSkinChangedEvent ]
 ]
 

src/Toplo/ToButtonImageSkin.class.st

@@ -23,8 +23,8 @@ ToButtonImageSkin >> buttonType: aButtonType [
 ToButtonImageSkin >> onSkinInstalledIn: anElement [
 
 	| iconLook |
+	super onSkinInstalledIn: anElement.
 	iconLook := self buttonType iconLookIn: anElement.
 	self addLook: iconLook.
-	super onSkinInstalledIn: anElement
 
 ]

src/Toplo/ToButtonLabelSkin.class.st

@@ -24,12 +24,13 @@ ToButtonLabelSkin >> onSkinInstalledIn: anElement [
 
 	| labelLook attrBuilder |
 
+	super onSkinInstalledIn: anElement.
 	attrBuilder := self textAttributesBuilderFromElement: anElement.
 	labelLook := self buttonType labelLookIn: anElement.
 	labelLook attrBuilder: attrBuilder.
 	self addLook: labelLook.
 
-	super onSkinInstalledIn: anElement
+
 
 ]
 

src/Toplo/ToButtonMenuItem.class.st

@@ -21,6 +21,12 @@ ToButtonMenuItem >> defaultDresser [
 	^ ToBasicMenuItemDresser next: (ToButtonMenuItemDresser new)
 ]
 
+{ #category : #'t - skin accessing' }
+ToButtonMenuItem >> defaultSkin [ 
+
+	^ ToButtonSkin new
+]
+
 { #category : #initialization }
 ToButtonMenuItem >> initialize [ 
 

src/Toplo/ToButtonSkin.class.st

@@ -7,6 +7,12 @@ Class {
 	#category : #'Toplo-Widget-Button-Skins'
 }
 
+{ #category : #'accessing - structure variables' }
+ToButtonSkin class >> type: aButtonType [
+
+	^ self new type: aButtonType 
+]
+
 { #category : #'api - install/uninstall  hook' }
 ToButtonSkin >> buttonIconChanged: anEvent [
 
@@ -56,8 +62,8 @@ ToButtonSkin >> eventsToHandle [
 ToButtonSkin >> onSkinInstalledIn: anElement [
 
 	" must send to super ** after ** the look is initialize from type "
+	super onSkinInstalledIn: anElement.
 	self type onSkinInstalled: self in: anElement.
-	super onSkinInstalledIn: anElement
 
 ]
 

src/Toplo/ToCheckableSkin.class.st

@@ -25,6 +25,7 @@ ToCheckableSkin >> indeterminateImageIn: anElement [
 { #category : #'api - install/uninstall  hook' }
 ToCheckableSkin >> onSkinInstalledIn: anElement [
 
+	super onSkinInstalledIn: anElement.
 	anElement spacingWidth: anElement toTheme paddingContentHorizontal / 2.
 	anElement icon: (ToImage inner: (anElement isChecked
 				  ifTrue: [ self checkedImageIn: anElement ]
@@ -35,7 +36,7 @@ ToCheckableSkin >> onSkinInstalledIn: anElement [
 			 uncheckedImage: (self uncheckedImageIn: anElement);
 			 indeterminateImage: (self indeterminateImageIn: anElement);
 			 yourself).
-	super onSkinInstalledIn: anElement
+
 ]
 
 { #category : #accessing }

src/Toplo/ToCheckboxImageSkin.class.st

@@ -9,6 +9,7 @@ ToCheckboxImageSkin >> onSkinInstalledIn: anElement [
 
 	| borderLook |
 
+	super onSkinInstalledIn: anElement.
 	anElement geometry: (BlRoundedRectangleGeometry cornerRadius: 3).
 	borderLook := ToBorderLook new
 				initialPaint: anElement toTheme colorBorder;
@@ -17,6 +18,6 @@ ToCheckboxImageSkin >> onSkinInstalledIn: anElement [
 				width: 1.
 	self addLook: borderLook.
 
-	super onSkinInstalledIn: anElement
+
 
 ]

src/Toplo/ToImage.class.st

@@ -43,7 +43,8 @@ ToImage >> initialize [
 	super initialize.
 
 	self fitContent.
-	self innerImage: self defaultInnerImage.
+	innerImage := self defaultInnerImage.
+	self addChild: innerImage.
 	" I ** must be ** considered as a leaf of a UI element tree. Otherwise, click may not work on me. This is why my children are not allowed to manage mouse events. Related to https://github.com/plantec/Toplo/issues/41"
 	self preventChildrenMouseEvents.
 	self whenInnerImageChangedDo: [ :new :prev |

src/Toplo/ToRadioImageSkin.class.st

@@ -9,6 +9,7 @@ ToRadioImageSkin >> onSkinInstalledIn: anElement [
 
 	| borderLook |
 
+	super onSkinInstalledIn: anElement.
 	anElement geometry: (BlCircleGeometry new).
 	borderLook := ToBorderLook new
 				initialPaint: anElement toTheme colorBorder;
@@ -17,6 +18,6 @@ ToRadioImageSkin >> onSkinInstalledIn: anElement [
 				width: 1.
 	self addLook: borderLook.
 
-	super onSkinInstalledIn: anElement
+
 
 ]

src/Toplo/ToSandBox.class.st

@@ -1059,7 +1059,7 @@ ToSandBox class >> example_ToButtonWithDashedSkin [
 	space root addChild: button1.
 
 	button1 labelText: 'Dashed button **'.
-	
+
 	space show.
 
 	^space
@@ -1080,32 +1080,45 @@ ToSandBox class >> example_ToButtonWithDefaultDangerSkin [
 	space root when: BlElementAddedToSceneGraphEvent do: [  
 		button1 labelText: 'Default danger button 3'.
 		button1 iconImage: (ToThemeIcons iconSearchOutlined16x16) ].
+	"button1 inspect."
 	space show.
 ]
 
 { #category : #button }
 ToSandBox class >> example_ToButtonWithDefaultSkin [
 
 
-	| space button1 themeSwitcher |
+	| space button1 themeSwitcher skinSwitcher pane |
 
 	space := BlSpace new.
+	pane := ToPane horizontal.
+	pane layout cellSpacing: 10.
 	space root layout: (BlLinearLayout vertical cellSpacing: 10).
-	themeSwitcher := ToChoiceBox new.
-	themeSwitcher data addAll: { ToThemeLight. ToThemeDark }.
-
-	themeSwitcher whenSelectedIndexChangedDo: [ space toTheme: themeSwitcher selectedData new ].
-	themeSwitcher selectData: space toTheme class.
-
-	space root addChild: themeSwitcher.
-
+
 	button1 := ToButton new.
 	button1 label: (ToLabel text: 'Primary button').
 	button1 icon: (ToImage new innerImage: (ToThemeIcons iconSearchOutlined16x16)).
-	space root addChild: button1.	
 	space root when: BlElementAddedToSceneGraphEvent do: [  
 		button1 labelText: 'Primary button 3'.
 		button1 iconImage: (ToThemeIcons iconSearchOutlined16x16) ].
+
+	skinSwitcher := ToChoiceBox new.
+	skinSwitcher data addAll: { ToButtonDefaultType. ToButtonLinkType. ToButtonPrimaryType. ToButtonTextType }.
+
+	skinSwitcher whenSelectedIndexChangedDo: [ button1 withSkin: (ToButtonSkin type: skinSwitcher selectedData new) ].
+	skinSwitcher selectData: button1 privateSkin type class.
+
+	themeSwitcher := ToChoiceBox new.
+	themeSwitcher data addAll: { ToThemeLight. ToThemeDark }.
+
+	themeSwitcher whenSelectedIndexChangedDo: [ space toTheme: themeSwitcher selectedData new ].
+	themeSwitcher selectData: space toTheme class.
+
+	pane addChild: themeSwitcher.
+	pane addChild: skinSwitcher.
+	space root addChild: pane.
+	space root addChild: button1.
+
 	space show.
 ]
 
@@ -2206,9 +2219,6 @@ ToSandBox class >> example_toButtonOrientationChanger [
 
 	| but space iconImage count |
 	but := ToButton new.
-	but layout cellSpacing: 4.
-	but padding: (BlInsets all: 3).
-	but border: (BlBorder paint: Color lightGray).
 	but label: (ToLabel text:'Button' asRopedText bold).
 	iconImage := BlElement new
 		             size: 20 @ 20;
@@ -2227,9 +2237,6 @@ ToSandBox class >> example_toButtonOrientationChanger3 [
 
 	| but space iconImage count |
 	but := ToButton new.
-	but columnWidth: 100.
-	but padding: (BlInsets all: 3).
-	but border: (BlBorder paint: Color lightGray).
 	but label: (ToLabel text:'Button' asRopedText bold).
 	iconImage := BlElement new
 		             size: 20 @ 20;
@@ -2290,7 +2297,7 @@ ToSandBox class >> example_toButtonWithIconOnly [
 ToSandBox class >> example_toButtonWithTextAndIconHorizontal [
 
 	| but space count |
-	but := ToButton new "cellSpacing: 2; padding: (BlInsets all: 4)".
+	but := ToButton new.
 	but label: (ToLabel text: 'Button').
 	but iconImage: (BlElement new
 			 size: 60 @ 20;
@@ -2300,17 +2307,18 @@ ToSandBox class >> example_toButtonWithTextAndIconHorizontal [
 	but layout cellSpacing: 10.
 	count := 0.
 	but when: BlClickEvent do: [ :event | count := count + 1. count traceCr ].
-	"but whenClickedDo: [ :ann | but icon background: Color random ]."
+	but whenClickedDo: [ :ann | but icon background: Color random ].
 	space := BlSpace new.
 	space root addChild: but.
+	but inspect.
 	space show 
 ]
 
 { #category : #button }
 ToSandBox class >> example_toButtonWithTextAndIconHorizontal2 [
 
 	| but count |
-	but := ToButton new "cellSpacing: 2; padding: (BlInsets all: 4)".
+	but := ToButton new.
 	but label: (ToLabel text: 'Button').
 	but iconImage: (BlElement new
 			 size: 60 @ 20;
@@ -2320,7 +2328,6 @@ ToSandBox class >> example_toButtonWithTextAndIconHorizontal2 [
 	but layout cellSpacing: 10.
 	count := 0.
 	but when: BlClickEvent do: [ :event | count := count + 1. count traceCr ].
-	"but whenClickedDo: [ :ann | but icon background: Color random ]."
 	but openInInnerWindow 
 ]
 

src/Toplo/ToToggleSkin.class.st

@@ -4,71 +4,16 @@ Class {
 	#category : #'Toplo-Widget-Button-Toggle-Skins'
 }
 
-{ #category : #'api - install/uninstall  hook' }
-ToToggleSkin >> barWidthFromTrack: aToggleTrack [
-
-	| but onw offw bw |
-
-	onw := 0.
-	offw := 0.
-	but := aToggleTrack switchButton.
-	bw := but width + but margin left + but margin right.
-	aToggleTrack switchBarOnElement ifNotNil: [ :o | onw := o width ].
-	aToggleTrack switchBarOffElement ifNotNil: [ :o | offw := o width ].
-	^ bw + (onw max: offw) max: bw * 1.6
-]
-
-{ #category : #'api - install/uninstall  hook' }
-ToToggleSkin >> buttonIconChanged: anEvent [
-
-	anEvent currentTarget icon ifNil: [ ^ self ].
-
-]
-
-{ #category : #'api - install/uninstall  hook' }
-ToToggleSkin >> buttonLabelChanged: anEvent [
-
-	anEvent currentTarget label ifNil: [ ^ self ].
-
-]
-
 { #category : #'api - install/uninstall  hook' }
 ToToggleSkin >> onSkinInstalledIn: anElement [
 
+	super onSkinInstalledIn: anElement.
 	anElement spacingWidth: anElement toTheme paddingContentHorizontal / 2.
-	anElement geometry: (BlRoundedRectangleGeometry cornerRadius: (self trackBorderRadiusIn: anElement)).
 	anElement padding: (BlInsets
 			 top: anElement toTheme paddingXS / 2
 			 left: anElement toTheme paddingContentHorizontal
 			 bottom: anElement toTheme paddingXS / 2
 			 right: anElement toTheme paddingContentHorizontal).
-	self setupTrackElementIn: anElement.
-	super onSkinInstalledIn: anElement
-]
-
-{ #category : #'api - install/uninstall  hook' }
-ToToggleSkin >> setupTrackElementIn: anElement [
-
 	" setup the track "
-	anElement switchButton size: (self switchButtonSizeIn: anElement).
-	anElement switchButton background: Color white.
-	anElement switchButton margin: (BlInsets top: 1 left: 3 bottom: 1 right: 3).
-	anElement track geometry: (BlRoundedRectangleGeometry cornerRadius: (self trackBorderRadiusIn: anElement)).
-	anElement track padding: (BlInsets all: 1).
-	anElement track withSkin: (ToToggleTrackSkin new toggleButton: anElement).
-	anElement whenLayoutedDoOnce: [ 
-		anElement track width: (self barWidthFromTrack: anElement track)].
-
-]
-
-{ #category : #accessing }
-ToToggleSkin >> switchButtonSizeIn: anElement [
-
-	^ 14 asPoint
-]
-
-{ #category : #accessing }
-ToToggleSkin >> trackBorderRadiusIn: anElement [
-
-	^ 26
+	anElement track withSkin: (ToToggleTrackSkin new toggleButton: anElement)
 ]

src/Toplo/ToToggleTrackSkin.class.st

@@ -10,7 +10,7 @@ Class {
 { #category : #'api - install/uninstall  hook' }
 ToToggleTrackSkin >> onSkinInstalledIn: anElement [
 
-	toggleButton := anElement parent.
+	super onSkinInstalledIn: anElement.
 	self addLook: (ToBackgroundLook new
 			 initialBg: [ :e |
 				 toggleButton isChecked
@@ -29,7 +29,7 @@ ToToggleTrackSkin >> onSkinInstalledIn: anElement [
 			 animate: true;
 			 toggleButton: toggleButton;
 			 yourself).
-	super onSkinInstalledIn: anElement
+
 ]
 
 { #category : #accessing }