rad_common_interface 0.0.6 → 0.0.7

data/app/static/vendor/purr/purr.css

@@ -0,0 +1,43 @@
+.purr-wrapper{
+	margin:10px;
+}
+.purr-alert{
+	margin-bottom:10px;
+	padding:10px;
+	background:#000;
+	font-size:13px;
+	font-weight:bold;
+	color:#FFF;
+	-moz-border-radius:5px;
+	-webkit-border-radius:5px;
+	-moz-box-shadow: 0 0 10px rgba(255,255,0,.25);
+	width:300px;
+}
+/*.purr-alert button{
+  font-size:10px;
+  margin:0 5px;
+}
+*/
+.purr-alert.error{
+	color:#F55;
+}
+/*.purr-alert.success{
+  color:#5F5;
+  padding-left:30px;
+  background:url(../images/success.png) no-repeat #000 7px 10px;
+  width:280px;
+}
+.purr-alert.notice{
+  color:#99F;
+  padding-left:30px;
+  background:url(../images/notice.png) no-repeat #000 7px 10px;
+  width:280px;
+}
+*/
+/*.purr-element-alert{
+  width:200px;
+}
+
+.purr-button-wrapper{
+  text-align:center;
+}*/

data/app/static/vendor/purr/purr.js

@@ -0,0 +1,308 @@
+/*
+---
+script: purr.js
+
+description: Class to create growl-style popup notifications.
+
+license: MIT-style
+
+authors: [atom smith]
+
+requires:
+- core/1.3: [Core, Browser, Array, Function, Number, String, Hash, Event, Class.Extras, Element.Event, Element.Style, Element.Dimensions, Fx.CSS, FX.Tween, Fx.Morph]
+
+provides: [Purr, Element.alert]
+...
+*/
+
+
+var Purr = new Class({
+
+	'options': {
+		'mode': 'top',
+		'position': 'left',
+		'elementAlertClass': 'purr-element-alert',
+		'elements': {
+			'wrapper': 'div',
+			'alert': 'div',
+			'buttonWrapper': 'div',
+			'button': 'button'
+		},
+		'elementOptions': {
+			'wrapper': {
+				'styles': {
+					'position': 'fixed',
+					'z-index': '9999'
+				},
+				'class': 'purr-wrapper'
+			},
+			'alert': {
+				'class': 'purr-alert',
+				'styles': {
+					'opacity': '.85'
+				}
+			},
+			'buttonWrapper': {
+				'class': 'purr-button-wrapper'
+			},
+			'button': {
+				'class': 'purr-button'
+			}
+		},
+		'alert': {
+			'buttons': [],
+			'clickDismiss': true,
+			'hoverWait': true,
+			'hideAfter': 5000,
+			'fx': {
+				'duration': 500
+			},
+			'highlightRepeat': false,
+			'highlight': { // false to disable highlighting
+				'start': '#FF0',
+				'end': false
+			}
+		}
+	},
+
+	'Implements': [Options, Events, Chain],
+
+	'initialize': function(options){
+		this.setOptions(options);
+		this.createWrapper();
+		return this;
+	},
+
+	'bindAlert': function(){
+		return this.alert.bind(this);
+	},
+
+	'createWrapper': function(){
+		this.wrapper = new Element(this.options.elements.wrapper, this.options.elementOptions.wrapper);
+		if(this.options.mode == 'top')
+		{
+			this.wrapper.setStyle('top', 0);
+		}
+		else
+		{
+			this.wrapper.setStyle('bottom', 0);
+		}
+		document.id(document.body).grab(this.wrapper);
+		this.positionWrapper(this.options.position);
+	},
+
+	'positionWrapper': function(position){
+		if(typeOf(position) == 'object')
+		{
+
+			var wrapperCoords = this.getWrapperCoords();
+
+			this.wrapper.setStyles({
+				'bottom': '',
+				'left': position.x,
+				'top': position.y - wrapperCoords.height,
+				'position': 'absolute'
+			});
+		}
+		else if(position == 'left')
+		{
+			this.wrapper.setStyle('left', 0);
+		}
+		else if(position == 'right')
+		{
+			this.wrapper.setStyle('right', 0);
+		}
+		else
+		{
+			this.wrapper.setStyle('left', (window.innerWidth / 2) - (this.getWrapperCoords().width / 2));
+		}
+		return this;
+	},
+
+	'getWrapperCoords': function(){
+		this.wrapper.setStyle('visibility', 'hidden');
+		var measurer = this.alert('need something in here to measure');
+		var coords = this.wrapper.getCoordinates();
+		measurer.destroy();
+		this.wrapper.setStyle('visibility','');
+		return coords;
+	},
+
+	'alert': function(msg, options){
+
+		options = Object.merge({}, this.options.alert, options || {});
+
+		var alert = new Element(this.options.elements.alert, this.options.elementOptions.alert);
+
+		if(typeOf(msg) == 'string')
+		{
+			alert.set('html', msg);
+		}
+		else if(typeOf(msg) == 'element')
+		{
+			alert.grab(msg);
+		}
+		else if(typeOf(msg) == 'array')
+		{
+			var alerts = [];
+			msg.each(function(m){
+				alerts.push(this.alert(m, options));
+			}, this);
+			return alerts;
+		}
+
+		alert.store('options', options);
+
+		if(options.buttons.length > 0)
+		{
+			options.clickDismiss = false;
+			options.hideAfter = false;
+			options.hoverWait = false;
+			var buttonWrapper = new Element(this.options.elements.buttonWrapper, this.options.elementOptions.buttonWrapper);
+			alert.grab(buttonWrapper);
+			options.buttons.each(function(button){
+				if(button.text !== undefined)
+				{
+					var callbackButton = new Element(this.options.elements.button, this.options.elementOptions.button);
+					callbackButton.set('html', button.text);
+					if(button.callback !== undefined)
+					{
+						callbackButton.addEvent('click', button.callback.pass(alert));
+					}
+					if(button.dismiss !== undefined && button.dismiss)
+					{
+						callbackButton.addEvent('click', this.dismiss.pass(alert, this));
+					}
+					buttonWrapper.grab(callbackButton);
+				}
+			}, this);
+		}
+		if(options.className !== undefined)
+		{
+			alert.addClass(options.className);
+		}
+
+		this.wrapper.grab(alert, (this.options.mode == 'top') ? 'bottom' : 'top');
+
+		var fx = Object.merge(this.options.alert.fx, options.fx);
+		var alertFx = new Fx.Morph(alert, fx);
+		alert.store('fx', alertFx);
+		this.fadeIn(alert);
+
+		if(options.highlight)
+		{
+			alertFx.addEvent('complete', function(){
+				alert.highlight(options.highlight.start, options.highlight.end);
+				if(options.highlightRepeat)
+				{
+					alert.highlight.periodical(options.highlightRepeat, alert, [options.highlight.start, options.highlight.end]);
+				}
+			});
+		}
+		if(options.hideAfter)
+		{
+			this.dismiss(alert);
+		}
+
+		if(options.clickDismiss)
+		{
+			alert.addEvent('click', function(){
+				this.holdUp = false;
+				this.dismiss(alert, true);
+			}.bind(this));
+		}
+
+		if(options.hoverWait)
+		{
+			alert.addEvents({
+				'mouseenter': function(){
+					this.holdUp = true;
+				}.bind(this),
+				'mouseleave': function(){
+					this.holdUp = false;
+				}.bind(this)
+			});
+		}
+
+		return alert;
+	},
+
+	'fadeIn': function(alert){
+		var alertFx = alert.retrieve('fx');
+		alertFx.set({
+			'opacity': 0
+		});
+		alertFx.start({
+			'opacity': [this.options.elementOptions.alert.styles.opacity, '.9'].pick()
+		});
+	},
+
+	'dismiss': function(alert, now){
+		now = now || false;
+		var options = alert.retrieve('options');
+		if(now)
+		{
+			this.fadeOut(alert);
+		}
+		else
+		{
+			this.fadeOut.delay(options.hideAfter, this, alert);
+		}
+	},
+
+	'fadeOut': function(alert){
+		if(this.holdUp)
+		{
+			this.dismiss.delay(100, this, [alert, true]);
+			return null;
+		}
+		var alertFx = alert.retrieve('fx');
+		if(!alertFx)
+		{
+			return null;
+		}
+		var to = {
+			'opacity': 0
+		};
+		if(this.options.mode == 'top')
+		{
+			to['margin-top'] = '-'+alert.offsetHeight+'px';
+		}
+		else
+		{
+			to['margin-bottom'] = '-'+alert.offsetHeight+'px';
+		}
+		alertFx.start(to);
+		alertFx.addEvent('complete', function(){
+			alert.destroy();
+		});
+	}
+});
+
+Element.implement({
+
+	'alert': function(msg, options){
+		var alert = this.retrieve('alert');
+		if(!alert)
+		{
+			options = options || {
+				'mode':'top'
+			};
+			alert = new Purr(options);
+			this.store('alert', alert);
+		}
+
+		var coords = this.getCoordinates();
+
+		alert.alert(msg, options);
+
+		alert.wrapper.setStyles({
+			'bottom': '',
+			'left': (coords.left - (alert.wrapper.getWidth() / 2)) + (this.getWidth() / 2),
+			'top': coords.top - (alert.wrapper.getHeight()),
+			'position': 'absolute'
+		});
+
+	}
+
+});

data/app/views/face/_attachments_tag.html.haml

@@ -0,0 +1,17 @@
+.the_attachments
+  - if object.value?
+    - object.value.each do |file|
+      .l_item
+        %a{href: file.url}= file.name
+        %a{href: '#', class: 'l_remove_button'}= t(:remove_attachment)
+        = hidden_field_tag object.name, file.name
+        .css_clear
+
+  %textarea.l_file_field_template.hidden
+    .l_item
+      = file_field_tag object.name
+      .l_attachment_stub{style: 'display: none'}
+      %a{href: '#', class: 'l_remove_button', style: 'display: none;'}= t(:remove_attachment)
+      .css_clear
+
+  .css_clear

data/app/views/rad/face/demo/commons/aspects.html.haml

@@ -0,0 +1,32 @@
+= render '/rad/face/demo/shared/top_navigation_bottom'
+
+= render '/rad/face/demo/shared/tools'
+
+- content_for :aspects do
+  = b.divider "Controls"
+  - b.controls id: "controls_id", class: "controls_class" do |o|
+    - o.left do |a|
+      - a.add link_to('Compose', "#", class: 'icn_compose')
+      - a.add link_to('Move', "#")
+      - a.add link_to('Delete', "#")
+
+    - o.right do |a|
+      - a.add link_to('Archive', "#", class: 'icn_compose')
+      - a.add link_to('Filter', "#")
+
+  = b.divider "Tags and Details"
+  - b.details id: "details_id", class: "details_class" do |o|
+    - o.tags samples.tags
+    - o.details samples.details
+  
+  = b.divider "Comments"
+  = render '/rad/face/demo/shared/comments'
+  
+  = b.divider "Visibility Tags"
+  - visibility_tags = [['owner', 'm_owner_visibility'], ['member', 'm_member_visibility']].collect{|t, v| tag :div, t, class: v}
+  - item_type = [tag(:div, 'Note', class: 'm_item_type')]
+  - b.details do |o|
+    - o.tags samples.tags + visibility_tags + item_type
+    
+  = b.divider "Paginator"
+  = render '/rad/face/demo/shared/paginator'

data/app/views/rad/face/demo/commons/basic.html.haml

@@ -0,0 +1,86 @@
+= render '/rad/face/demo/shared/top_navigation_bottom'
+
+= render '/rad/face/demo/shared/tools'
+
+- content_for :top_aspects do
+  = b.divider "Messages"
+
+  = b.message 'Info message'
+  - b.message type: :error do
+    Error Message
+    
+- content_for :bottom_aspects do
+  = b.divider "Custom content" 
+
+  = render themed_partial('/html')
+          
+= b.divider "Title"
+= b.title "The Title", id: "title_id", class: "title_class"    
+
+= b.divider "Tabs"
+
+- b.tabs id: "tabs_id", class: "tabs_class" do |o|
+  - samples.tabs.each do |name|
+    - if samples.active_tab == name
+      - o.add name: name, active: true
+    - else
+      - o.add name: link_to(name, "#")
+      
+= b.divider "Tabs with content"
+
+- b.tabs id: "tabs_id", class: "tabs_class" do |o|
+  - o.add name: 'Contacts', active: true do
+    Contacts ...
+  - o.add name: 'Import' do
+    Import ...
+  - o.add name: 'Cathegories' do
+    Cathegories ...
+
+
+= b.divider "Toolbar"
+
+- b.toolbar id: "toolbar_id", class: "toolbar_class" do |o|
+  - o.left do |a|
+    - a.add link_to('Compose', "#", class: 'icn_compose')
+    - a.add link_to('Move', "#")
+    - a.add link_to('Delete', "#")
+
+  - o.right do |a|
+    - a.add link_to('Archive', "#", class: 'icn_compose')
+    - a.add link_to('Filter', "#")
+    
+
+= b.divider "List"
+
+- b.basic_list id: "list_id", class: "list_class" do |o|
+  - o.content do
+    = b.basic_list_item "First Line", id: "list_id_1", class: "list_class_1"
+    = b.basic_list_item "Second Line", check_box: check_box_tag(:tmp), id: "list_id_2", class: "list_class_2"  
+
+= b.divider "Table" 
+
+- b.table id: "table_id", class: "table_class", on: 3 do |o| 
+  - o.head ["Name", "Position", "Actions"]
+  - o.rows do |a|
+    - a.add b.table_row(["Alex", "Manager", "<a href='#'>Delete</a>"], id: "table_id_1", class: "table_class_1")
+    - a.add b.table_row(["Bob", "Worker", "<a href='#'>Delete</a>"])
+    - a.add b.table_row(["Fred", "Executer", "<a href='#'>Delete</a>"])
+
+
+= b.divider "Table without header" 
+
+- b.table do |o| 
+  - o.rows do |a|
+    = a.add b.table_row(["Alex", "Manager", "<a href='#'>Delete</a>"])
+    - a.add do
+      - b.table_row do |o| 
+        - o.content do |a|
+          - a.add "Fred"
+          - a.add "Executer"
+          - a.add "<a href='#'>Delete</a>" 
+
+
+= b.divider "Text" 
+
+- b.text do
+  Some Text <a href='#'>Some Link</a>

