Navigation

← Previous Changeset
Next Changeset →

Changeset 21622

Timestamp:

06/29/07 15:18:49 (1 year ago)

Author:

jmorliaguet

Message:

- made the style editor more "AJAX-like" (NXP-1283)

Files:

Legend:

: Unmodified
: Added
: Removed
: Modified
: Copied
: Moved

org.nuxeo.theme/trunk/nuxeo-theme-jsf-editor-web/src/main/resources/nuxeo.war/nxthemes-jsf-editor/elementStyle.xhtml

r21190	r21622
1	1	<div xmlns="http://www.w3.org/1999/xhtml"
2		xmlns:nxthemes="http://nuxeo.org/nxthemes"
3		xmlns:f="http://java.sun.com/jsf/core"
4		xmlns:h="http://java.sun.com/jsf/html"
5		xmlns:c="http://java.sun.com/jstl/core"
6		xmlns:ui="http://java.sun.com/jsf/facelets">
	2	xmlns:nxthemes="http://nuxeo.org/nxthemes"
	3	xmlns:f="http://java.sun.com/jsf/core"
	4	xmlns:h="http://java.sun.com/jsf/html"
	5	xmlns:c="http://java.sun.com/jstl/core"
	6	xmlns:ui="http://java.sun.com/jsf/facelets">
	7
7	8	<c:choose>
8	9	<c:when test="${nxthemesUiManager.styleOfSelectedElement == null}">
9		<form action="" class="nxthemesForm" onsubmit="NXThemesStyleEditor.createStyle(); return false;">
10		<div>The element has no style.
11		<button>Create a style</button>
	10	<form action="" class="nxthemesForm"
	11	onsubmit="NXThemesStyleEditor.createStyle(); return false;">
	12	<div>
	13	The element has no style.
	14	<button>
	15	Create a style
	16	</button>
12	17	</div>
13	18	</form>
14	19	</c:when>
15	20	<c:otherwise>
	21
16	22	<style id="previewCss" type="text/css"></style>
17	23
18		<div class="nxthemesButtonSelector" style="float: right; padding: 3px; margin-top: -40px">
19		<span>Edit mode:</span>
20		<c:choose>
21		<c:when test="${nxthemesUiStates.styleEditMode == 'css'}">
22		<a href="javascript:void(0)" onclick="NXThemesStyleEditor.setStyleEditMode('form', 'css')">form</a>
23		<a href="javascript:void(0)" class="selected">CSS</a>
24		</c:when>
25		<c:otherwise>
26		<a href="javascript:void(0)" class="selected">form</a>
27		<a href="javascript:void(0)" onclick="NXThemesStyleEditor.setStyleEditMode('css', 'form')">CSS</a>
28		</c:otherwise>
29		</c:choose>
30		</div>
31
32		<div class="nxthemesButtonSelector" style="text-align: left; padding: 4px 15px;">
	24	<div class="nxthemesButtonSelector"
	25	style="text-align: left; padding: 4px 15px;">
33	26	<span>Layers: </span>
34		<ui:repeat value="#{nxthemesUiManager.styleLayersOfSelectedElement}" var="layer">
35		<span><h:outputText escape="false" value="#{layer.rendered}"/></span>
	27	<ui:repeat value="#{nxthemesUiManager.styleLayersOfSelectedElement}"
	28	var="layer">
	29	<span><h:outputText escape="false" value="#{layer.rendered}" />
	30	</span>
36	31	</ui:repeat>
37	32	</div>
…	…
41	36	<td style="width: 50%; vertical-align: top">
42	37	<fieldset class="nxthemesEditor">
43		<legend>Preview</legend>
	38	<legend>
	39	Preview
	40	</legend>
44	41
45		<div id="stylePreviewArea" element="#{nxthemesUiStates.selectedElement.uid}">
46		<img src="/nuxeo/nxthemes-jsf-editor/img/progressbar.gif" alt="" width="220" height="19"
47		style="padding: 5px; border: 1px solid #ccc; background-color: #fff" />
48		<nxthemes:view resource="style-preview.json"/>
	42	<div id="stylePreviewArea"
	43	element="#{nxthemesUiStates.selectedElement.uid}">
	44	<img src="/nuxeo/nxthemes-jsf-editor/img/progressbar.gif" alt=""
	45	width="220" height="19"
	46	style="padding: 5px; border: 1px solid #ccc; background-color: #fff" />
	47	<nxthemes:view resource="style-preview.json" />
