Skip to content
Snippets Groups Projects
Commit d0520cd5 authored by srosse's avatar srosse
Browse files

OO-1068: bootstrapify multi-selection tree (see in publish wizard)

parent d562e6cb
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 112 additions and 142 deletions
src/main/java/org/olat/core/commons/modules/bc/FolderRunController.java
+ 0
− 6
View file @ d0520cd5
......@@ -52,7 +52,6 @@ import org.olat.core.gui.components.Component;
import org.olat.core.gui.components.download.DisplayOrDownloadComponent;
import org.olat.core.gui.components.link.Link;
import org.olat.core.gui.components.link.LinkFactory;
import org.olat.core.gui.components.tree.SelectionTree;
import org.olat.core.gui.components.velocity.VelocityContainer;
import org.olat.core.gui.control.Controller;
import org.olat.core.gui.control.Event;
......@@ -101,7 +100,6 @@ public class FolderRunController extends BasicController implements Activateable
private VelocityContainer folderContainer;
private SelectionTree selTree;
private SubscriptionContext subsContext;
private ContextualSubscriptionController csController;
......@@ -260,10 +258,6 @@ public class FolderRunController extends BasicController implements Activateable
}
}
selTree = new SelectionTree("seltree", getTranslator());
selTree.addListener(this);
folderContainer.put("seltree", selTree);
// jump to either the forum or the folder if the business-launch-path says so.
ContextEntry ce = bc.popLauncherContextEntry();
if ( ce != null ) { // a context path is left for me
......
src/main/java/org/olat/core/gui/components/form/flexible/impl/elements/MultipleSelectionRenderer.java
+ 5
− 4
View file @ d0520cd5
......@@ -133,10 +133,7 @@ public class MultipleSelectionRenderer extends DefaultComponentRenderer {
sb.append("<label class='checkbox").append("-inline", inline)
.append(" ").append(cssClass, cssClass != null)
.append("' for=\"").append(formDispatchId).append("\">");
String iconLeftCSS = check.getIconLeftCSS();
if (StringHelper.containsNonWhitespace(iconLeftCSS)) {
sb.append(" <i class='").append(iconLeftCSS).append("'> </i> ");
}
sb.append("<input type='checkbox' id='").append(formDispatchId).append("' ")
.append(subStrName)
.append(" value='").append(key).append("'");
......@@ -150,6 +147,10 @@ public class MultipleSelectionRenderer extends DefaultComponentRenderer {
sb.append(FormJSHelper.getRawJSFor(check.getRootForm(), check.getSelectionElementFormDispatchId(), check.getAction()));
}
sb.append(" />");
String iconLeftCSS = check.getIconLeftCSS();
if (StringHelper.containsNonWhitespace(iconLeftCSS)) {
sb.append(" <i class='").append(iconLeftCSS).append("'> </i> ");
}
if (StringHelper.containsNonWhitespace(value)) {
sb.append(" ").append(value);
}
......
src/main/java/org/olat/core/gui/components/form/flexible/impl/elements/SelectionTreeComponentRenderer.java
+ 45
− 75
View file @ d0520cd5
......@@ -46,15 +46,7 @@ import org.olat.core.util.tree.INodeFilter;
*
*/
class SelectionTreeComponentRenderer extends DefaultComponentRenderer {
private static final String imgDots = "<div class=\"b_selectiontree_line\"></div>";
private static final String imgDots_spacer = "<div class=\"b_selectiontree_space\"></div>";
private static final String imgDots_nt = "<div class=\"b_selectiontree_junction\"></div>";
private static final String imgDots_nl = "<div class=\"b_selectiontree_end\"></div>";
/* (non-Javadoc)
* @see org.olat.core.gui.components.ComponentRenderer#render(org.olat.core.gui.render.Renderer, org.olat.core.gui.render.StringOutput, org.olat.core.gui.components.Component, org.olat.core.gui.render.URLBuilder, org.olat.core.gui.translator.Translator, org.olat.core.gui.render.RenderResult, java.lang.String[])
*/
@Override
public void render(Renderer renderer, StringOutput sb, Component source,
URLBuilder ubu, Translator translator, RenderResult renderResult,
......@@ -64,82 +56,60 @@ class SelectionTreeComponentRenderer extends DefaultComponentRenderer {
Map<String,CheckboxElement> checkboxes = stc.getSubComponents();
TreeModel tm = stc.getTreeModel();
TreeNode rootNode = tm.getRootNode();
TreeNode rootNode = (TreeNode)tm.getRootNode().getChildAt(0);
INodeFilter selectableFilter = stc.getSelectableFilter();
sb.append("<div class=\"form b_selectiontree\">");
renderRootNode(rootNode, sb);
renderChildNodes(rootNode, "", stc.hashCode(), sb, renderer, stc, checkboxes, selectableFilter, args);
sb.append("</div>");
}
private void renderRootNode(TreeNode root, StringOutput target) {
target.append("\n<div class=\"b_selectiontree_item\">");
renderNodeIcon(target, root);
target.append("<div class=\"b_selectiontree_content\">");
// text using css if available
String cssClass = root.getCssClass();
if (cssClass != null) target.append("<span class=\"").append(cssClass).append("\">");
target.append(StringEscapeUtils.escapeHtml(root.getTitle()));
if (cssClass != null) target.append("</span>");
target.append("</div></div>");
sb.append("<div class='o_selection_tree'><ul class='o_selection_tree_l0'>");
renderNode(rootNode, rootNode, 0, stc.hashCode(), sb, renderer, stc, checkboxes, selectableFilter, args);
sb.append("</ul></div>");
}
private void renderNode(TreeNode currentNode, TreeNode root, int level, int treeID, StringOutput sb, Renderer renderer,
SelectionTreeComponent stc, Map<String,CheckboxElement> checkboxes,
INodeFilter selectableFilter, String[] args) {
private void renderChildNodes(TreeNode root, String indent, int treeID, StringOutput sb, Renderer renderer,
SelectionTreeComponent stc, Map<String,CheckboxElement> checkboxes, INodeFilter selectableFilter, String[] args) {
String newIndent = indent + imgDots;
// extract directories
int childcnt = root.getChildCount();
for (int i = 0; i < childcnt; i++) {
TreeNode child = (TreeNode) root.getChildAt(i);
if(selectableFilter != null && !selectableFilter.isVisible(child)) {
continue;
}
// BEGIN of choice div
sb.append("\n<div class=\"form-group b_selectiontree_item\">");
// render all icons first
// indent and dots-images
sb.append(indent);
if (i < childcnt - 1) {
sb.append(imgDots_nt);
} else {
sb.append(imgDots_nl);
}
// custom icon if available
sb.append("<div class=\"b_selectiontree_content\">");
if(selectableFilter == null || selectableFilter.isVisible(currentNode)) {
sb.append("<li><div>");
// append radio or checkbox if selectable
if (child.isAccessible()) {
renderCheckbox(sb, child, checkboxes.get(child.getIdent()), stc);
if(currentNode == root) {
String cssClass = root.getCssClass();
sb.append("<span class='o_tree_l").append(level).append(" ")
.append(cssClass, cssClass != null).append("'>");
renderNodeIcon(sb, currentNode);
sb.append(StringEscapeUtils.escapeHtml(root.getTitle()))
.append("</span>");
} else if (currentNode.isAccessible()) {
renderCheckbox(sb, currentNode, level, checkboxes.get(currentNode.getIdent()), stc);
} else {
// node title (using css if available)
String cssClass = child.getCssClass();
sb.append("<span ").append("class='o_disabled'", child.isAccessible()).append(">");
renderNodeIcon(sb, child);
String cssClass = currentNode.getCssClass();
sb.append("<span class='o_tree_l").append(level).append(" ")
.append(" o_disabled", currentNode.isAccessible()).append("'>");
renderNodeIcon(sb, currentNode);
if(cssClass != null) {
sb.append("<i class='").append(cssClass).append("'> </i> ");
}
sb.append(StringEscapeUtils.escapeHtml(child.getTitle()));
renderNodeDecorator(sb, child);
sb.append(StringEscapeUtils.escapeHtml(currentNode.getTitle()));
renderNodeDecorator(sb, currentNode);
sb.append("</span>");
}
// END of choice div
sb.append("</div></div>");
sb.append("</div>");
// do the same for all children
if (i < childcnt - 1) {
renderChildNodes(child, newIndent, treeID, sb, renderer, stc, checkboxes, selectableFilter, args);
} else {
renderChildNodes(child, indent + imgDots_spacer, treeID, sb, renderer, stc, checkboxes, selectableFilter, args);
int childcnt = currentNode.getChildCount();
if(childcnt > 0) {
int childLevel = level + 1;
sb.append("<ul class='o_tree_l").append(childLevel).append("'>");
for (int i = 0; i < childcnt; i++) {
renderNode((TreeNode)currentNode.getChildAt(i), root, childLevel, treeID, sb, renderer, stc, checkboxes, selectableFilter, args);
}
sb.append("</ul>");
}
} // for recursion
} // buildTargets
sb.append("</li>");
}
}
private void renderCheckbox(StringOutput sb, TreeNode node, CheckboxElement check, SelectionTreeComponent stc) {
private void renderCheckbox(StringOutput sb, TreeNode node, int level, CheckboxElement check, SelectionTreeComponent stc) {
MultiSelectionTree stF = stc.getSelectionElement();
String subStrName = "name=\"" + check.getGroupingName() + "\"";
......@@ -153,16 +123,11 @@ class SelectionTreeComponentRenderer extends DefaultComponentRenderer {
boolean selected = check.isSelected();
//read write view
sb.append("<div class='checkbox'>")
sb.append("<div class='checkbox o_tree_l").append(level).append("'>")
.append(" <label for=\"").append(stc.getFormDispatchId()).append("\">");
String cssClass = check.getCssClass(); //optional CSS class
String iconLeftCSS = check.getIconLeftCSS();
renderNodeIcon(sb, node);
if (StringHelper.containsNonWhitespace(iconLeftCSS) || StringHelper.containsNonWhitespace(cssClass)) {
sb.append(" <i class='").append(iconLeftCSS, iconLeftCSS != null)
.append(" ").append(cssClass, cssClass != null).append("'> </i> ");
}
sb.append("<input type='checkbox' id='").append(stc.getFormDispatchId()).append("' ")
.append(subStrName)
......@@ -177,6 +142,11 @@ class SelectionTreeComponentRenderer extends DefaultComponentRenderer {
sb.append(" disabled='disabled' ");
}
sb.append(" />");
renderNodeIcon(sb, node);
if (StringHelper.containsNonWhitespace(iconLeftCSS) || StringHelper.containsNonWhitespace(cssClass)) {
sb.append(" <i class='").append(iconLeftCSS, iconLeftCSS != null)
.append(" ").append(cssClass, cssClass != null).append("'> </i> ");
}
if (StringHelper.containsNonWhitespace(value)) {
sb.append(value);
}
......
src/main/java/org/olat/core/gui/components/form/flexible/impl/elements/table/AbstractFlexiTableRenderer.java
+ 5
− 5
View file @ d0520cd5
......@@ -214,7 +214,7 @@ public abstract class AbstractFlexiTableRenderer extends DefaultComponentRendere
sb.append("<div class='btn-group'>")
.append("<button class='btn btn-default dropdown-toggle' data-toggle='dropdown'>")
.append("<i class='o_icon o_icon_filter o_icon-lg'>&nbsp;</i> <b class='caret'></b></button>")
.append("<i class='o_icon o_icon_filter o_icon-lg'> </i> <b class='caret'></b></button>")
.append("<ul class='dropdown-menu dropdown-menu-right' role='menu'>");
for(FlexiTableFilter filter:filters) {
......@@ -223,7 +223,7 @@ public abstract class AbstractFlexiTableRenderer extends DefaultComponentRendere
} else {
sb.append("<li><a href=\"javascript:")
.append(FormJSHelper.getXHRFnCallFor(theForm, dispatchId, 1, new NameValuePair("filter", filter.getFilter())))
.append("\">").append("<i class='o_icon o_icon_check o_icon-fw'>&nbsp;</i> ", filter.isSelected())
.append("\">").append("<i class='o_icon o_icon_check o_icon-fw'> </i> ", filter.isSelected())
.append(filter.getLabel()).append("</a></li>");
}
}
......@@ -236,7 +236,7 @@ public abstract class AbstractFlexiTableRenderer extends DefaultComponentRendere
sb.append("<div class='btn-group'>")
.append("<button class='btn btn-default dropdown-toggle' data-toggle='dropdown'>")
.append("<i class='o_icon o_icon_sort_menu o_icon-lg'>&nbsp;</i> <b class='caret'></b></button>")
.append("<i class='o_icon o_icon_sort_menu o_icon-lg'> </i> <b class='caret'></b></button>")
.append("<ul class='dropdown-menu dropdown-menu-right' role='menu'>");
for(FlexiTableSort sort:sorts) {
......@@ -250,9 +250,9 @@ public abstract class AbstractFlexiTableRenderer extends DefaultComponentRendere
.append("\">");
if(sort.isSelected()) {
if(sort.getSortKey().isAsc()) {
sb.append("<i class='o_icon o_icon_sort_desc o_icon-fw'>&nbsp;</i> ");
sb.append("<i class='o_icon o_icon_sort_desc o_icon-fw'> </i> ");
} else {
sb.append("<i class='o_icon o_icon_sort_asc o_icon-fw'>&nbsp;</i> ");
sb.append("<i class='o_icon o_icon_sort_asc o_icon-fw'> </i> ");
}
}
sb.append(sort.getLabel()).append("</a></li>");
......
src/main/java/org/olat/core/gui/components/tree/SelectionTreeRenderer.java
+ 14
− 14
View file @ d0520cd5
......@@ -47,10 +47,10 @@ import org.olat.core.util.tree.TreeHelper;
*/
public class SelectionTreeRenderer extends DefaultComponentRenderer {
private static String imgDots = "<div class=\"b_selectiontree_line\"></div>";
private static String imgDots_spacer = "<div class=\"b_selectiontree_space\"></div>";
private static String imgDots_nt = "<div class=\"b_selectiontree_junction\"></div>";
private static String imgDots_nl = "<div class=\"b_selectiontree_end\"></div>";
private static String imgDots = "<div class=\"o_selectiontree_line\"></div>";
private static String imgDots_spacer = "<div class=\"o_selectiontree_space\"></div>";
private static String imgDots_nt = "<div class=\"o_selectiontree_junction\"></div>";
private static String imgDots_nl = "<div class=\"o_selectiontree_end\"></div>";
/**
* <code>ATTR_SELECTION</code>
*/
......@@ -108,7 +108,7 @@ public class SelectionTreeRenderer extends DefaultComponentRenderer {
target.append(tree.isMultiselect() ? SCRIPT_MULTI_PRE : SCRIPT_SINGLE_PRE);
target.append(translator.translate("alert"));
target.append(SCRIPT_POST);
target.append("<div class=\"b_selectiontree");
target.append("<div class=\"o_selection_tree");
if(StringHelper.containsNonWhitespace(tree.getElementCssClass())) {
target.append(" ").append(tree.getElementCssClass());
}
......@@ -168,9 +168,9 @@ public class SelectionTreeRenderer extends DefaultComponentRenderer {
}
private void renderRootNode(TreeNode root, StringOutput target) {
target.append("\n<div class=\"b_selectiontree_item\">");
target.append("\n<div class=\"o_selectiontree_item\">");
renderNodeIcon(target, root);
target.append("<div class=\"b_selectiontree_content\">");
target.append("<div class=\"o_selectiontree_content\">");
// text using css if available
String cssClass = root.getCssClass();
if (cssClass != null) target.append("<span class=\"").append(cssClass).append("\">");
......@@ -188,7 +188,7 @@ public class SelectionTreeRenderer extends DefaultComponentRenderer {
for (int i = 0; i < childcnt; i++) {
TreeNode child = (TreeNode) root.getChildAt(i);
// BEGIN of choice div
sb.append("\n<div class=\"b_selectiontree_item\">");
sb.append("\n<div class=\"o_selectiontree_item\">");
// render all icons first
// indent and dots-images
sb.append(indent);
......@@ -198,8 +198,8 @@ public class SelectionTreeRenderer extends DefaultComponentRenderer {
sb.append(imgDots_nl);
}
// custom icon if available
renderNodeIcon(sb, child);
sb.append("\n<div class=\"b_selectiontree_content\">");
sb.append("<div class='o_selectiontree_content'>");
// append radio or checkbox if selectable
if (child.isAccessible()) {
......@@ -231,6 +231,7 @@ public class SelectionTreeRenderer extends DefaultComponentRenderer {
if (cssClass != null) sb.append("<span class=\"").append(cssClass).append("\">");
if (!child.isAccessible() && greyOutNonSelectable) {
sb.append("<span class=\"o_disabled\">");
renderNodeIcon(sb, child);
if(tree.isEscapeHtml()) {
sb.append(StringEscapeUtils.escapeHtml(child.getTitle()));
} else {
......@@ -239,10 +240,9 @@ public class SelectionTreeRenderer extends DefaultComponentRenderer {
sb.append("</span>");
} else {
if (child.getAltText() != null && showAltTextAsHoverOnTitle) {
sb.append("<span ");
sb.append(" onmouseover=\"o_showEventDetails(' ', '");
sb.append(child.getAltText());
sb.append("');\" onmouseout=\"return nd();\" onclick=\"return nd();\">");
sb.append("<span onmouseover=\"o_showEventDetails(' ', '")
.append(child.getAltText())
.append("');\" onmouseout=\"return nd();\" onclick=\"return nd();\">");
if(tree.isEscapeHtml()) {
sb.append(StringEscapeUtils.escapeHtml(child.getTitle()));
} else {
......
src/main/java/org/olat/course/editor/EditorMainController.java
+ 0
− 8
View file @ d0520cd5
......@@ -46,7 +46,6 @@ import org.olat.core.gui.components.stack.TooledStackedPanel;
import org.olat.core.gui.components.stack.TooledStackedPanel.Align;
import org.olat.core.gui.components.tabbedpane.TabbedPane;
import org.olat.core.gui.components.tree.MenuTree;
import org.olat.core.gui.components.tree.SelectionTree;
import org.olat.core.gui.components.tree.TreeDropEvent;
import org.olat.core.gui.components.tree.TreeEvent;
import org.olat.core.gui.components.tree.TreeNode;
......@@ -157,7 +156,6 @@ public class EditorMainController extends MainLayoutBasicController implements G
private VelocityContainer main;
private TabbedPane tabbedNodeConfig;
private SelectionTree selTree;
private CourseEditorTreeModel cetm;
private TabbableController nodeEditCntrllr;
......@@ -279,12 +277,6 @@ public class EditorMainController extends MainLayoutBasicController implements G
menuTree.setOpenNodeIds(Collections.singleton(cetm.getRootNode().getIdent()));
menuTree.addListener(this);
selTree = new SelectionTree("selection", getTranslator());
selTree.setTreeModel(cetm);
selTree.setActionCommand("processpublish");
selTree.setFormButtonKey("publizieren");
selTree.addListener(this);
tabbedNodeConfig = new TabbedPane("tabbedNodeConfig", ureq.getLocale());
tabbedNodeConfig.setElementCssClass("o_node_config");
main.put(tabbedNodeConfig.getComponentName(), tabbedNodeConfig);
......
src/main/webapp/static/themes/light/modules/_courseeditor.scss
+ 1
− 26
View file @ d0520cd5
......@@ -5,33 +5,8 @@
.o_desc {
}
}
}
#o_course_editor_errorbox ul, #o_course_editor_warningbox ul {
list-style-type: none;
}
#o_course_editor_choose_nodetype {
}
/* SELECTION TREE (when you insert a BuildingBlock into a course) */
div.b_selectiontree {
font-size: 95%;
div.b_selectiontree_item {
clear: both; position: relative; top: 0; left: 0; vertical-align:middle; height: 16px; width: auto;
div { width:16px; height: 16px; float: left; display: inline; background-repeat: no-repeat; }
div.b_selectiontree_content { float: left; display: inline; margin-left: 0.5em; width: auto; white-space: nowrap; }
}
div.b_selectiontree_content {
width: auto;
div { width: auto;}
input { width: 1em; height: 1em; padding: 0; margin: 0 0.5em; vertical-align: middle;}
input.b_radio { margin: 0;}
}
.b_selectiontree_line {background-image: url(../openolat/images/tree/dots.gif); }
.b_selectiontree_space {background-image: url(../openolat/images/tree/dots_spacer.gif); }
.b_selectiontree_junction {background-image: url(../openolat/images/tree/dots_nt.gif); }
.b_selectiontree_end {background-image: url(../openolat/images/tree/dots_nl.gif); }
}
}
\ No newline at end of file
src/main/webapp/static/themes/light/modules/_translationtool.scss
+ 3
− 2
View file @ d0520cd5
/* inline translation tool */
span.o_translation_i18nitem { position: relative ! important; }
span.o_translation_i18nitem {
position: relative ! important;
}
span.o_translation_i18nitem a.o_translation_i18nitem_launcher {
position: absolute ! important;
z-index: 100 ! important;
......
src/main/webapp/static/themes/light/modules/_tree.scss
+ 37
− 0
View file @ d0520cd5
......@@ -137,4 +137,41 @@
.o_tree {
border: 0;
}
}
.o_selection_tree {
position: relative;
display: block;
background-color: $o-tree-bg;
border: 1px solid $o-tree-border-color;
@include border-top-radius($o-tree-border-radius);
@include border-bottom-radius($o-tree-border-radius);
overflow: hidden;
font-size: $o-tree-font-size;
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
margin: 0;
padding: 0;
white-space: nowrap;
}
li div {
position: relative;
margin-bottom: -1px;
border-bottom: 1px solid $o-tree-border-color;
}
@for $i from 0 through 11 {
li>div>span.o_tree_l#{$i}, li>div>div.checkbox.o_tree_l#{$i} {
display:block;
padding: $o-tree-padding-vertical 2px $o-tree-padding-vertical ($o-tree-padding-horizontal_root_visible + ($i * $o-tree-padding-steps-px));
z-index:9;
}
}
}
\ No newline at end of file
src/main/webapp/static/themes/light/theme.css
+ 2
− 2
View file @ d0520cd5
This diff is collapsed.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment