Small Form Component

Last modified by Vincent Massol on 2024/02/26 17:55

 XWiki
 Implementation
 Completed

Description

Small Form Component

 Dependance on  Icons Component 

 $xwiki.ssfx.use("icons/icons.css", true) 

 $xwiki.ssfx.use("uicomponents/form/form.css") 

Usage

Expandable Container Small Forms

 

PublishOptions.pngCategories.pngFieldsManager.png

Simple Container Small Forms

Watchlist.png

Inline Small Forms

InlineCreateSpace.pngInlineCreatePost.png

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

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>

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

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

4. Create Space

InlineCreateSpace.png

<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

InlineCreatePost.png

<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


 

Tags:
    

Get Connected