Small Form Component
Last modified by Vincent Massol on 2024/02/26 17:55
Description
Small Form Component
Dependance on Icons Component
$xwiki.ssfx.use("icons/icons.css", true)
$xwiki.ssfx.use("uicomponents/form/form.css")
- Location
- CSS
- HTML
- Expandable Container Small Forms
- Simple Container Small Forms
- 3. Watchlist
- Inline Small Forms
- 4. Create Space
- 5. Create Post
- Translations
Usage
Expandable Container Small Forms
Simple Container Small Forms
Inline Small Forms
Location
platform\web\standard\src\main\webapp\resources\uicomponents\form\form.css
CSS
.formSmallName {
font-style: normal;
font-size: 11px;
font-weight: bold;
color: #888;
text-transform: uppercase;
white-space:nowrap;
width: 97%;
}
.formSmallName a {
color: #888;
}
.formSmallStatus {
margin-left: 3px;
font-size: 12px;
text-transform: none;
font-weight: bold;
color: #4d4d4d;
}
.formSmallMessage {
color: #888;
font-size: 12px;
display: block;
text-align: justify;
margin-bottom: 5px;
}
.formSmallInline {
display: block;
white-space:nowrap;
vertical-align: middle;
}
.formSmallExpandable {
margin-left: 10px;
margin-right: 10px;
margin-top: 5px;
width: 212px;
}
.formSmallContainer {
border-width: 0px;
padding: 7px 18px 7px 18px;
background-color: transparent;
margin-bottom: 5px;
}
.formSmallExpandable .formSmallContainer {
border-top: 1px dashed #E4E4E5;
background-color: #FAFAFD;
margin-top: 5px;
}
.formSmallContainerOptions {
width: 175px;
}
.formSmallContainer .buttonwrapper, .formSmallInline .buttonwrapper{
padding: 0px;
margin: 0px;
}
.formSmallContainer label{
color: #888;
text-transform: uppercase;
font-size: 11px;
font-weight: bold;
font-family: sans-serif;
font-style: normal;
display: block;
}
.formSmallContainerOptions select ,
.formSmallContainerOptions input,
.formSmallContainerOptions textarea,
.formSmallInline select,
.formSmallInline input,
.formSmallInline textarea {
border: 1px solid #ccc;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 5px;
}
.formSmallContainerOptions select ,
.formSmallContainerOptions input,
.formSmallContainerOptions textarea {
display: block;
width: 100%;
}
.formSmallContainer input[type=hidden]{
border: none;
}
.formSmallContainer select {
text-transform: capitalize;
}
HTML
The formSmall Component can be used for:
1. Blog's Publish Options
- More about Blog's Publish Options
Status:Published
Visibility:Public
Schedule on:Now
<div class="formSmallExpandable">
<div class="formSmallName iconPublish">Status:<span class="formSmallStatus">Published</span></div>
<div class="formSmallContainer">
<div class="formSmallContainerOptions">
<select>
<option selected="selected" value="Published">Published</option>
<option value="Unpublished">Unpublished</option>
</select>
</div>
<div class="buttonwrapper">
<input type="button" value="Save" class="button"/>
</div>
</div>
</div>
<div class="formSmallExpandable">
<div class="formSmallName iconPrivate">Visibility:<span class="formSmallStatus">Public</span></div>
<div class="formSmallContainer">
<div class="formSmallContainerOptions">
<select>
<option selected="selected" value="Public">Public</option>
<option value="Private">Private</option>
</select>
</div>
<div class="buttonwrapper">
<input type="button" value="Save" class="button"/>
</div>
</div>
</div>
<div class="formSmallExpandable">
<div class="formSmallName iconSchedule">Schedule on:<span class="formSmallStatus">Now</span></div>
<div class="formSmallContainer">
<div class="formSmallContainerOptions">
<label>Date:</label>
<input type="text" value="19/06/2009" name="newCategoryName"/>
<label>Time:</label>
<input type="text" value="17:32:58" name="newCategoryName"/>
</div>
<div class="buttonwrapper">
<input type="button" value="Save" class="button"/>
</div>
</div>
</div>
<div class="formSmallName iconPublish">Status:<span class="formSmallStatus">Published</span></div>
<div class="formSmallContainer">
<div class="formSmallContainerOptions">
<select>
<option selected="selected" value="Published">Published</option>
<option value="Unpublished">Unpublished</option>
</select>
</div>
<div class="buttonwrapper">
<input type="button" value="Save" class="button"/>
</div>
</div>
</div>
<div class="formSmallExpandable">
<div class="formSmallName iconPrivate">Visibility:<span class="formSmallStatus">Public</span></div>
<div class="formSmallContainer">
<div class="formSmallContainerOptions">
<select>
<option selected="selected" value="Public">Public</option>
<option value="Private">Private</option>
</select>
</div>
<div class="buttonwrapper">
<input type="button" value="Save" class="button"/>
</div>
</div>
</div>
<div class="formSmallExpandable">
<div class="formSmallName iconSchedule">Schedule on:<span class="formSmallStatus">Now</span></div>
<div class="formSmallContainer">
<div class="formSmallContainerOptions">
<label>Date:</label>
<input type="text" value="19/06/2009" name="newCategoryName"/>
<label>Time:</label>
<input type="text" value="17:32:58" name="newCategoryName"/>
</div>
<div class="buttonwrapper">
<input type="button" value="Save" class="button"/>
</div>
</div>
</div>
2. Blog's Manage Categories
- More about Blog's Manage Categories
Edit a category
Delete selected categories
Do you want to delete the selected categories?
<div class="formSmallExpandable">
<div class="formSmallName iconAdd"><a>Create new category</a></div>
<div class="formSmallContainer">
<div class="formSmallContainerOptions">
<input type="text" value="Category name"/>
<label>Parent:</label>
<select>
<option selected="selected">None</option>
<option>News</option>
<option> Stiri</option>
<option> Anunturi</option>
</select>
</div>
<div class="buttonwrapper">
<input type="button" value="Create" class="button"/>
</div>
</div>
</div>
<div class="formSmallExpandable>
<div class="formSmallName iconEdit"> Edit a category </div>
<div class="formSmallContainer">
<div class="formSmallContainerOptions">
<input type="text" value="Urgente" name="newCategoryName"/>
</div>
<div class="buttonwrapper">
<input type="button" value="Save" class="button"/>
</div>
</div>
</div>
<div class="formSmallExpandable">
<div class="formSmallName iconDelete"> Delete selected categories </div>
<div class="formSmallContainer">
<div class="formSmallContainerOptions">
<div class="formSmallMessage">Do you want to delete the selected categories?</div>
</div>
<div class="buttonwrapper">
<input type="button" value="Delete" class="button"/>
</div>
</div>
</div>
<div class="formSmallName iconAdd"><a>Create new category</a></div>
<div class="formSmallContainer">
<div class="formSmallContainerOptions">
<input type="text" value="Category name"/>
<label>Parent:</label>
<select>
<option selected="selected">None</option>
<option>News</option>
<option> Stiri</option>
<option> Anunturi</option>
</select>
</div>
<div class="buttonwrapper">
<input type="button" value="Create" class="button"/>
</div>
</div>
</div>
<div class="formSmallExpandable>
<div class="formSmallName iconEdit"> Edit a category </div>
<div class="formSmallContainer">
<div class="formSmallContainerOptions">
<input type="text" value="Urgente" name="newCategoryName"/>
</div>
<div class="buttonwrapper">
<input type="button" value="Save" class="button"/>
</div>
</div>
</div>
<div class="formSmallExpandable">
<div class="formSmallName iconDelete"> Delete selected categories </div>
<div class="formSmallContainer">
<div class="formSmallContainerOptions">
<div class="formSmallMessage">Do you want to delete the selected categories?</div>
</div>
<div class="buttonwrapper">
<input type="button" value="Delete" class="button"/>
</div>
</div>
</div>
3. Watchlist
- More about Watchlist
Notifications
RSS notifications
Subscribe to last modifications:
Email notifications
Choose the frequency of your email notifications:
<h3>
<span style="">Notifications</span>
</h3>
<div class="formSmallName iconRss">RSS notifications</div>
<div class="formSmallContainer">
<div class="formSmallContainerOptions">
<div class="formSmallMessage">Subscribe to last modifications:</div>
</div>
<div class="buttonwrapper">
<input type="button" value="Subscribe" class="button"/>
</div>
</div>
<div class="separatorDashed"> </div>
<div class="formSmallName iconEmail">Email notifications</div>
<div class="formSmallContainer">
<div class="formSmallContainerOptions">
<div class="formSmallMessage">Choose the frequency of your email notifications:</div>
<select>
<option>never</option>
<option selected="selected">hourly</option>
<option>daily</option>
<option>weekly</option>
<option>monthly</option>
</select>
</div>
<div class="buttonwrapper">
<input type="button" value="Save" class="button"/>
</div>
</div>
<span style="">Notifications</span>
</h3>
<div class="formSmallName iconRss">RSS notifications</div>
<div class="formSmallContainer">
<div class="formSmallContainerOptions">
<div class="formSmallMessage">Subscribe to last modifications:</div>
</div>
<div class="buttonwrapper">
<input type="button" value="Subscribe" class="button"/>
</div>
</div>
<div class="separatorDashed"> </div>
<div class="formSmallName iconEmail">Email notifications</div>
<div class="formSmallContainer">
<div class="formSmallContainerOptions">
<div class="formSmallMessage">Choose the frequency of your email notifications:</div>
<select>
<option>never</option>
<option selected="selected">hourly</option>
<option>daily</option>
<option>weekly</option>
<option>monthly</option>
</select>
</div>
<div class="buttonwrapper">
<input type="button" value="Save" class="button"/>
</div>
</div>
4. Create Space
<li class="xitem space">
<div class="xitemcontainer">
<div class="formSmallName">
<a>Create a new space</a>
</div>
<div id="spSpaceCreateForm">
<div class="formSmallInline">
<input type="text" value="Space name"/>
<span class="buttonwrapper">
<input type="button" value="Create" class="button"/>
</span>
</div>
</div>
</div>
</li>
<div class="xitemcontainer">
<div class="formSmallName">
<a>Create a new space</a>
</div>
<div id="spSpaceCreateForm">
<div class="formSmallInline">
<input type="text" value="Space name"/>
<span class="buttonwrapper">
<input type="button" value="Create" class="button"/>
</span>
</div>
</div>
</div>
</li>
5. Create Post
<div class="floatinginfobox dashed">
<div class="formSmallName iconAdd">Create a new post</div>
<div class="formSmallInline">
<input type="text" value="Post title"/>
<span class="buttonwrapper">
<input type="button" value="Create" class="button"/>
</span>
</div>
</div>
<div class="formSmallName iconAdd">Create a new post</div>
<div class="formSmallInline">
<input type="text" value="Post title"/>
<span class="buttonwrapper">
<input type="button" value="Create" class="button"/>
</span>
</div>
</div>