2025-04-08 - Frontend Styles - Revision history

Seagame: add example of styles usage

2026-03-22T03:15:45Z

add example of styles usage

@@ Line 140: / Line 140: @@
 "row_rowSpan_2"
 </syntaxhighlight>
 [[Category:Working documents| 2025-04-08]]
 [[Category:Working documents - Frontend Styles| 2025-04-08]]

Pack: /* Concept */

2025-04-17T03:51:20Z

Concept

← Older revision		Revision as of 03:51, 17 April 2025
Line 1:		Line 1:
	= styled-components concept=		= styled-components concept=
	==Concept==		==Concept==
			*Every styleComponet tag can use the same fotmat and every html Tag can use the same styleComponet tag and send propperties to each styleComponet tag for use different cssStyle.
	*store all css as object in themeStylesDefault.js.		*store all css as object in themeStylesDefault.js.
	*mixed cssStyle from defaultCss and objTypeCss.		*mixed cssStyle from defaultCss and objTypeCss.

Pack at 03:46, 17 April 2025

2025-04-17T03:46:51Z

← Older revision		Revision as of 03:46, 17 April 2025
Line 36:		Line 36:
	themeStyle = {		themeStyle = {
	styles: {		styles: {
	"~~componentXNavbar~~": "width: auto; ~~flex-direction: row;~~ padding: 5px; padding-right: 10px; background: rgb(204, 214, 166); transition: 0.3s; z-index: 5; height: 35px;",		"tableConfig_serviceTag_buyingNavbar_datatype": "width: auto; padding: 5px; padding-right: 10px; background: rgb(204, 214, 166); transition: 0.3s; z-index: 5; height: 35px;",
	"~~navbar~~": "width: auto; flex-direction: row; padding: 5px; padding-right: 10px; background: rgb(199, 242, 164); transition: 0.3s; z-index: 5; height: 35px;",		"tableConfig_buyingNavbar_datatype": "width: auto; flex-direction: row; padding: 5px; padding-right: 10px; background: rgb(199, 242, 164); transition: 0.3s; z-index: 5; height: 35px;",
	"~~specificInThisCOmpnonentBuyingNavbar~~": "width: auto; flex-direction: row; padding: 5px; padding-right: 10px; background: rgb(223, 232, 204); transition: 0.3s; z-index: 5; 35px;",		"tableConfig_serviceTag_buyingNavbar_datatype": "width: auto; flex-direction: row; padding: 5px; padding-right: 10px; background: rgb(223, 232, 204); transition: 0.3s; z-index: 5; 35px;",
	"~~tabulation_buyingNavbar_datatype~~": "width: auto; flex-direction: row; padding: 5px; padding-right: 10px; ~~background: rgb(223, 232, 204);~~ transition: 0.3s; z-index: 5; height: 35px;",		"tableOutput_serviceTag_objectType_buyingNavbar_datatype": "width: auto; flex-direction: row; padding: 5px; padding-right: 10px; transition: 0.3s; z-index: 5; height: 35px;",
	"~~tabulation_buyingNavbar_navbar_datatype~~": "width: auto; flex-direction: row; padding: 5px; padding-right: 10px; background: rgb(204, 214, 166); transition: 0.3s; z-index: 5; height: 35px;",		"tableOutput_buyingNavbar_navbar_datatype": "width: auto; flex-direction: row; padding: 5px; padding-right: 10px; background: rgb(204, 214, 166); transition: 0.3s; z-index: 5; height: 35px;",
	"~~tabulation_datatype~~": "width: auto; flex-direction: row; padding: 5px; padding-right: 10px; background: rgb(199, 242, 164); transition: 0.3s; z-index: 5; height: 35px;"		"tableOutput_datatype": "width: auto; flex-direction: row; padding: 5px; padding-right: 10px; background: rgb(199, 242, 164); transition: 0.3s; z-index: 5; height: 35px;"
	}		}
	};		};
Line 51:		Line 51:
	eg.		eg.
	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
	["~~tabulation_ComplexFilter_filterData_section_dataType_sort~~","~~tabulation_ComplexFilter_section_dataType_sort~~","~~tabulation_section_dataType_sort~~"]		["tableConfig_serviceTag_objectType_section_dataType_sort","tableConfig_serviceTag_section_dataType_sort","tableConfig_section_dataType_sort"]
	</syntaxhighlight>		</syntaxhighlight>