49	48	</div>
50	49	</fieldset>
51		<div id="labelInfo" style="display:none"/>
	50	<div id="labelInfo" style="display:none" />
52	51
53	52	</td>
54	53	<td style="width: 50%; vertical-align: top">
55	54
56		<fieldset class="nxthemesEditor">
57		<legend>Properties</legend>
	55	<!-- Style properties form -->
	56	<nxthemes:panel identifier="style properties"
	57	url="/nuxeo/nxthemes-jsf-editor/styleProperties.faces"
	58	controlledBy="style editor perspectives,style editor actions,element form actions"
	59	visibleInPerspectives="style properties,style picker" />
58	60
59		<c:choose>
60		<!-- Inline CSS editing -->
61		<c:when test="${nxthemesUiStates.styleEditMode == 'css'}">
62		<form id="nxthemesElementStyleCSS" class="nxthemesForm" action="" onsubmit="return false">
63		<div>
64		<textarea name="cssSource" rows="15" cols="72"
65		style="width: 100%; height: 250px; font-size: 11px;">#{nxthemesUiManager.renderedElementStyleProperties}</textarea>
66		<input type="hidden" name="id" value="#{nxthemesUiStates.selectedElement.uid}"/>
67		<input type="hidden" name="viewName" value="#{nxthemesUiManager.currentViewName}"/>
68		</div>
69		<div style="padding-top: 10px">
70		<button type="submit">Save</button>
71		</div>
72		</form>
73		</c:when>
74		<!-- Edit form -->
75		<c:otherwise>
76		<form id="nxthemesElementStyle" class="nxthemesForm" action="" onsubmit="return false">
77		<p style="margin-bottom: 10px;">
78		<label>Selector</label>
79		<h:selectOneMenu id="viewName" onchange="NXThemesStyleEditor.chooseStyleSelector(this)" value="#{nxthemesUiStates.currentStyleSelector}">
80		<f:selectItems value="#{nxthemesUiManager.availableStyleSelectorsForSelectedElement}"/>
81		</h:selectOneMenu>
82		<input type="hidden" name="id" value="#{nxthemesUiStates.selectedElement.uid}"/>
83		<input type="hidden" name="path" value="#{nxthemesUiStates.currentStyleSelector}"/>
84		<input type="hidden" name="viewName" value="#{nxthemesUiManager.currentViewName}"/>
85		</p>
	61	<!-- Style picker -->
	62	<nxthemes:panel identifier="style picker"
	63	url="/nuxeo/nxthemes-jsf-editor/stylePicker.faces"
	64	controlledBy="style editor perspectives,toolbox mover"
	65	visibleInPerspectives="style picker" />
86	66
87		~~<c:choose>~~
88		~~<c:when test="${nxthemesUiStates.currentStyleSelector != null}">~~
89		~~<div class="nxthemesButtonSelector" style="padding: 3px">~~
90		~~<span>categories: </span>~~
91		~~<ui:repeat value="#{nxthemesUiManager.styleCategories}" var="category">~~
92		~~<h:outputText escape="false" value="#{category.rendered}"/>~~
93		~~</ui:repeat>~~
94		~~</div>~~
95		~~</c:when>~~
96		~~</c:choose>~~
97
98		~~<c:choose>~~
99		~~<c:when test="${!empty nxthemesUiManager.elementStyleProperties}">~~
100		~~<div style="height: 220px; margin-top: 5px; margin-bottom: 15px; overflow-y: scroll; overflow-x: hidden">~~
101		~~<ui:repeat value="#{nxthemesUiManager.elementStyleProperties}" var="property">~~
102		~~<p>~~
103		~~<h:outputText escape="false" value="#{property.rendered}"/>~~
104		~~</p>~~
105		~~</ui:repeat>~~
106		~~</div>~~
107		~~<button type="submit">Save</button>~~
108		~~</c:when>~~
109		~~</c:choose>~~
110		~~</form>~~
111		~~</c:otherwise>~~
112		~~</c:choose>~~
113		~~</fieldset>~~
114
115		~~</td>~~
116		~~<td style="vertical-align: top">~~
117		~~<!-- Style picker -->~~
118		~~<nxthemes:panel~~
119		~~identifier="style picker"~~
120		~~url="/nuxeo/nxthemes-jsf-editor/stylePicker.faces"~~
121		~~controlledBy="style editor perspectives"~~
122		~~visibleInPerspectives="style picker" />~~
123	67	</td>
124	68	</tr>

