Collapsible Form Component

Version 97.1 by Ecaterina Valica on 2009/07/31 12:46
Warning: For security reasons, the document is displayed in restricted mode as it is not the current version. There may be differences and errors due to this.

Failed to execute the [velocity] macro. Cause: [The execution of the [velocity] script macro is not allowed in [incubator:Tech.CssFormSmall]. Check the rights of its last author or the parameters if it's rendered from another script.]. Click on this message for details.

formInline Component

Usage

Container formInlines

 

PublishOptions.pngCategories.pngFieldsManager.pngWatchlist.png

Failed to execute the [velocity] macro. Cause: [The execution of the [velocity] script macro is not allowed in [incubator:Tech.CssFormSmall]. Check the rights of its last author or the parameters if it's rendered from another script.]. Click on this message for details.

Inline formInlines

InlineCreateSpace.pngInlineCreatePost.png

Failed to execute the [velocity] macro. Cause: [The execution of the [velocity] script macro is not allowed in [incubator:Tech.CssFormSmall]. Check the rights of its last author or the parameters if it's rendered from another script.]. Click on this message for details.

CSS

.formInline {
margin-left: 10px;
margin-right: 10px;
margin-top: 5px;
width: 212px;
}

.formInlineName {
font-style: normal;
font-size: 11px;
font-weight: bold;
color: #888;
text-transform: uppercase;
white-space:nowrap;
width: 97%;
}

.formInlineName a {
color: #888;
}

.formInlineStatus {
margin-left: 3px;
font-size: 12px;
text-transform: none;
font-weight: bold;
color: #4d4d4d;
}

.formInlineRow {
 display: block;
 white-space:nowrap;
 vertical-align: middle;
}

.formInlineContainer {
border-width: 0px;
padding: 7px 18px 7px 18px;
background-color: transparent;
margin-bottom: 5px;
}

.formInline .formInlineContainer {
border-top: 1px dashed #E4E4E5;
background-color: #FAFAFD;
margin-top: 5px;
}

.formInlineContainerOptions {
width: 175px;
}

.formInlineContainer .buttonwrapper, .formInlineRow .buttonwrapper{
padding: 0px;
margin: 0px;
}

.formInlineContainer  .separator {
border-bottom: 1px dashed #E4E4E5;
display: block;
margin-top: 10px;
margin-bottom: 5px;
line-height: 1px;
}

.formInlineContainer label{
color: #888;
text-transform: uppercase;
font-size: 11px;
font-weight: bold;
font-family: sans-serif;
font-style: normal;
display: block;
}

.formInlineContainerOptions select ,
.formInlineContainerOptions input,
.formInlineContainerOptions textarea,
.formInlineRow select ,
.formInlineRow input,
.formInlineRow textarea {
border: 1px solid #ccc;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 5px;
}

.formInlineContainerOptions select ,
.formInlineContainerOptions  input,
.formInlineContainerOptions  textarea {
display: block;
width: 100%;
}

.formInlineContainer input[type=hidden]{
border: none;
}

.formInlineContainer select {
text-transform: capitalize;
}

.formInlineMessage {
color: #888;
font-size: 12px;
display: block;
text-align: justify;
margin-bottom: 5px;
}

.formInlineContainer .preview {
background-color: #fff;
width: 95%;
text-align: left;
padding: 5px;
padding-right: 7px;
display: block;
}
/* Different Icon Types */

.icon, .iconAdd, .iconEdit, .iconDelete,
.iconRss, .iconEmail, .iconPublish, .iconPrivate, .iconSchedule {
 background: transparent no-repeat scroll left center;
 padding-left: 18px;
}

.iconAdd {
 background-image: url(/xwiki/resources/icons/silk/add.gif);
}

.iconEdit {
  background-image: url(/xwiki/resources/icons/silk/pencil.gif);
}

.iconDelete {
  background-image: url(/xwiki/resources/icons/silk/delete.gif);  
}

.iconRss {
  background-image: url(/xwiki/skins/albatross/icons/black%2Drss%2Dmini.png);  
}

.iconEmail {
  background-image: url(/xwiki/resources/icons/silk/email.gif);  
}

.iconPublish{
  background-image: url(/xwiki/resources/icons/silk/page_white_put.gif);  
}

.iconPrivate {
  background-image: url(/xwiki/resources/icons/silk/lock.gif);  
}

.iconSchedule {
  background-image: url(/xwiki/resources/icons/silk/clock.gif);  
}

HTML

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

Failed to execute the [velocity] macro. Cause: [The execution of the [velocity] script macro is not allowed in [incubator:Tech.CssFormSmall]. Check the rights of its last author or the parameters if it's rendered from another script.]. Click on this message for details.

<div class="formInline">
 <div class="formInlineName iconPublish">Status:<span class="formInlineStatus">Published</span></div>
 <div class="formInlineContainer">
  <div class="formInlineContainerOptions">
   <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="formInline">
 <div class="formInlineName iconPrivate">Visibility:<span class="formInlineStatus">Public</span></div>
 <div class="formInlineContainer">
  <div class="formInlineContainerOptions">
   <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="formInline">
 <div class="formInlineName iconSchedule">Schedule on:<span class="formInlineStatus">Now</span></div>
 <div class="formInlineContainer">
  <div class="formInlineContainerOptions">
   <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

Failed to execute the [velocity] macro. Cause: [The execution of the [velocity] script macro is not allowed in [incubator:Tech.CssFormSmall]. Check the rights of its last author or the parameters if it's rendered from another script.]. Click on this message for details.

 <div class="formInline">
  <div class="formInlineName iconAdd"><a>Create new category</a></div>
  <div class="formInlineContainer">
   <div class="formInlineContainerOptions">
    <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="formInline">
  <div class="formInlineName iconEdit"> Edit a category </div>
  <div class="formInlineContainer">
   <div class="formInlineContainerOptions">
    <input type="text" value="Urgente" name="newCategoryName"/>
   </div>
   <div class="buttonwrapper">
    <input type="button" value="Save" class="button"/>
   </div>
  </div>
 </div>
 <div class="formInline">
  <div class="formInlineName iconDelete"> Delete selected categories </div>
  <div class="formInlineContainer">
   <div class="formInlineContainerOptions">
    <div class="formInlineMessage">Do you want to delete the selected categories?</div>
   </div>
   <div class="buttonwrapper">
    <input type="button" value="Delete" class="button"/>
   </div>
  </div>
 </div>

3. Fields Manager

Failed to execute the [velocity] macro. Cause: [The execution of the [velocity] script macro is not allowed in [incubator:Tech.CssFormSmall]. Check the rights of its last author or the parameters if it's rendered from another script.]. Click on this message for details.

<div class="formInline">
 <div class="formInlineName icon" style="background-image:  url(/xwiki/resources/icons/silk/application_form.gif)">Create new field type</div>
 <div class="formInlineContainer">
  <div class="formInlineContainerOptions">
   <label>Field Name:</label>
   <input type="text" value="Name"/>
   <label>Field Type:</label>
   <select>
    <option selected="selected">text</option>
    <option>password</option>
    <option>textarea</option>
    <option>WYSIWYG editor</option>
    <option>checkbox list</option>
    <option>radiobutton list</option>
    <option>dropdown list</option>
    <option>image</option>
    <option>link</option>
   </select>
   <div class="separator"> </div>
   <label>Preview:</label>
   <div class="preview">
    <label>Name</label>
    <input type="text" value=""/>
   </div>
  </div>
  <div class="buttonwrapper">
   <input type="button" value="Create" class="button"/>
  </div>
 </div>
</div>

4. Watchlist

Failed to execute the [velocity] macro. Cause: [The execution of the [velocity] script macro is not allowed in [incubator:Tech.CssFormSmall]. Check the rights of its last author or the parameters if it's rendered from another script.]. Click on this message for details.

<h3>
   <span style="">Notifications</span>
  </h3>
  <div class="formInlineName iconRss">RSS notifications</div>
  <div class="formInlineContainer">
   <div class="formInlineContainerOptions">
    <div class="formInlineMessage">Subscribe to last modifications:</div>
   </div>
      <div class="buttonwrapper">
    <input type="button" value="Subscribe" class="button"/>
   </div>
  </div>
  <div style="border-bottom: 1px dashed rgb(228, 228, 229); display: block; line-height: 3px; margin-top: 10px; margin-bottom: 10px; width: 100%" class="separator"> </div>
  <div class="formInlineName iconEmail">Email notifications</div>
  <div class="formInlineContainer">
   <div class="formInlineContainerOptions">
    <div class="formInlineMessage">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>  

5. Create Space

InlineCreateSpace.png

<li class="xitem space">
<div class="xitemcontainer">
  <div class="formInlineName">
    <a>Create a new space</a>
  </div>
  <div id="spSpaceCreateForm">
    <div class="formInlineRow">   
         <input type="text" value="Space name"/>   
         <span class="buttonwrapper">
             <input type="button" value="Create" class="button"/>
         </span>
    </div>
  </div>
</div>
</li>

6. Create Post

InlineCreatePost.png

<div class="floatinginfobox dashed">
  <div class="formInlineName iconAdd">Create a new post</div>
  <div class="formInlineRow">
    <input type="text" value="Post title"/>
    <span class="buttonwrapper">
      <input type="button" value="Create" class="button"/>
    </span>
  </div>
</div>

Translations