data/app/views/rad/face/demo/commons/forms.html.haml

@@ -0,0 +1,57 @@
+= render '/rad/face/demo/shared/top_navigation_bottom'
+
+= render '/rad/face/demo/shared/tools'
+
+= b.divider "Form"
+
+- b.form_tag id: 'basic_form_tag', action: '/some_action' do |f|
+  = f.error_messages "First", "Second"
+
+  = f.hidden_field_tag :hidden_field, "value"
+    
+  = f.check_box_tag :check_box, true, label: ""
+  = f.text_field_tag :text_field1, "Some Name", label: "Field with error", errors: ["Error 1", "Error 2"]
+  = f.text_field_tag :text_field2, "Some Name", label: "Type something here", description: "Add something valuable, (its description for this text_field)" 
+  = f.text_area_tag :text_area, "Some text"
+  = f.text_field_tag :text_field3, "", required: true, label: "Required field"
+  
+  - f.form_field label: "Visibility" do 
+    = %w{one two three}.collect{|n| radio_button_tag('radio_button', n, theme: false) + label_tag("group_#{n}", n)}.join(' ')
+  
+  - b.more id: 'stub', name: "..." do
+    = f.text_field_tag :text_field4, "", label: "Extra Fields"
+    
+  = f.line submit_tag("Ok"), link_to("Cancel", "#")
+
+= b.divider "Form for"
+
+- b.form_for :model, samples.model, id: 'basic_form_for', action: '/some_action' do |f| 
+  = f.error_messages 
+
+  = f.hidden_field_tag :somehidden_field, "value" 
+  = f.hidden_field :name 
+
+  = f.check_box :active, label: "" 
+  = f.text_field :name, label: "Type something here", description: "Add something valuable, (its description for this text_field)" 
+  = f.text_area :body, label: false 
+  
+  = f.text_field_tag :name, "value" 
+  
+  = f.line f.submit("Ok"), link_to("Cancel", "#")
+  
+  
+= b.divider "Form with Attachments"
+
+- model = {files_as_attachments1: [{name: 'image1.jpg', url: '/some_path/image1.jpg'}, {name: 'image2.jpg', url: '/some_path/image2.jpg'}], files_as_attachments2: []}
+- b.form_for :model, model do |f|
+  = f.text_field :name, label: "Name"
+
+  = f.line
+
+  = f.attachments :files_as_attachments1, label: false
+
+  = f.line
+
+  = f.attachments :files_as_attachments2, label: 'Images'
+
+  = f.line submit_tag("Ok"), link_to("Cancel", "#")

data/app/views/rad/face/demo/commons/items.html.haml

@@ -0,0 +1,32 @@
+= render '/rad/face/demo/shared/top_navigation_bottom'
+
+= render '/rad/face/demo/shared/tools'          
+
+= b.divider "Item"
+- b.item id: "item_id", class: "item_class" do |o|
+  - o.name "Terminator movie series"
+  - o.text samples.text
+  - o.controls samples.controls
+  - o.attachments samples.attachments
+  - o.tags samples.tags      
+  - o.details samples.details
+          
+= b.divider "Thumb"
+- 10.times do
+  - attachment = random_attachment
+  - b.thumb id: 'thumb_id', class: "thumb_class" do |o|
+    - o.controls samples.controls
+    - o.image attachment
+    - o.url attachment.url
+    - o.name 'Picture 1.jpg'
+.css_clear 
+  
+= b.divider "Line"
+- b.line id: "line_id", class: "line_class" do |o|
+  - o.name samples.name
+  - o.image samples.attachments.first
+  - o.url samples.attachments.first.url
+  - o.text samples.detail_text
+  - o.controls samples.controls
+  - o.tags samples.tags      
+  - o.details samples.details

data/app/views/rad/face/demo/commons/style.html.erb

@@ -0,0 +1,111 @@
+<% b.text do %>
+  
+
+  <h1>Heading, Paragraphs, Line Breaks, Links, Bold, Italic</h1>
+  <h1>Heading 1</h1>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+  <h2>Heading 2</h2>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+  <h3>Heading 3</h3>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>    
+  <p>The Terminator (1984) <a href='#'>More at IMDbPro</a></p>
+  <p>In the Year of Darkness, 2029, the rulers of this planet devised the ultimate plan. They would reshape the Future by changing the Past. The plan required something that felt no pity. No pain. No fear. Something unstoppable. <b>They created 'THE TERMINATOR'</b>
+  <br/>The thing that won't die, in the <i>nightmare that won't end</i>. A human-looking, apparently unstoppable cyborg is sent from the future to kill Sarah Connor; Kyle Reese is sent to stop it.</p>
+  <p>Your future is in his hands.</p>
+  <h3>Unsorted list</h3>
+  <ul>
+    <li>Blandit in, interdum a</li>
+    <li>Ultrices non lectus</li>
+    <li>Nunc id odio</li>
+    <li>Fusce ultricies</li>
+  </ul>
+  <h3>Ordered list</h3>
+  <ol>
+    <li>Blandit in, interdum a</li>
+    <li>Ultrices non lectus</li>
+    <li>Nunc id odio</li>
+    <li>Fusce ultricies</li>
+  </ol>
+  
+
+  <h1>Images inside links should be modified to ImageBox</h1>
+  <a href="<%= url_for("/static/demo/images/img1.jpg") %>">
+    <img src="<%= url_for("/static/demo/images/img1_icon.jpg") %>"></img>
+  </a>
+  <a href="<%= url_for("/static/demo/images/img2.jpg") %>">
+    <img src="<%= url_for("/static/demo/images/img2_icon.jpg") %>"></img>
+  </a>
+  <a href="<%= url_for("/static/demo/images/img3.jpg") %>">
+    <img src="<%= url_for("/static/demo/images/img3_icon.jpg") %>"></img>
+  </a>
+
+
+  <h1>Left and right styles for images</h1>
+  <div class='left'>
+    <a href="<%= url_for("/static/demo/images/img1.jpg") %>">
+      <img src="<%= url_for("/static/demo/images/img1_icon.jpg") %>"></img>
+    </a>
+  </div>
+  <p>In the Year of Darkness, 2029, the rulers of this planet devised the ultimate plan. They would reshape the Future by changing the Past. The plan required something that felt no pity. No pain. No fear. Something unstoppable. They created 'THE TERMINATOR'</p>
+  <div class='right'>
+    <a href="<%= url_for("/static/demo/images/img2.jpg") %>">
+      <img src="<%= url_for("/static/demo/images/img2_icon.jpg") %>"></img>
+    </a>
+  </div>
+  <p>The thing that won't die, in the nightmare that won't end. A human-looking, apparently unstoppable cyborg is sent from the future to kill Sarah Connor; Kyle Reese is sent to stop it.</p>
+  <p>In the Year of Darkness, 2029, the rulers of this planet devised the ultimate plan. They would reshape the Future by changing the Past. The plan required something that felt no pity. No pain. No fear. Something unstoppable. They created 'THE TERMINATOR'
+  <br/>The thing that won't die, in the nightmare that won't end. A human-looking, apparently unstoppable cyborg is sent from the future to kill Sarah Connor; Kyle Reese is sent to stop it.</p>
+
+
+  <h1>Left and right styles for arbitrary content</h1>
+  <div class='left'>
+    <b>The Terminator (1984) <a href='#'>More at IMDbPro</a> <br/> A human-looking, apparently unstoppable cyborg.</b>
+  </div>
+  <p>In the Year of Darkness, 2029, the rulers of this planet devised the ultimate plan. They would reshape the Future by changing the Past. The plan required something that felt no pity. No pain. No fear. Something unstoppable. They created 'THE TERMINATOR'</p>
+  <div class='right'>
+    <b>The Terminator (1984) <a href='#'>More at IMDbPro</a> <br/> A human-looking, apparently unstoppable cyborg.</b>
+  </div>
+  <p>The thing that won't die, in the nightmare that won't end. A human-looking, apparently unstoppable cyborg is sent from the future to kill Sarah Connor; Kyle Reese is sent to stop it.</p>
+  <p>In the Year of Darkness, 2029, the rulers of this planet devised the ultimate plan. They would reshape the Future by changing the Past. The plan required something that felt no pity. No pain. No fear. Something unstoppable. They created 'THE TERMINATOR'
+  <br/>The thing that won't die, in the nightmare that won't end. A human-looking, apparently unstoppable cyborg is sent from the future to kill Sarah Connor; Kyle Reese is sent to stop it.</p>
+
+
+  <h1>Image by default should be alligned to the Left</h1>
+  <img src="<%= url_for("/static/demo/images/img1_thumb.jpg") %>"></img>
+  <p>In the Year of Darkness, 2029, the rulers of this planet devised the ultimate plan. They would reshape the Future by changing the Past. The plan required something that felt no pity. No pain. No fear. Something unstoppable. They created 'THE TERMINATOR'</p>
+  <p>The thing that won't die, in the nightmare that won't end. A human-looking, apparently unstoppable cyborg is sent from the future to kill Sarah Connor; Kyle Reese is sent to stop it.</p>
+
+  
+  <h1>Image by default should be alligned to the Left, even if it wrapped (from error)</h1>    
+  <img src="<%= url_for("/static/demo/images/img1_thumb.jpg") %>"></img>
+  <p>      
+    In the Year of Darkness, 2029, the rulers of this planet devised the ultimate plan. They would reshape the Future by changing the Past. The plan required something that felt no pity. No pain. No fear. Something unstoppable. They created 'THE TERMINATOR'
+  </p>
+  <p>The thing that won't die, in the nightmare that won't end. A human-looking, apparently unstoppable cyborg is sent from the future to kill Sarah Connor; Kyle Reese is sent to stop it.</p>
+
+
+  <h1>Image by default should be alligned to the Left</h1>
+  <a href="http://www.youtube.com/watch?v=pdPy4crWuCA" title="Zombieland Trailer" class='_video'>
+    <img src="<%= url_for("/static/demo/images/video_icon.png") %>"></img>
+  </a>
+  <p>In the Year of Darkness, 2029, the rulers of this planet devised the ultimate plan. They would reshape the Future by changing the Past. The plan required something that felt no pity. No pain. No fear. Something unstoppable. They created 'THE TERMINATOR'</p>
+  <p>The thing that won't die, in the nightmare that won't end. A human-looking, apparently unstoppable cyborg is sent from the future to kill Sarah Connor; Kyle Reese is sent to stop it.</p>
+
+
+  <h1>Clear and Space</h1>
+  <div class='left'>This text splitted</div> <div class='clear'></div> <div class='left'>in two lines by clear div.</div>
+  <div class='clear'></div>
+  <div class='left'>This text splitted</div> <div class='space'></div> <div class='left'>in two lines by space div.</div>
+  <div class='clear'></div>
+  
+  
+  <!-- <h1>Autoclear after last image in line</h1>
+  <a href="<%= url_for("/static/demo/images/img1.jpg") %>">
+    <img src="<%= url_for("/static/demo/images/img1_icon.jpg") %>"></img>
+  </a>
+  <a href="<%= url_for("/static/demo/images/img2.jpg") %>">
+    <img src="<%= url_for("/static/demo/images/img2_icon.jpg") %>"></img>
+  </a>
+  This text should be on the newline -->
+      
+<% end %>

data/app/views/rad/face/demo/dialogs/dialog.js.haml

@@ -0,0 +1 @@
+rad.info('Dialog successfully submited!');