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
    • 1. Blog's Publish Options 
    • 2. Blog's Manage Categories 
  • 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 
2. Blog's Manage Categories 
3. Fields Manager
4. Watchlist 

1. Blog's Publish Options

• More about Blog's Publish Options 

<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>

2. Blog's Manage Categories

• More about Blog's Manage 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>

3. Watchlist

• More about Watchlist 

<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>  

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>

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>

Translations