Commit bd659670 authored by Arthur Bogaart's avatar Arthur Bogaart

HSTCONFIGEDIT-174: Restyle DescriptionPicker

 - Moved new-page button to below page picker
 - don't show ugly 'no-thumbnail' anymore
 - new SVG arrow icons (rotated by CSS until correct icons are present in hippo-theme)
 -
parent 76cde0a9
......@@ -21,34 +21,37 @@
</div>
<div class="description-picker" wicket:id="description-picker-container">
<div class="picker-prev">
<a wicket:id="prev"><img wicket:id="prevImg" width="20"/></a>
<a wicket:id="prev">
<span wicket:id="icon"/>
</a>
</div>
<div class="picker-data" wicket:id="selector">
<table>
<tr>
<td colspan="2">
<span style="font-weight: bold">
<td class="description-picker-label">
<span>
<wicket:message key="picker.name.label">Name:</wicket:message>
</span><span wicket:id="name">[ Name ]</span>
</span>
<span wicket:id="name">[ Name ]</span>
</td>
</tr>
<tr>
<td>
<tr wicket:id="description-picker-preview">
<td class="description-picker-preview">
<img wicket:id="thumb"/>
</td>
<td style="vertical-align: top">
<span wicket:id="description">[ Description ]</span>
</td>
</tr>
<tr>
<td colspan="2">
<td>
<a wicket:id="select"><span wicket:id="selectLabel">[ Select ]</span></a>
</td>
</tr>
</table>
</div>
<div class="picker-next">
<a wicket:id="next"><img wicket:id="nextImg" width="20"/></a>
<a wicket:id="next">
<span wicket:id="icon"/>
</a>
</div>
</div>
</wicket:panel>
......
......@@ -30,7 +30,6 @@ import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.markup.html.AjaxLink;
import org.apache.wicket.markup.html.WebMarkupContainer;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.image.Image;
import org.apache.wicket.markup.html.image.NonCachingImage;
import org.apache.wicket.markup.html.panel.Panel;
import org.apache.wicket.model.AbstractReadOnlyModel;
......@@ -42,7 +41,10 @@ import org.apache.wicket.request.resource.ResourceStreamResource;
import org.apache.wicket.util.io.IClusterable;
import org.apache.wicket.util.resource.IResourceStream;
import org.hippoecm.frontend.model.JcrNodeModel;
import org.hippoecm.frontend.plugins.standards.icon.HippoIcon;
import org.hippoecm.frontend.plugins.standards.list.resolvers.CssClass;
import org.hippoecm.frontend.service.IconSize;
import org.hippoecm.frontend.skin.Icon;
import org.hippoecm.hst.plugins.frontend.editor.context.HstContext;
import org.hippoecm.hst.plugins.frontend.editor.dao.EditorDAO;
import org.hippoecm.hst.plugins.frontend.editor.domain.Descriptive;
......@@ -52,6 +54,7 @@ import org.slf4j.LoggerFactory;
public class DescriptionPicker extends Panel {
static final Logger log = LoggerFactory.getLogger(DescriptionPicker.class);
public static final PackageResourceReference DEFAULT_THUMBNAIL = new PackageResourceReference(DescriptionPicker.class, "no_thumb.jpg");
public interface DescriptionProvider extends IClusterable {
List<Descriptive> load();
......@@ -130,8 +133,8 @@ public class DescriptionPicker extends Panel {
return current > 0;
}
};
prev.add(new Image("prevImg", new PackageResourceReference(DescriptionPicker.class, "prev.png")));
pickerContainer.add(prev);
prev.add(HippoIcon.fromSprite("icon", Icon.ARROW_FAT_DOWN_CIRCLE, IconSize.L));
AjaxLink next = new AjaxLink("next") {
......@@ -149,8 +152,8 @@ public class DescriptionPicker extends Panel {
return descriptives.size() > current + 1;
}
};
next.add(new Image("nextImg", new PackageResourceReference(DescriptionPicker.class, "next.png")));
pickerContainer.add(next);
next.add(HippoIcon.fromSprite("icon", Icon.ARROW_FAT_DOWN_CIRCLE, IconSize.L));
WebMarkupContainer selector = new WebMarkupContainer("selector");
selector.setOutputMarkupId(true);
......@@ -219,7 +222,7 @@ public class DescriptionPicker extends Panel {
return descriptive != null ? descriptive.getIconResource() : null;
}
};
selector.add(new NonCachingImage("thumb", iconResourceModel) {
final NonCachingImage thumbnail = new NonCachingImage("thumb", iconResourceModel) {
@Override
protected IResource getImageResource() {
......@@ -230,22 +233,39 @@ public class DescriptionPicker extends Panel {
protected ResourceReference getImageResourceReference() {
IResourceStream iconResource = iconResourceModel.getObject();
if (iconResource == null) {
return new PackageResourceReference(DescriptionPicker.class, "no_thumb.jpg");
return DEFAULT_THUMBNAIL;
}
setImageResourceReference(null);
return null;
}
});
};
thumbnail.add(CssClass.append(new AbstractReadOnlyModel<String>() {
@Override
public String getObject() {
return iconResourceModel.getObject() == null ? "hidden-thumbnail" : StringUtils.EMPTY;
}
}));
selector.add(new Label("description", new AbstractReadOnlyModel<String>() {
final WebMarkupContainer preview = new WebMarkupContainer("description-picker-preview") {
@Override
public boolean isVisible() {
return super.isVisible() && (iconResourceModel.getObject() != null
|| (getCurrentDescriptive() != null
&& StringUtils.isNotEmpty(getCurrentDescriptive().getDescription())));
}
};
preview.setOutputMarkupId(true);
preview.add(thumbnail);
preview.add(new Label("description", new AbstractReadOnlyModel<String>() {
@Override
public String getObject() {
Descriptive descriptive = getCurrentDescriptive();
return descriptive != null ? descriptive.getDescription() : StringUtils.EMPTY;
}
}));
selector.add(preview);
}
public void refresh() {
......
......@@ -30,13 +30,12 @@
<label for="contentPath"><wicket:message key="matcher.contentpath">Content path</wicket:message></label><input type="text" name="contentPath" wicket:id="contentPath" style="width: 230px;"/> <span name="path" wicket:id="path">[Link Picker]</span>
</div>
<div>
<br/>
<!-- <label for="pagepicker"><wicket:message key="page.label">Page</wicket:message></label> -->
<wicket:message key="page.picker.label">Select a page from the list below or </wicket:message>
<a wicket:id="newPage" style="margin-left: 10px;">
<div wicket:id="pagePicker">[ Page picker ]</div>
<a wicket:id="newPage" class="page-picker-link btn btn-sm btn-default">
<wicket:message key="page.new.label">create a new page.</wicket:message>
</a>
<div wicket:id="pagePicker">[ Page picker ]</div>
</div>
</fieldset>
<div wicket:id="params">[ Parameters ]</div>
......
......@@ -11,7 +11,7 @@ matcher.contentpath: Content path
page.label: Page design
page.new.label: Create a new web page design
page.picker.label: <b>Page design:</b> Browse the list below and click to select a web page design<br/>or
page.picker.label: Page design
node-unique-validator.error: A URL design with the same level pattern already exists under the same parent level
node.removed: URL design {0} removed.
......@@ -199,6 +199,10 @@ div.hst-editor-form fieldset div ul {
width: 100%;
}
.hst-editor-form .page-picker-link {
margin-top: 8px;
}
.parameters {
width: 100%;
}
......@@ -258,40 +262,93 @@ div.hst-editor-form fieldset div.description-picker-empty {
margin-top: 8px;
}
div.hst-editor-form fieldset div.description-picker {
width: 415px;
.hst-editor-form fieldset .description-picker {
width: 461px;
border: 1px solid #e3e3e3;
margin-top: 10px;
margin-top: 8px;
border-radius: 5px;
}
div.hst-editor-form fieldset div.description-picker table tr td {
padding: 5px;
.hst-editor-form .description-picker-label span:first-of-type{
font-weight: bold;
}
div.description-picker div.picker-prev, div.description-picker div.picker-data {
.description-picker .picker-prev,
.description-picker .picker-data {
float: left;
clear: none;
}
div.description-picker div.picker-prev img {
margin-left: 5px;
.description-picker .picker-prev,
.description-picker .picker-next {
padding: 4px;
}
div.description-picker div.picker-data {
margin-left: 10px;
width: 345px;
.description-picker .picker-prev a,
.description-picker .picker-next a {
color: #22272f;
}
.description-picker .picker-prev a:hover,
.description-picker .picker-next a:hover {
color: #0086f8;
}
.description-picker .picker-prev em,
.description-picker .picker-next em {
color: #9ba0a5;
fill: #9ba0a5;
}
.description-picker .picker-prev .hi {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.description-picker .picker-data {
width: 380px;
cursor: pointer;
}
div.description-picker div.selected {
.description-picker .picker-data table {
width: 100%;
}
.description-picker .picker-data table td {
padding: 8px 8px 8px 4px;
}
.description-picker .picker-data table td.description-picker-label {
padding-top: 12px;
}
.description-picker .picker-data .description-picker-preview img {
margin-right: 8px;
padding-left: 8px;
padding-top: 8px;
}
.description-picker .picker-data .description-picker-preview span {
vertical-align: top;
padding-top: 8px;
}
.description-picker .selected {
background-color: #e3e3e3;
cursor: default;
}
div.description-picker div.picker-next {
.description-picker .picker-next {
float: right;
clear: none;
margin-right: 5px;
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
.description-picker .hidden-thumbnail {
display: none;
}
div.hst-perspective-left-body {
......
......@@ -44,7 +44,7 @@
<product_name>Hippo Addon HST Configuration Editor</product_name>
<product_abr>HSTCONFIGEDIT</product_abr>
<hippo.cms.version>2.28.00</hippo.cms.version>
<hippo.cms.version>2.28.01-SNAPSHOT</hippo.cms.version>
<hippo.repository.version>2.28.00</hippo.repository.version>
<hippo.hst.version>2.30.00</hippo.hst.version>
<commons-lang.version>2.1</commons-lang.version>
......
Markdown is supported
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