}
.tsort-box {
float: left;
+ font-size: 12px;
}
.scenario {
float: left;
.tsort-row-break {
clear: both;
}
+.tsort-tabs-nav {
+ padding: .2em .1em .2em .2em;
+ width: 220px;
+}
.tsort {
list-style-type: none;
margin: 0;
margin: 0 3px 3px 3px;
padding: 0.3em;
padding-left: 1em;
- font-size: 15px;
- font-weight: bold;
+ font-size: 12px;
cursor: move;
}
.tsort-row-break {
clear: both;
}
+.zsort-box {
+ font-size: 12px;
+}
+.zsort-tabs-nav {
+ padding: .2em .1em .2em .2em;
+ width: 220px;
+}
.zsort {
list-style-type: none;
margin: 0;
margin: 0 3px 3px 3px;
padding: 0.3em;
padding-left: 1em;
- font-size: 15px;
- font-weight: bold;
- cursor: move;
-}
-#z-sortable tr {
- margin: 0 3px 3px 3px;
- padding: 0.3em;
- padding-left: 1em;
- font-size: 15px;
- font-weight: bold;
+ font-size: 12px;
cursor: move;
}
.ui-slider .ui-slider-handle {
font-size: 12px;
}
.ui-tabs-vertical {
- width: 65em;
}
.ui-tabs-vertical .ui-tabs-nav {
padding: .2em .1em .2em .2em;
- float: left; width: 220px;
+ float: left;
+ width: 220px;
}
.ui-tabs-vertical .ui-tabs-nav li {
clear: left; width: 100%;
}
.ui-tabs-vertical .ui-tabs-panel {
padding: 1em;
- float: right;
+ float: left;
width: 35em;
+ float: right;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
margin-bottom: 0.2em;
}
.elements-tab {
width: 100%;
-}
-.elements-tab {
overflow: hidden;
height: auto;
}
overflow: hidden;
height: auto;
}
-.elements-tab-caption {
- white-space: pre; /* CSS 2.0 */
- white-space: pre-wrap; /* CSS 2.1 */
- white-space: pre-line; /* CSS 3.0 */
- white-space: -pre-wrap; /* Opera 4-6 */
- white-space: -o-pre-wrap; /* Opera 7 */
- white-space: -moz-pre-wrap; /* Mozilla */
- white-space: -hp-pre-wrap; /* HP Printers */
- word-wrap: break-word; /* IE 5+ */
+.elements-tab-face-icon {
+ float: left;
+}
+.elements-tab-face-caption {
+ float: left;
+}
+.elements-tab-face-end {
+ clear: both;
}
.ui-button .ui-icon.ui-icon-destroy {
width: 16px;
<li id="<%= elm.field_tag_id(:element_tab) -%>">
<a href="#elements-tabs-<%= elm.t -%>">
<div class="elements-tab">
- <% case elm.class.to_s %>
- <% when 'PanelPicture' %>
- <%= tag(:img, elm.tmb_opt_img_tag) %>
- <p class="elements-tab-caption">
- <% -%>
- <%= h(truncate(elm.caption, :length => 15)) -%>
- </p>
- <% when 'SpeechBalloon' %>
- <%= tag(:img, elm.speech_balloon_template.system_picture.tmb_opt_img_tag) %>
- <p class="elements-tab-caption"><%= h(truncate(elm.caption, :length => 15)) -%>
- <br><%= h(truncate(elm.speech.content, :length => 15)) -%>
- </p>
- <% when 'GroundPicture' %>
- <%= tag(:img, elm.tmb_opt_img_tag) -%>
- <p class="elements-tab-caption"><%= h(truncate(elm.caption, :length => 15)) -%>
- </p>
- <% when 'GroundColor' %>
- <div style="color: #<%= format("%06x", elm.code ^ 0xffffff) -%>; background-color: #<%= format("%06x", elm.code) -%>; width: 48px; height: 48px; ">
- <%= format("%06x", elm.code) %>
- </div>
- <p class="elements-tab-caption"><%= h(truncate(elm.caption, :length => 15)) -%>
- </p>
- <% end %>
- </div>
+ <%= render elm.class.to_s.tableize + '/element_face', :elm => elm %>
+ </div>
</a>
<button class="ui-icon-destroy" id="<%= elm.field_tag_id(:_destroy_button) -%>" panel_id="<%= elm.tag_panel_id -%>" element_id="<%= elm.tag_element_id -%>" element_type="<%= elm.tag_element_type -%>"></button>
</li>
</div>
<div id="tabs-3">
<div class="tsort-box">
- <ul id="<%= @panel.tag_id -%>tsort" class="tsort" panel_id="<%= @panel.tag_panel_id -%>">
+ <ul id="<%= @panel.tag_id -%>tsort" class="tsort tsort-tabs-nav" panel_id="<%= @panel.tag_panel_id -%>">
<% @panel.panel_elements.each do |elm| %>
<li id="<%= elm.field_tag_id(:tsort) -%>" panel_id="<%= elm.tag_panel_id -%>" element_id="<%= elm.tag_element_id -%>" element_type="<%= elm.tag_element_type -%>">
- <% case elm.class.to_s %>
- <% when 'PanelPicture' %>
- <span>
- <%= tag(:img, elm.tmb_opt_img_tag) %>
- </span>
- <% when 'SpeechBalloon' %>
- <span>
- <%= elm.id -%>
- <%= h(truncate(elm.speech.content, :length => 12)) -%>
- </span>
- <% when 'GroundPicture' %>
- <span>
- <%= tag(:img, elm.tmb_opt_img_tag) -%>
- </span>
- <% when 'GroundColor' %>
- <span style="color: #<%= format("%06x", elm.code ^ 0xffffff) -%>; background-color: #<%= format("%06x", elm.code) -%>;">
- <%= format("%06x", elm.code ^ 0xffffff) %>
- </span>
- <% end %>
- <span>
- <%= h(truncate(elm.caption, :length => 12)) %>
- </span>
+ <div class="elements-tab">
+ <%= render elm.class.to_s.tableize + '/element_face', :elm => elm %>
+ </div>
</li>
<% end %>
</ul>
</div>
<div id="tabs-4">
<div class="zsort-box">
- <ul id="<%= @panel.tag_id -%>zsort" class="zsort" panel_id="<%= @panel.tag_panel_id -%>">
+ <ul id="<%= @panel.tag_id -%>zsort" class="zsort zsort-tabs-nav" panel_id="<%= @panel.tag_panel_id -%>">
<% @panel.zorderd_elements.each do |elm| %>
<li id="<%= elm.field_tag_id(:zsort) -%>" panel_id="<%= elm.tag_panel_id -%>" element_id="<%= elm.tag_element_id -%>" element_type="<%= elm.tag_element_type -%>">
- <% case elm.class.to_s %>
- <% when 'PanelPicture' %>
- <span>
- <%= tag(:img, elm.tmb_opt_img_tag) %>
- </span>
- <% when 'SpeechBalloon' %>
- <span>
- <%= elm.id -%>
- <%= elm.caption -%>
- </span>
- <% when 'GroundPicture' %>
- <span>
- <%= tag(:img, elm.tmb_opt_img_tag) -%>
- </span>
- <% when 'GroundColor' %>
- <span style="color: #<%= format("%06x", elm.code ^ 0xffffff) -%>; background-color: #<%= format("%06x", elm.code) -%>;">
- <%= format("%06x", elm.code ^ 0xffffff) %>
- </span>
- <% end %>
- <span>
- <%= h(truncate(elm.caption, :length => 12)) %>
- </span>
+ <div class="elements-tab">
+ <%= render elm.class.to_s.tableize + '/element_face', :elm => elm %>
+ </div>
</li>
<% end %>
</ul>