Line 65:		Line 65:
	</syntaxhighlight>		</syntaxhighlight>
	===function process===		===function process===
	*~~use~~ styleTags to get CssStyle from themeStyle and themeStylesDefault		*Use styleTags to get CssStyle from themeStyle and themeStylesDefault
	*themeStylesDefault is object from local create by dev,It store styletag as key and css as value like themeStyle object		*When searching for styleTag in themeStylesDefault, the function starts searching for styleTag from the last index first, then searches the second index, and then the first index.
	*~~create~~ usingCss style by mixed cssStyle from styleTags with cssStyle from overwritecssstyles		*The last index is defaultStyleTag , which does not specify an objType , but the remaining two indexes are objTypeStyeTag , which does specify an objType , with this process objTypeStyeTag will overwrite defaultStyleTag .
			*ThemeStylesDefault is object from local create by dev,It store styletag as key and css as value like themeStyle object
			*Create usingCss style by mixed cssStyle from styleTags with cssStyle from overwritecssstyles
	===return result===		===return result===
	*type string		*type string
Line 101:		Line 103:
	*type array		*type array
	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
	["~~tabulation_serviceTag_objectType_section_dataType_sort~~","~~tabulation_objectType_section_dataType_sort~~","~~tabulation_section_dataType_sort~~"]		["tableOutput_serviceTag_objectType_section_dataType_sort","tableOutput_objectType_section_dataType_sort","tableOutput_section_dataType_sort"]
	</syntaxhighlight>		</syntaxhighlight>

Pack at 03:26, 17 April 2025

2025-04-17T03:26:35Z

← Older revision		Revision as of 03:26, 17 April 2025
Line 1:		Line 1:
	= styled-components concept=		= styled-components concept=
			==Concept==
			*store all css as object in themeStylesDefault.js.
			*mixed cssStyle from defaultCss and objTypeCss.
			*defaultCss is look like "tabulation_section_dataType_sort", It only first index of cssPrefix join by "_" with cssSuffix
			*objTypeCss is look the same daefaultCss but insert serviceTag and objectType after fist index separate by "_",It look like "tabulation_serviceTag_objectType_section_dataType_sort"
			*objTypeCss can cut objectType and left only serviceTag, So objTypeCss can have 2 style.It look like "tabulation_serviceTag_section_dataType_sort"
			*objTypeCss will always ovewrite defaultCss (can read more in createComponent function process)

	===StyleTag Name Format===		==StyleTag Name Format==

	* use "Izara" + html tag + "Style"		* use "Izara" + html tag + "Style"
Line 9:		Line 16:
	</syntaxhighlight>		</syntaxhighlight>

	===StyleTag Syntax===		==StyleTag Syntax==
	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
	export const IzaraTextSpanStyle = styled.span`		export const IzaraTextSpanStyle = styled.span`
Line 18:		Line 25:

	=function=		=function=



	==createComponent==		==createComponent==
Line 52:		Line 57:
	*type string(can be undefined)		*type string(can be undefined)
	*Css value obtained from the objectConfig followed by the style tag as a key.		*Css value obtained from the objectConfig followed by the style tag as a key.
			<syntaxhighlight lang="JavaScript">
			`color: blue;
			margin: 0px 3px;
			background-color: transparent;
			transition: 0.3s;
			font-size: 17px;`
			</syntaxhighlight>
	===function process===		===function process===
	*use styleTags to get CssStyle from themeStyle and themeStylesDefault		*use styleTags to get CssStyle from themeStyle and themeStylesDefault
Line 60:		Line 71:
	*type string		*type string
	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
	color: blue;		`color: blue;
	margin: 0px 3px;		margin: 0px 3px;
	background-color: transparent;		background-color: transparent;
Line 71:		Line 82:
	color: #B3DBD8 ;		color: #B3DBD8 ;
	}		}
	color: red;		color: red;`

	</syntaxhighlight>		</syntaxhighlight>
Line 78:		Line 89:
	==createStyleTags==		==createStyleTags==
	===Parameter===		===Parameter===
	===~~createCssPrefixs~~===		===cssPrefixs===
	*type array(requried)		*type array(requried)
	*List of string create by createCssPrefixs function store at least 1 item but not more than 3 item		*List of string create by createCssPrefixs function store at least 1 item but not more than 3 item.
	===~~createCssSuffix~~===		*Reade more and watch example in createCssPrefixs function.
			===suffix===
	*type string(requried)		*type string(requried)
	*A string generated by the createCssSuffix function that indicates where this cssStyle will be applied on the page, such as rows, cells, or table.		*A string generated by the createCssSuffix function that indicates where this cssStyle will be applied on the page, such as rows, cells, or table.
	Conditions can be added after the "_" to further specify or describe the style, such as color, row range, or column range.		*Conditions can be added after the "_" to further specify or describe the style, such as color, row range, or column range.
			*Reade more and watch example in createCssSuffix function.
	===return result===		===return result===
	*type array		*type array
Line 98:		Line 111:
	===cssPrefixes===		===cssPrefixes===
	*type array(can be undefined)		*type array(can be undefined)
	*List of ObjTypes must have 2 items, fist index is serviceTag second is objectType.		*List of ObjTypes must have 2 items, fist index is serviceTag second is objectType.It look like ["serviceTag", "objectType"]
	===return result===		===return result===
	type array		type array

Pack at 02:29, 17 April 2025

2025-04-17T02:29:10Z

← Older revision		Revision as of 02:29, 17 April 2025
Line 94:		Line 94:
	===Parameter===		===Parameter===
	===defaultPrefix===		===defaultPrefix===
	type string(requried)		*type string(requried)
	Specifies which objectConfig is using this cssStyle. eg. menuOutput, tableConfig, sitePageConfig, tableOutput.		*Specifies which objectConfig is using this cssStyle. eg. menuOutput, tableConfig, sitePageConfig, tableOutput.
	===cssPrefixes===		===cssPrefixes===
	type array(can be undefined)		*type array(can be undefined)
	*List of ObjTypes must have 2 items, fist index is serviceTag second is objectType.		*List of ObjTypes must have 2 items, fist index is serviceTag second is objectType.
	===return result===		===return result===

Pack at 02:28, 17 April 2025

2025-04-17T02:28:06Z

← Older revision		Revision as of 02:28, 17 April 2025
Line 24:		Line 24:
	===Parameter===		===Parameter===
	===themeStyle===		===themeStyle===
	type object(can be undefined)		*type object(can be undefined)
	*object from userStyles get from userDetail in store after login, It store styletag as key and css as value		*object from userStyles get from userDetail in store after login, It store styletag as key and css as value
	eg.		eg.
Line 42:		Line 42:

	===styletags===		===styletags===
	type array(can be undefined)		*type array(can be undefined)
	*list of use styletag create from createStyleTags function		*list of use styletag create from createStyleTags function
	eg.		eg.
Line 50:		Line 50:

	===overwritecssstyles===		===overwritecssstyles===
	type string(can be undefined)		*type string(can be undefined)
	Css value obtained from the objectConfig followed by the style tag as a key.		*Css value obtained from the objectConfig followed by the style tag as a key.

	===function process===		===function process===
Line 58:		Line 58:
	*create usingCss style by mixed cssStyle from styleTags with cssStyle from overwritecssstyles		*create usingCss style by mixed cssStyle from styleTags with cssStyle from overwritecssstyles
	===return result===		===return result===
	type string		*type string
	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
	color: blue;		color: blue;
Line 79:		Line 79:
	===Parameter===		===Parameter===
	===createCssPrefixs===		===createCssPrefixs===
	type array(requried)		*type array(requried)
	*List of string create by createCssPrefixs function store at least 1 item but not more than 3 item		*List of string create by createCssPrefixs function store at least 1 item but not more than 3 item
	===createCssSuffix===		===createCssSuffix===
	type string(requried)		*type string(requried)
	*A string generated by the createCssSuffix function that indicates where this cssStyle will be applied on the page, such as rows, cells, or table.		*A string generated by the createCssSuffix function that indicates where this cssStyle will be applied on the page, such as rows, cells, or table.
	Conditions can be added after the "_" to further specify or describe the style, such as color, row range, or column range.		Conditions can be added after the "_" to further specify or describe the style, such as color, row range, or column range.
	===return result===		===return result===
	type array		*type array
	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
	["tabulation_serviceTag_objectType_section_dataType_sort","tabulation_objectType_section_dataType_sort","tabulation_section_dataType_sort"]		["tabulation_serviceTag_objectType_section_dataType_sort","tabulation_objectType_section_dataType_sort","tabulation_section_dataType_sort"]
Line 111:		Line 111:
	===Parameter===		===Parameter===
	===defaultSuffix===		===defaultSuffix===
	type string(requried)		*type string(requried)
	*Specifies where this cssStyle will be applied on the page, such as rows, cells, or tables.		*Specifies where this cssStyle will be applied on the page, such as rows, cells, or tables.
	===localSuffix===		===localSuffix===
	type string(can be undefined)		*type string(can be undefined)
	*Specify or further explain defaultSuffix. A string can be a single word or a combination of words, and each word must be separated by "_". eg. "background_blue", "rowSpan_2"		*Specify or further explain defaultSuffix. A string can be a single word or a combination of words, and each word must be separated by "_". eg. "background_blue", "rowSpan_2"
	===return result===		===return result===
	type string		*type string
	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
	//if not have localSuffix		//if not have localSuffix

Pack at 02:26, 17 April 2025

2025-04-17T02:26:21Z

← Older revision		Revision as of 02:26, 17 April 2025
Line 24:		Line 24:
	===Parameter===		===Parameter===
	===themeStyle===		===themeStyle===
	(object)(can be undefined)		type object(can be undefined)
	*object from userStyles get from userDetail in store after login, It store styletag as key and css as value		*object from userStyles get from userDetail in store after login, It store styletag as key and css as value
	eg.		eg.
Line 41:		Line 41:
	</syntaxhighlight>		</syntaxhighlight>

	===styletags=== (array)(can be undefined)		===styletags===
			type array(can be undefined)
	*list of use styletag create from createStyleTags function		*list of use styletag create from createStyleTags function
	eg.		eg.
Line 48:		Line 49:
	</syntaxhighlight>		</syntaxhighlight>

	===overwritecssstyles=== (string)(can be undefined)		===overwritecssstyles===
			type string(can be undefined)
	Css value obtained from the objectConfig followed by the style tag as a key.		Css value obtained from the objectConfig followed by the style tag as a key.

Line 76:		Line 78:
	==createStyleTags==		==createStyleTags==
	===Parameter===		===Parameter===
	===createCssPrefixs=== (array)(requried)		===createCssPrefixs===
			type array(requried)
	*List of string create by createCssPrefixs function store at least 1 item but not more than 3 item		*List of string create by createCssPrefixs function store at least 1 item but not more than 3 item
	===createCssSuffix=== (string)(requried)		===createCssSuffix===
			type string(requried)
	*A string generated by the createCssSuffix function that indicates where this cssStyle will be applied on the page, such as rows, cells, or table.		*A string generated by the createCssSuffix function that indicates where this cssStyle will be applied on the page, such as rows, cells, or table.
	Conditions can be added after the "_" to further specify or describe the style, such as color, row range, or column range.		Conditions can be added after the "_" to further specify or describe the style, such as color, row range, or column range.
Line 89:		Line 93:
	==createCssPrefixs==		==createCssPrefixs==
	===Parameter===		===Parameter===
	===defaultPrefix=== (string)(requried)		===defaultPrefix===
			type string(requried)
	Specifies which objectConfig is using this cssStyle. eg. menuOutput, tableConfig, sitePageConfig, tableOutput.		Specifies which objectConfig is using this cssStyle. eg. menuOutput, tableConfig, sitePageConfig, tableOutput.
	===cssPrefixes=== (array)(can be undefined)		===cssPrefixes===
			type array(can be undefined)
	*List of ObjTypes must have 2 items, fist index is serviceTag second is objectType.		*List of ObjTypes must have 2 items, fist index is serviceTag second is objectType.
	===return result===		===return result===
Line 104:		Line 110:
	==createCssSuffix==		==createCssSuffix==
	===Parameter===		===Parameter===
	===defaultSuffix=== (string)(requried)		===defaultSuffix===
			type string(requried)
	*Specifies where this cssStyle will be applied on the page, such as rows, cells, or tables.		*Specifies where this cssStyle will be applied on the page, such as rows, cells, or tables.
	===localSuffix=== (string)(can be undefined)		===localSuffix===
			type string(can be undefined)
	*Specify or further explain defaultSuffix. A string can be a single word or a combination of words, and each word must be separated by "_". eg. "background_blue", "rowSpan_2"		*Specify or further explain defaultSuffix. A string can be a single word or a combination of words, and each word must be separated by "_". eg. "background_blue", "rowSpan_2"
	===return result===		===return result===

Pack at 02:23, 17 April 2025

2025-04-17T02:23:31Z

← Older revision		Revision as of 02:23, 17 April 2025
Line 23:		Line 23:
	==createComponent==		==createComponent==
	===Parameter===		===Parameter===
	===themeStyle=== (object)(can be undefined)		===themeStyle===
			(object)(can be undefined)
	*object from userStyles get from userDetail in store after login, It store styletag as key and css as value		*object from userStyles get from userDetail in store after login, It store styletag as key and css as value
	eg.		eg.

Pack at 02:22, 17 April 2025

2025-04-17T02:22:29Z

← Older revision		Revision as of 02:22, 17 April 2025
Line 23:		Line 23:
	==createComponent==		==createComponent==
	===Parameter===		===Parameter===
	*themeStyle(object)(can be undefined)		===themeStyle=== (object)(can be undefined)
	object from userStyles get from userDetail in store after login, It store styletag as key and css as value		*object from userStyles get from userDetail in store after login, It store styletag as key and css as value
	eg.		eg.
	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
Line 40:		Line 40:
	</syntaxhighlight>		</syntaxhighlight>

	*styletags(array)(can be undefined)		===styletags=== (array)(can be undefined)
	list of use styletag create from createStyleTags function		*list of use styletag create from createStyleTags function
	eg.		eg.
	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
Line 47:		Line 47:
	</syntaxhighlight>		</syntaxhighlight>

	*overwritecssstyles(string)(can be undefined)		===overwritecssstyles=== (string)(can be undefined)
	Css value obtained from the objectConfig followed by the style tag as a key.		Css value obtained from the objectConfig followed by the style tag as a key.

Line 75:		Line 75:
	==createStyleTags==		==createStyleTags==
	===Parameter===		===Parameter===
	*createCssPrefixs(array)(requried)		===createCssPrefixs=== (array)(requried)
	List of string create by createCssPrefixs function store at least 1 item but not more than 3 item		*List of string create by createCssPrefixs function store at least 1 item but not more than 3 item
	*createCssSuffix(string)(requried)		===createCssSuffix=== (string)(requried)
	A string generated by the createCssSuffix function that indicates where this cssStyle will be applied on the page, such as rows, cells, or table.		*A string generated by the createCssSuffix function that indicates where this cssStyle will be applied on the page, such as rows, cells, or table.
	Conditions can be added after the "_" to further specify or describe the style, such as color, row range, or column range.		Conditions can be added after the "_" to further specify or describe the style, such as color, row range, or column range.
	===return result===		===return result===
Line 88:		Line 88:
	==createCssPrefixs==		==createCssPrefixs==
	===Parameter===		===Parameter===
	*defaultPrefix(string)(requried)		===defaultPrefix=== (string)(requried)
	Specifies which objectConfig is using this cssStyle. eg. menuOutput, tableConfig, sitePageConfig, tableOutput.		Specifies which objectConfig is using this cssStyle. eg. menuOutput, tableConfig, sitePageConfig, tableOutput.
	*cssPrefixes(array)(can be undefined)		===cssPrefixes=== (array)(can be undefined)
	List of ObjTypes must have 2 items, fist index is serviceTag second is objectType.		*List of ObjTypes must have 2 items, fist index is serviceTag second is objectType.
	===return result===		===return result===
	type array		type array
Line 103:		Line 103:
	==createCssSuffix==		==createCssSuffix==
	===Parameter===		===Parameter===
	*defaultSuffix(string)(requried)		===defaultSuffix=== (string)(requried)
	Specifies where this cssStyle will be applied on the page, such as rows, cells, or tables.		*Specifies where this cssStyle will be applied on the page, such as rows, cells, or tables.
	*localSuffix(string)(can be undefined)		===localSuffix=== (string)(can be undefined)
	Specify or further explain defaultSuffix. A string can be a single word or a combination of words, and each word must be separated by "_". eg. "background_blue", "rowSpan_2"		*Specify or further explain defaultSuffix. A string can be a single word or a combination of words, and each word must be separated by "_". eg. "background_blue", "rowSpan_2"
	===return result===		===return result===
	type string		type string

Sven the Barbarian at 12:42, 16 April 2025

2025-04-16T12:42:29Z

← Older revision		Revision as of 12:42, 16 April 2025
Line 71:		Line 71:

	</syntaxhighlight>		</syntaxhighlight>
	**About CSS, if the same property exists, such as in the CSS example above, with two color properties, the CSS will cause the bottom line property to overwrite the top line property. In the example, red overwrites blue.		* About CSS, if the same property exists, such as in the CSS example above, with two color properties, the CSS will cause the bottom line property to overwrite the top line property. In the example, red overwrites blue.

	==createStyleTags==		==createStyleTags==
Line 117:		Line 117:


	[[Category:Working documents\| 2025-04-07]]		[[Category:Working documents\| 2025-04-08]]
	[[Category:Working documents - Frontend Styles\| 2025-04-07]]		[[Category:Working documents - Frontend Styles\| 2025-04-08]]