ToBorderLook use valuables to change element properties

src/Toplo/ToBorderLook.class.st

@@ -31,7 +31,7 @@ ToBorderLook >> clickLookEvent: anEvent [
 	anEvent elementDo: [ :e |
 		| anim |
 		anim := ToGaussianEffectAnimation new
-			        color: self pressedPaint;
+			        color: (self pressedPaint value: e);
 			        width: 4;
 			        opacity: 0;
 			        duration: 500 milliSeconds;
@@ -76,7 +76,7 @@ ToBorderLook >> hoveredLookEvent: anEvent [
 	self hoverPaint ifNil: [ ^ self ].
 	anEvent elementDo: [ :e |
 		e border: (self builder
-				 paint: self hoverPaint;
+				 paint: (self hoverPaint value: e);
 				 build) ]
 ]
 
@@ -87,7 +87,7 @@ ToBorderLook >> initialLookEvent: anEvent [
 	self initialPaint ifNil: [ ^ self ].
 	anEvent elementDo: [ :e |
 		e border: (self builder
-				 paint: self initialPaint;
+				 paint: (self initialPaint value: e);
 				 build) ]
 ]
 
@@ -117,7 +117,7 @@ ToBorderLook >> pressedLookEvent: anEvent [
 	self pressedPaint ifNil: [ ^ self ].
 	anEvent elementDo: [ :e |
 		e border: (self builder
-				 paint: self pressedPaint;
+				 paint: (self pressedPaint value: e);
 				 build) ]
 ]
 

src/Toplo/ToButtonDefaultType.class.st

@@ -16,14 +16,14 @@ ToButtonDefaultType >> borderLookIn: anElement [
 	self danger
 		ifTrue: [
 			borderLook
-				initialPaint: anElement toTheme colorError;
-				hoverPaint: anElement toTheme colorErrorHover;
-				pressedPaint: anElement toTheme colorErrorHover darker ]
+				initialPaint: [ :e | e toTheme colorError];
+				hoverPaint: [ :e | e toTheme colorErrorHover];
+				pressedPaint: [ :e | e toTheme colorErrorHover darker] ]
 		ifFalse: [
 			borderLook
-				initialPaint: anElement toTheme colorBorder;
-				hoverPaint: anElement toTheme colorPrimaryHover;
-				pressedPaint: anElement toTheme colorPrimaryPressed ].
+				initialPaint: [ :e | e toTheme colorBorder];
+				hoverPaint: [ :e | e toTheme colorPrimaryHover];
+				pressedPaint: [ :e | e toTheme colorPrimaryPressed ] ].
 	borderLook width: anElement toTheme lineWidth.
 	^ borderLook
 ]

src/Toplo/ToCheckboxImageSkin.class.st