org.nuxeo.theme/trunk/nuxeo-theme-jsf-editor-web/src/main/resources/nuxeo.war/nxthemes-jsf-editor/stylePicker.xhtml

r20311	r21622
3	3	xmlns:f="http://java.sun.com/jsf/core"
4	4	xmlns:ui="http://java.sun.com/jsf/facelets"
5		class="nxthemesToolbox">
	5	class="nxthemesToolbox" id="nxthemesStylePicker">
6	6
7		<fieldset class="nxthemesEditor">
8		<legend>Style picker</legend>
	7	<div class="title">
	8	<img class="close" onclick="javascript:NXThemesStyleEditor.closeStylePicker()"
	9	src="/nuxeo/nxthemes-jsf-editor/img/close-button.png" width="14" height="14" alt="" />
	10	Presets - #{nxthemesUiStates.styleCategory}</div>
9	11
10	12	<div class="header">PRESETS:
…	…
27	29	</div>
28	30
29		~~</fieldset>~~
30
31	31	</div>

org.nuxeo.theme/trunk/nuxeo-theme-jsf-editor/src/main/resources/nxthemes/jsf/editor/scripts/style-editor.js

r21000	r21622
22	22
23	23	NXThemesStyleEditor.closeStylePicker = function() {
24		NXThemes.getControllerById('style editor perspectives').switchTo('~~default~~');
	24	NXThemes.getControllerById('style editor perspectives').switchTo('style properties');
25	25	};
26	26
…	…
63	63	NXThemesStyleEditor.setStyleSelector = function(selector) {
64	64	Seam.Component.getInstance("nxthemesEditorAction").setCurrentStyleSelector(
65		selector, NXThemesStyleEditor.refreshEditor);
	65	selector, function(r) {
	66	NXThemes.getControllerById("style editor perspectives").switchTo("style properties");
	67	NXThemes.getViewById("style properties").refresh();
	68	})
66	69	};
67	70
…	…
139	142	NXThemesStyleEditor.setCurrentStyleLayer = function(uid) {
140	143	Seam.Component.getInstance("nxthemesEditorAction").setCurrentStyleLayer(uid,
141		NXThemesStyleEditor.refreshEditor);
	144	function() {
	145	NXThemes.getControllerById('style editor perspectives').switchTo('default');
	146	NXThemes.getViewById("element style").refresh();
	147	});
142	148	};
143	149
…	…
158	164	}
159	165	Seam.Component.getInstance("nxthemesEditorAction").setStyleEditMode(mode,
160		NXThemesStyleEditor.refreshEditor);
	166	function(r) {
	167	NXThemes.getViewById("style properties").refresh();
	168	});
161	169	};
162	170
163	171	NXThemesStyleEditor.setStylePropertyCategory = function(category) {
164	172	Seam.Component.getInstance("nxthemesEditorAction").setStylePropertyCategory(category,
165		NXThemesStyleEditor.refreshEditor);
	173	function(r) {
	174	NXThemes.getViewById("style properties").refresh();
	175	});
166	176	};
167	177

org.nuxeo.theme/trunk/nuxeo-theme-jsf-editor/src/main/resources/nxthemes/jsf/editor/styles/authoring.css

r21459	r21622
694	694	border: none;
695	695	width: 16px;
696		background: ~~#fff~~ url(/nuxeo/nxthemes-jsf-editor/img/style-picker.png) no-repeat;
	696	background: transparent url(/nuxeo/nxthemes-jsf-editor/img/style-picker.png) no-repeat;
697	697	}
698	698
…	…
1044	1044	}
1045	1045
	1046	#nxthemesStylePicker {
	1047	position: absolute;
	1048	z-index: 50;
	1049	right: 10px;
	1050	top: 120px;
	1051	background-color: #fff;
	1052	border: 1px solid #000;
	1053	}
	1054
1046	1055	#nxthemesFragmentFactory {
1047	1056	position: absolute;

Download in other formats: