SpStyle.class.st

"
! Stylesheets for Morphic backend

A style is a property container to ""style"" morphic components, and define (in a certain degree) its behaviour within the different layouts implemented.
There are two kinds of style elements: style classes and style properties.

!! Stylesheet STON format
To easy the definition and storage outside an image, a stylesheet may be defined as a STON file, string or stream, that you can later read using *class:SpStyleSTONReader*.
A defined stylesheet has to have always a root element, and this root element needs to be called ==.application==. 

See this small example: 

[[[language=Smalltalk
SpStyleSTONReader fromString: '
.application [  
	.myButton [
		Geometry { #width: 150 }
	]
]'
]]]

As a more complex example, see *method:SpStyle class#createDefaultStyleSheet* who defines the default behaviour of all elements of a Morphic Spec backend.

!! Referencing style elements in your presenters
You can add styles to your presenters easily by using *class:SpAbstractWidgetPresenter>>#addStyle:*

@@TODO more examples

See *class:SpStyleClass*, *class:SpStyleProperty*, *class:SpMorphStyle*
"
Class {
	#name : #SpStyle,
	#superclass : #Object,
	#classVars : [
		'DefaultStyleSheet'
	],
	#category : #'Spec2-Adapters-Morphic-StyleSheet'
}

{ #category : #private }
SpStyle class >> createDefaultStyleSheet [

	^ SpStyleSTONReader fromString: '
.application [
	Font { #name: "Source Sans Pro", #size: 10 },
	Geometry { #height: 25 },
	.label [
		Geometry { #hResizing: true, #height: 18 },
		.headerError [Draw { #color:  Color{ #red: 1, #green: 0, #blue: 0, #alpha: 1}}  ],
		.headerSuccess [Draw { #color: Color{ #red: 0, #green: 1, #blue: 0, #alpha: 1}}  ],
		.header [ 
			Draw { #color: Color{ #rgb: 622413393 } } ],
		.shortcut [ 
			Draw { #color: Color{ #rgb: 622413393 } }
		],
		.fixed [ 
			Geometry { #hResizing: false, #width: 100 }
		],
		.dim [
			Draw { #color : Color{ #rgb: 708480675 } }
		]
	],
	.link [  
		Geometry { #hResizing: true }		
	],
	.button [  
		Geometry { #width: 100 },
		.small [
		   Geometry { #width: 26 }
		]
	],
	.checkBox [  
		Geometry { #hResizing: true }
	],
	.radioButton [ 
		Geometry { #hResizing: true }
	],
	.dropList [ 
		Geometry { #width: 150, #hResizing: true }
	],
	.list [ 
		Geometry { #width: 150, #hResizing: true, #vResizing: true }
	],
	.slider [
		Geometry { #width: 150, #hResizing: true }
	],
	.actionBar [  
		Container { 
			#borderColor: Color { #rgb: 0, #alpha: 0 }, 
			#borderWidth: 2, 
			#padding: 5 },
		Geometry { #width: 150, #height: 29, #hResizing: true, #vResizing: false }
	],
	.menuBar [
		Geometry { #width: 150, #hResizing: true }
	],
	.actionButton [  
		Geometry { #width: 60, #hResizing: false },
		.showIcon [ Geometry { #width: 25 } ]
	],
	.toolBar [ 
		Geometry { #hResizing: true },
		.icons [ 
			Geometry { #height: 30 }
		],
		.iconsAndLabel [  
			Geometry { #height: 45 }
		]
	],
	.text [ 
		Geometry { #height: 0 }
	],
	.code [
		Font { #name : "Source Code Pro", #size : 10 }
	],
	.codePopover [ 
		Draw { #color : #transparent },
		.button [
			Geometry { #width : 25 }
		]
	],
	.scrollbarPopoverLarge [ 
		Geometry { #height: 350 } 
	]
]
'
]

{ #category : #accessing }
SpStyle class >> defaultStyleSheet [

	self flag: #TODO. "This is wrong. Default style sheet should reside in the Pharo application, 
	but since we do not have that abstraction (yet) in the system, we put it here for now"
	^ DefaultStyleSheet ifNil: [ 
		DefaultStyleSheet := self createDefaultStyleSheet ].

]

{ #category : #'instance creation' }
SpStyle class >> newApplication [

	^ SpStyleClass new 
		name: 'application';
		yourself
]

{ #category : #accessing }
SpStyle class >> reset [ 
	<script>

	DefaultStyleSheet := nil
]

{ #category : #operations }
SpStyle >> applyTo: aMorph [

	self subclassResponsibility
]

{ #category : #testing }
SpStyle >> isStyleClass [

	^ false
]

{ #category : #testing }
SpStyle >> isStyleProperty [

	^ false
]