@@ -11,9 +11,9 @@ ToCheckboxImageSkin >> onSkinInstalledIn: anElement [
 	super onSkinInstalledIn: anElement.
 	anElement geometry: (BlRoundedRectangleGeometry cornerRadius: 3).
 	borderLook := ToBorderLook new
-				initialPaint: anElement toTheme colorBorder;
-				hoverPaint: anElement toTheme colorPrimaryHover;
-				pressedPaint: anElement toTheme colorPrimaryPressed;
+				initialPaint: [ :e | e toTheme colorBorder];
+				hoverPaint: [ :e | e toTheme colorPrimaryHover];
+				pressedPaint: [ :e | e toTheme colorPrimaryPressed];
 				width: 1.
 	self addLook: borderLook.
 

src/Toplo/ToExperiments.class.st

@@ -974,35 +974,122 @@ ToExperiments class >> example_toScaling [
 	space show
 ]
 
-{ #category : #'animate toogle button' }
+{ #category : #'toogle button' }
+ToExperiments class >> example_toggle_sliding [
+
+	|  toggle track but left right slideB slide |
+
+	toggle := ToElement new
+		          vFitContent;
+					background: Color lightBlue;
+					"padding: (BlInsets all: 2);"
+					border: (BlBorder paint: Color blue);
+					geometry: (BlRoundedRectangleGeometry cornerRadius: 14);
+		          layout: BlLinearLayout horizontal.
+	track := ToElement new
+		         fitContent;
+		         layout: BlLinearLayout horizontal.
+	left := BlElement new size: 17 @ 14; background: Color gray; margin: (BlInsets left: 5 right: 5).
+	but := BlElement new
+		       size: 14 @ 14;
+				geometry: (BlCircleGeometry new);
+		       background: Color green.
+	right := BlElement new size: 17 @ 14; background: Color gray; margin: (BlInsets left: 5 right: 5).
+	track addChildren: { left. but. right }.
+
+	toggle width: toggle padding left + toggle padding right + but requestedWidth + ((left requestedWidth + left margin left + left margin right) max: (right requestedWidth + right margin left + right margin right)).
+	toggle addChild: track.
+
+	slide := 0.
+	slideB :=  [ ((left requestedWidth max: right requestedWidth) - toggle padding left - toggle padding right) + left margin right + left margin left "+ right margin left + right margin right"].
+	slide := slideB value.
+	track transformDo: [ :aTransform | aTransform translateBy: slide negated @ 0 ].
+
+	toggle when: BlClickEvent do: [
+		slide := slide isZero ifTrue: [slideB value] ifFalse: [0].
+		slide traceCr.
+		track transformDo: [ :aTransform | aTransform translateBy: slide negated @ 0 ] ].
+
+	toggle openInSpace
+]
+
+{ #category : #'toogle button' }
+ToExperiments class >> example_toggle_sliding_with_animation1 [
+
+	| root toggle track but left right slide |
+	root := ToElement new
+		          fitContent;
+		          border: (BlBorder paint: Color black);
+					padding: (BlInsets all: 2);
+		          layout: BlFrameLayout new.
+	toggle := ToElement new
+		          vFitContent;
+		          layout: BlLinearLayout horizontal.
+	track := ToElement new
+		         fitContent;
+		         border: (BlBorder paint: Color black);
+		         layout: BlLinearLayout horizontal.
+	left := BlElement new size: 30 @ 14; background: Color veryLightGray; margin: (BlInsets left: 5 right: 5).
+	but := BlElement new
+		       size: 14 @ 14;
+				 position: left requestedWidth @ 0;
+		       background: Color green;
+		       border: (BlBorder paint: Color black).
+	right := BlElement new size: 20 @ 14; background: Color pink.
+	track addChildren: { left. but. right }.
+
+	toggle width: but requestedWidth + ((left requestedWidth + left margin left + left margin right) max: (right requestedWidth + right margin left + right margin right)).
+	toggle addChild: track.
+
+	"slide := ((left requestedWidth max: right requestedWidth) - toggle padding left - toggle padding right) ."
+	"track transformDo: [ :aTransform | aTransform translateBy: slide  @ 0 ]."
+	slide := 0.
+	slide := ((left requestedWidth max: right requestedWidth) - toggle padding left - toggle padding right).
+	track transformDo: [ :aTransform | aTransform translateBy: slide negated @ 0 ].
+		slide := slide isZero ifTrue: [((left requestedWidth max: right requestedWidth) - toggle padding left - toggle padding right) ] ifFalse: [0].
+		slide := ((left requestedWidth "+ left margin left + left margin right") - toggle padding left - toggle padding right).
+
+	toggle when: BlClickEvent do: [
+		slide traceCr.
+		track addAnimation: (BlTransformAnimation new
+					  duration: 200 milliSeconds;
+					  transformDo: [ :b | b translateBy: slide  @ 0 ]).
+		slide := slide * -1.
+		].
+	root addChild: toggle.
+	root openInSpace
+]
+
+{ #category : #'toogle button' }
 ToExperiments class >> example_toggle_with_animation [
 
 	| btn track lab |
 	track := ToElement new
 		         geometry: (BlRoundedRectangleGeometry cornerRadius: 10);
 		         border: (BlBorder paint: Color veryLightGray);
-					layout: BlLinearLayout horizontal;
-					padding: (BlInsets all: 3);
-		         vFitContent; hExact: 40.
+		         layout: BlLinearLayout horizontal;
+		         padding: (BlInsets all: 3);
+		         vFitContent;
+		         hExact: 40.
 	track layout alignCenterLeft.
 	lab := ToLabel new text: 'Off'.
 	btn := ToElement new
 		       geometry: BlEllipseGeometry new;
 		       background: Color veryLightGray;
 		       size: 16 @ 16;
-		       relocate: 3 @ 3.
+		       position: 3 @ 3.
 	track addChild: btn.
 	track addChild: lab.
-	track openInOBlSpace.
-	btn addAnimation: (BlParallelAnimation withAll: { 
+	track openInSpace.
+	btn addAnimation: (BlParallelAnimation withAll: {
 				 (BlTransformAnimation new
 					  duration: 3000 milliSeconds;
 					  transformDo: [ :b | b translateBy: 18 @ 0 ]).
 				 (BlColorTransition new
 					  duration: 3000 milliSeconds;
 					  from: Color veryLightGray;
 					  to: Color black;
-					  onStepDo: [ :aColor :anElement | 
+					  onStepDo: [ :aColor :anElement |
 						  anElement background: aColor.
 						  anElement parent border: (BlBorder paint: aColor) ]) })
 ]

src/Toplo/ToLabel.class.st

@@ -250,13 +250,6 @@ ToLabel >> removeEditor [
 
 ]
 
-{ #category : #layout }
-ToLabel >> requestLayout [
-
-	self innerElement ifNotNil: [:ie | ie requestLayout ].
-	super requestLayout
-]
-
 { #category : #accessing }
 ToLabel >> text [
 	<return: #BlText>
@@ -281,7 +274,8 @@ ToLabel >> text: aBlTextOrString [
 { #category : #'event handling' }
 ToLabel >> textChanged [
 
-	self innerElement textChanged
+	self innerElement textChanged.
+	self forceLocalLayout
 ]
 
 { #category : #accessing }

src/Toplo/ToRadioImageSkin.class.st

@@ -12,9 +12,9 @@ ToRadioImageSkin >> onSkinInstalledIn: anElement [
 	super onSkinInstalledIn: anElement.
 	anElement geometry: (BlCircleGeometry new).
 	borderLook := ToBorderLook new
-				initialPaint: anElement toTheme colorBorder;
-				hoverPaint: anElement toTheme colorPrimaryHover;
-				pressedPaint: anElement toTheme colorPrimaryPressed;
+				initialPaint: [ :e | e toTheme colorBorder];
+				hoverPaint: [ :e | e toTheme colorPrimaryHover];
+				pressedPaint: [ :e | e toTheme colorPrimaryPressed];
 				width: 1.
 	self addLook: borderLook.
 

src/Toplo/ToSandBox.class.st

@@ -3411,15 +3411,16 @@ ToSandBox class >> example_toggle2 [
 { #category : #'toggle button' }
 ToSandBox class >> example_toggle3 [
 
-	| th |
+	| th sp |
 	th := ToToggleButton new
 		      labelText: 'Cheesecake';
 		      beLabelFirst.
 	th switchButtonOnElement: (ToImage inner: (Smalltalk ui icons iconNamed: #glamorousAccept)).
 	th switchButtonOffElement: (ToImage inner: (Smalltalk ui icons iconNamed: #glamorousClose)).
 	th when: ToCheckableCheckEvent do: [ :event | event current traceCr ].
 	th checked: true.
-	th openInSpace
+	sp := th openInSpace.
+	sp root background: Color veryLightGray
 ]
 
 { #category : #pane }