Small Form Component (Tech.CssFormSmall)

author	version	line-number	content
		1	{{velocity}}
		2	$xwiki.ssx.use("Standards.CssFormSmall")
		3	$xwiki.ssx.use("Standards.CssIcons")
		4	$xwiki.ssx.use("Improvements.WebHome")
		5	{{/velocity}}
		6
		7	= Small Form Component =
		8
		9	(% class="red" %) Dependance on (%%) [[Icons Component >>Tech.CssIcons]]
		10
		11	(% class="orange" %) $xwiki.ssfx.use("icons/icons.css", true)
		12
		13	(% class="orange" %) $xwiki.ssfx.use("uicomponents/form/form.css")
		14
		15	* [[Location >>CssFormSmall#HLocation]]
		16	* [[CSS >>CssFormSmall#HCSS]]
		17	* [[HTML >>CssFormSmall#HHTML]]
		18	** Expandable Container Small Forms
		19	*** 1. [[Blog's Publish Options >>CssFormSmall#H1BlogsPublishOptions]]
		20	*** 2. [[Blog's Manage Categories >>CssFormSmall#H2BlogsManageCategories]]
		21	** Simple Container Small Forms
		22	*** 3. [[Watchlist >>CssFormSmall#H3Watchlist]]
		23	** Inline Small Forms
		24	*** 4. [[Create Space >>CssFormSmall#H4CreateSpace]]
		25	*** 5. [[Create Post >>CssFormSmall#H5CreatePost]]
		26	* [[Translations >>CssFormSmall#HTranslations]]
		27
		28	= Usage =
		29
		30	== Expandable Container Small Forms ==
		31
		32
		33
		34	[[image:PublishOptions.png\|\|style="float: left;"]][[image:Categories.png\|\|style="float: left;"]][[image:FieldsManager.png\|\|style="float: left;"]]
		35
		36	{{velocity}}{{html}}
		37	<div class="clearfloats"></div>
		38	{{/html}}{{/velocity}}
		39
		40	== Simple Container Small Forms ==
		41
		42	[[image:Watchlist.png\|\|style="float: left;"]]
		43
		44	{{velocity}}{{html}}
		45	<div class="clearfloats"></div>
		46	{{/html}}{{/velocity}}
		47
		48	== Inline Small Forms ==
		49
		50	[[image:InlineCreateSpace.png\|\|style="float: left;"]][[image:InlineCreatePost.png\|\|style="float: left;"]]
		51
		52	{{velocity}}{{html}}
		53	<div class="clearfloats"></div>
		54	{{/html}}{{/velocity}}
		55
		56	== Location ==
		57
		58	{{code language="html"}}
		59	platform\web\standard\src\main\webapp\resources\uicomponents\form\form.css
		60	{{/code}}
		61
		62	== CSS ==
		63
		64	{{code language="css"}}
		65
		66	.formSmallName {
		67	font-style: normal;
		68	font-size: 11px;
		69	font-weight: bold;
		70	color: #888;
		71	text-transform: uppercase;
		72	white-space:nowrap;
		73	width: 97%;
		74	}
		75
		76	.formSmallName a {
		77	color: #888;
		78	}
		79
		80	.formSmallStatus {
		81	margin-left: 3px;
		82	font-size: 12px;
		83	text-transform: none;
		84	font-weight: bold;
		85	color: #4d4d4d;
		86	}
		87
		88	.formSmallMessage {
		89	color: #888;
		90	font-size: 12px;
		91	display: block;
		92	text-align: justify;
		93	margin-bottom: 5px;
		94	}
		95
		96	.formSmallInline {
		97	display: block;
		98	white-space:nowrap;
		99	vertical-align: middle;
		100	}
		101
		102	.formSmallExpandable {
		103	margin-left: 10px;
		104	margin-right: 10px;
		105	margin-top: 5px;
		106	width: 212px;
		107	}
		108
		109	.formSmallContainer {
		110	border-width: 0px;
		111	padding: 7px 18px 7px 18px;
		112	background-color: transparent;
		113	margin-bottom: 5px;
		114	}
		115
		116	.formSmallExpandable .formSmallContainer {
		117	border-top: 1px dashed #E4E4E5;
		118	background-color: #FAFAFD;
		119	margin-top: 5px;
		120	}
		121
		122	.formSmallContainerOptions {
		123	width: 175px;
		124	}
		125
		126	.formSmallContainer .buttonwrapper, .formSmallInline .buttonwrapper{
		127	padding: 0px;
		128	margin: 0px;
		129	}
		130
		131	.formSmallContainer label{
		132	color: #888;
		133	text-transform: uppercase;
		134	font-size: 11px;
		135	font-weight: bold;
		136	font-family: sans-serif;
		137	font-style: normal;
		138	display: block;
		139	}
		140
		141	.formSmallContainerOptions select ,
		142	.formSmallContainerOptions input,
		143	.formSmallContainerOptions textarea,
		144	.formSmallInline select,
		145	.formSmallInline input,
		146	.formSmallInline textarea {
		147	border: 1px solid #ccc;
		148	margin-left: 0px;
		149	margin-right: 0px;
		150	margin-bottom: 5px;
		151	}
		152
		153	.formSmallContainerOptions select ,
		154	.formSmallContainerOptions input,
		155	.formSmallContainerOptions textarea {
		156	display: block;
		157	width: 100%;
		158	}
		159
		160	.formSmallContainer input[type=hidden]{
		161	border: none;
		162	}
		163
		164	.formSmallContainer select {
		165	text-transform: capitalize;
		166	}
		167	{{/code}}
		168
		169	== HTML ==
		170
		171	The formSmall Component can be used for:
		172
		173	1. [[Blog's Publish Options >>CssFormSmall#H1BlogsPublishOptions]]
		174	1. [[Blog's Manage Categories >>CssFormSmall#H2BlogsManageCategories]]
		175	1. [[Fields Manager>>CssFormSmall#H3FieldsManager]]
		176	1. [[Watchlist >>CssFormSmall#H4Watchlist]]
		177
		178	==== 1. Blog's Publish Options ====
		179
		180	* More about [[Blog's Publish Options >>Improvements.BlogPublishOptions]]
		181
		182	{{velocity}}
		183	{{html}}
		184	<div style="float: left">
		185	<div class="formSmallExpandable">
		186	<div class="formSmallName iconPublish">Status:<span class="formSmallStatus">Published</span></div>
		187	<div class="formSmallContainer">
		188	<div class="formSmallContainerOptions">
		189	<select>
		190	<option selected="selected" value="Published">Published</option>
		191	<option value="Unpublished">Unpublished</option>
		192	</select>
		193	</div>
		194	<div class="buttonwrapper">
		195	<input type="button" value="Save" class="button"/>
		196	</div>
		197	</div>
		198	</div>
		199	<div class="formSmallExpandable">
		200	<div class="formSmallName iconPrivate">Visibility:<span class="formSmallStatus">Public</span></div>
		201	<div class="formSmallContainer">
		202	<div class="formSmallContainerOptions">
		203	<select>
		204	<option selected="selected" value="Public">Public</option>
		205	<option value="Private">Private</option>
		206	</select>
		207	</div>
		208	<div class="buttonwrapper">
		209	<input type="button" value="Save" class="button"/>
		210	</div>
		211	</div>
		212	</div>
		213	<div class="formSmallExpandable">
		214	<div class="formSmallName iconSchedule">Schedule on:<span class="formSmallStatus">Now</span></div>
		215	<div class="formSmallContainer">
		216	<div class="formSmallContainerOptions">
		217	<label>Date:</label>
		218	<input type="text" value="19/06/2009" name="newCategoryName"/>
		219	<label>Time:</label>
		220	<input type="text" value="17:32:58" name="newCategoryName"/>
		221	</div>
		222	<div class="buttonwrapper">
		223	<input type="button" value="Save" class="button"/>
		224	</div>
		225	</div>
		226	</div>
		227	</div>
		228	{{/html}}
		229	{{/velocity}}
		230
		231	{{code language="html"}}<div class="formSmallExpandable">
		232	<div class="formSmallName iconPublish">Status:<span class="formSmallStatus">Published</span></div>
		233	<div class="formSmallContainer">
		234	<div class="formSmallContainerOptions">
		235	<select>
		236	<option selected="selected" value="Published">Published</option>
		237	<option value="Unpublished">Unpublished</option>
		238	</select>
		239	</div>
		240	<div class="buttonwrapper">
		241	<input type="button" value="Save" class="button"/>
		242	</div>
		243	</div>
		244	</div>
		245	<div class="formSmallExpandable">
		246	<div class="formSmallName iconPrivate">Visibility:<span class="formSmallStatus">Public</span></div>
		247	<div class="formSmallContainer">
		248	<div class="formSmallContainerOptions">
		249	<select>
		250	<option selected="selected" value="Public">Public</option>
		251	<option value="Private">Private</option>
		252	</select>
		253	</div>
		254	<div class="buttonwrapper">
		255	<input type="button" value="Save" class="button"/>
		256	</div>
		257	</div>
		258	</div>
		259	<div class="formSmallExpandable">
		260	<div class="formSmallName iconSchedule">Schedule on:<span class="formSmallStatus">Now</span></div>
		261	<div class="formSmallContainer">
		262	<div class="formSmallContainerOptions">
		263	<label>Date:</label>
		264	<input type="text" value="19/06/2009" name="newCategoryName"/>
		265	<label>Time:</label>
		266	<input type="text" value="17:32:58" name="newCategoryName"/>
		267	</div>
		268	<div class="buttonwrapper">
		269	<input type="button" value="Save" class="button"/>
		270	</div>
		271	</div>
		272	</div>{{/code}}
		273
		274	==== 2. Blog's Manage Categories ====
		275
		276	* More about [[Blog's Manage Categories >>Improvements.BlogComponentCategories]]
		277
		278	{{velocity}}{{html}}
		279	<div style="float: left">
		280	<div class="formSmallExpandable">
		281	<div class="formSmallName iconAdd"><a>Create new category</a></div>
		282	<div class="formSmallContainer">
		283	<div class="formSmallContainerOptions">
		284	<input type="text" value="Category name"/>
		285	<label>Parent:</label>
		286	<select>
		287	<option selected="selected">None</option>
		288	<option>News</option>
		289	<option> Stiri</option>
		290	<option> Anunturi</option>
		291	</select>
		292	</div>
		293	<div class="buttonwrapper">
		294	<input type="button" value="Create" class="button"/>
		295	</div>
		296	</div>
		297	</div>
		298	<div class="formSmallExpandable">
		299	<div class="formSmallName iconEdit"> Edit a category </div>
		300	<div class="formSmallContainer">
		301	<div class="formSmallContainerOptions">
		302	<input type="text" value="Urgente" name="newCategoryName"/>
		303	</div>
		304	<div class="buttonwrapper">
		305	<input type="button" value="Save" class="button"/>
		306	</div>
		307	</div>
		308	</div>
		309	<div class="formSmallExpandable">
		310	<div class="formSmallName iconDelete"> Delete selected categories </div>
		311	<div class="formSmallContainer">
		312	<div class="formSmallContainerOptions">
		313	<div class="formSmallMessage">Do you want to delete the selected categories?</div>
		314	</div>
		315	<div class="buttonwrapper">
		316	<input type="button" value="Delete" class="button"/>
		317	</div>
		318	</div>
		319	</div>
		320	</div>
		321	{{/html}}{{/velocity}}
		322
		323	{{code language="html"}}
		324	<div class="formSmallExpandable">
		325	<div class="formSmallName iconAdd"><a>Create new category</a></div>
		326	<div class="formSmallContainer">
		327	<div class="formSmallContainerOptions">
		328	<input type="text" value="Category name"/>
		329	<label>Parent:</label>
		330	<select>
		331	<option selected="selected">None</option>
		332	<option>News</option>
		333	<option> Stiri</option>
		334	<option> Anunturi</option>
		335	</select>
		336	</div>
		337	<div class="buttonwrapper">
		338	<input type="button" value="Create" class="button"/>
		339	</div>
		340	</div>
		341	</div>
		342	<div class="formSmallExpandable>
		343	<div class="formSmallName iconEdit"> Edit a category </div>
		344	<div class="formSmallContainer">
		345	<div class="formSmallContainerOptions">
		346	<input type="text" value="Urgente" name="newCategoryName"/>
		347	</div>
		348	<div class="buttonwrapper">
		349	<input type="button" value="Save" class="button"/>
		350	</div>
		351	</div>
		352	</div>
		353	<div class="formSmallExpandable">
		354	<div class="formSmallName iconDelete"> Delete selected categories </div>
		355	<div class="formSmallContainer">
		356	<div class="formSmallContainerOptions">
		357	<div class="formSmallMessage">Do you want to delete the selected categories?</div>
		358	</div>
		359	<div class="buttonwrapper">
		360	<input type="button" value="Delete" class="button"/>
		361	</div>
		362	</div>
		363	</div>
		364	{{/code}}
		365
		366	==== 3. Watchlist ====
		367
		368	* More about [[Watchlist >>Improvements.WatchList]]
		369
		370	{{velocity}}{{html}}
		371	<div style="width: 30%;float:left;">
		372	<h3>
		373	<span style="">Notifications</span>
		374	</h3>
		375	<div class="formSmallName iconRss">RSS notifications</div>
		376	<div class="formSmallContainer">
		377	<div class="formSmallContainerOptions">
		378	<div class="formSmallMessage">Subscribe to last modifications:</div>
		379	</div>
		380	<div class="buttonwrapper">
		381	<input type="button" value="Subscribe" class="button"/>
		382	</div>
		383	</div>
		384	<div class="separatorDashed"> </div>
		385	<div class="formSmallName iconEmail">Email notifications</div>
		386	<div class="formSmallContainer">
		387	<div class="formSmallContainerOptions">
		388	<div class="formSmallMessage">Choose the frequency of your email notifications:</div>
		389	<select>
		390	<option>never</option>
		391	<option selected="selected">hourly</option>
		392	<option>daily</option>
		393	<option>weekly</option>
		394	<option>monthly</option>
		395	</select>
		396	</div>
		397	<div class="buttonwrapper">
		398	<input type="button" value="Save" class="button"/>
		399	</div>
		400	</div>
		401	</div>
		402	{{/html}}
		403	{{/velocity}}
		404
		405	{{code language="html"}}
		406	<h3>
		407	<span style="">Notifications</span>
		408	</h3>
		409	<div class="formSmallName iconRss">RSS notifications</div>
		410	<div class="formSmallContainer">
		411	<div class="formSmallContainerOptions">
		412	<div class="formSmallMessage">Subscribe to last modifications:</div>
		413	</div>
		414	<div class="buttonwrapper">
		415	<input type="button" value="Subscribe" class="button"/>
		416	</div>
		417	</div>
		418	<div class="separatorDashed"> </div>
		419	<div class="formSmallName iconEmail">Email notifications</div>
		420	<div class="formSmallContainer">
		421	<div class="formSmallContainerOptions">
		422	<div class="formSmallMessage">Choose the frequency of your email notifications:</div>
		423	<select>
		424	<option>never</option>
		425	<option selected="selected">hourly</option>
		426	<option>daily</option>
		427	<option>weekly</option>
		428	<option>monthly</option>
		429	</select>
		430	</div>
		431	<div class="buttonwrapper">
		432	<input type="button" value="Save" class="button"/>
		433	</div>
		434	</div>
		435	{{/code}}
		436
		437	==== 4. Create Space ====
		438
		439	[[image:InlineCreateSpace.png\|\|style="float: left;"]]
		440
		441	{{code language="html"}}
		442	<li class="xitem space">
		443	<div class="xitemcontainer">
		444	<div class="formSmallName">
		445	<a>Create a new space</a>
		446	</div>
		447	<div id="spSpaceCreateForm">
		448	<div class="formSmallInline">
		449	<input type="text" value="Space name"/>
		450	<span class="buttonwrapper">
		451	<input type="button" value="Create" class="button"/>
		452	</span>
		453	</div>
		454	</div>
		455	</div>
		456	</li>
		457	{{/code}}
		458
		459	==== 5. Create Post ====
		460
		461	[[image:InlineCreatePost.png\|\|style="float: left;"]]
		462
		463	{{code language="html"}}
		464	<div class="floatinginfobox dashed">
		465	<div class="formSmallName iconAdd">Create a new post</div>
		466	<div class="formSmallInline">
		467	<input type="text" value="Post title"/>
		468	<span class="buttonwrapper">
		469	<input type="button" value="Create" class="button"/>
		470	</span>
		471	</div>
		472	</div>
		473	{{/code}}
		474
		475	== Translations ==