View File | Revision Log | Show Annotations | Download File | View Changeset
/hippo/hippo-cms7/essentials/branches/essentials-2.2.0-gallery-manager/plugins/gallery-manager/src/main/resources/META-INF/resources/tool/galleryPlugin/galleryPlugin.html
(Generate patch)

Comparing hippo-cms7/essentials/branches/essentials-2.2.0-gallery-manager/plugins/gallery-manager/src/main/resources/META-INF/resources/tool/galleryPlugin/galleryPlugin.html (file contents):
Revision 57512 by tjeger, Sun Jan 3 19:33:52 2016 UTC vs.
Revision 57513 by tjeger, Sun Jan 3 20:10:28 2016 UTC

12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 See the License for the specific language governing permissions and 13 See the License for the specific language governing permissions and
14 limitations under the License. 14 limitations under the License.
15 --> 15 -->
16 16
17<div class="panel panel-default" ng-controller="galleryPluginCtrl"> 17<div class="panel panel-default flex-column flex-child" ng-controller="GalleryManagerMainCtrl">
18 <div class="panel-heading"> 18 <div class="panel-heading">
19 <h3>Gallery Manager</h3> 19 <h3>Gallery Manager</h3>
20 </div> 20 </div>
21 <div class="panel-body"> 21 <div class="flex-row flex-child">
22 <div ng-show="showBeanrewriterMessage" class="alert alert-info"> 22 <!-- left side: list of all image sets -->
23 <p>You have changed image sets and may want to update your HST image set beans now. 23 <div class="solid-child flex-column left-col">
24 You can use the <a href="/essentials/#/tools/beanwriter">BeanWriter tool</a> for this.</p> 24 <div class="flex-child">
25 <div class="left-heading">Image Sets</div>
26 <div class="list-group">
27 <a href="#" title="{{imageSet.name}}" class="list-group-item"
28 data-ng-class="{'active': isSelected(imageSet)}"
29 data-ng-repeat="imageSet in imageSets"
30 data-ng-click="selectImageSet(imageSet); $event.preventDefault()"
31 data-scroll-to-if="isSelected(imageSet)">
32 {{imageSet.nameAfterPrefix}}
33 </a>
34 </div>
25 </div> 35 </div>
26 <div ng-show="showReLoginMessage" class="alert alert-warning"> 36 <div class="solid-child left-footer">
27 <p>You have changed the CMS configuration. If you are logged in to the CMS, 37 <button class="btn btn-default btn-block" data-ng-click="addImageSet()">
28 please log in again before uploading new images.</p> 38 + Add image set
39 </button>
29 </div> 40 </div>
30 <div> 41 </div>
31 <h4>Create Custom Image Set</h4> 42 <!-- right side: details of selected image set -->
43 <div class="flex-child right-col" ng-hide="selectedImageSet">
44 <div class="alert alert-warning">
45 <p>
46 Hippo CMS stores several variants of each uploaded image.
47 All variants of an image are together called an image set, and can be seen in the
48 image gallery in the CMS. Read more about image sets here:
49 <a target='_blank' href='http://www.onehippo.org/library/concepts/images-and-assets/create-a-custom-image-set.html'>
50 http://www.onehippo.org/library/concepts/images-and-assets/create-a-custom-image-set.html
51 </a>
52 </p>
53 <p>
54 No image sets have been created yet (beyond the CMS' default image set). You need to create
55 a custom image set first before you can use the Gallery Manager.
56 </p>
57 </div>
58 </div>
59 <div class="flex-child right-col" ng-show="selectedImageSet">
60 <div ng-show="showFeedback" class="alert alert-warning">
61 <hippo-icon name="times" class="pull-right" ng-click="showFeedback = !showFeedback"></hippo-icon>
62 <p>{{feedback}}</p>
63 </div>
64 <h1>Image set details for "{{selectedImageSet.nameAfterPrefix}}"</h1>
65 <dl>
66 <dt>Full image set name</dt>
67 <dd>{{selectedImageSet.name}}</dd>
68 <dt>Full definition</dt>
69 <dd>
70 <a href="/cms/console?1&path={{selectedImageSet.path}}"
71 target="_blank">Inspect in Hippo Console
72 <hippo-icon name="external-link" size="m"></hippo-icon>
73 </a>
74 </dd>
75 </dl>
76 <table class="table table-hover">
77 <thead>
78 <tr>
79 <th>Variant</th>
80 <th>Width</th>
81 <th>Height</th>
82 <th class="table-action"></th>
83 <th class="table-action"></th>
84 <th class="table-action"></th>
85 </tr>
86 </thead>
87 <tbody>
88 <tr ng-repeat="variant in selectedImageSet.models" ng-class="{ 'read-only': variant.readOnly }">
89 <td class="text">{{variant.name}}</td>
90 <td class="text">{{dimension(variant.width)}}</td>
91 <td class="text">{{dimension(variant.height)}}</td>
92 <td>
93 <hippo-icon name="search" ng-click="viewVariant(variant)"></hippo-icon>
94 </td>
95 <td>
96 <hippo-icon name="pencil-square" ng-click="editVariant(variant)" ng-if="!variant.readOnly"></hippo-icon>
97 </td>
98 <td>
99 <hippo-icon name="trash" ng-click="deleteVariant(variant)" ng-if="!variant.readOnly"></hippo-icon>
100 </td>
101 </tr>
102 </tbody>
103 </table>
104 <button class="btn btn-primary" ng-click="addVariant()">+ Add variant</button>
105 </div>
106 </div>
32 107
33 <form novalidate name="newImageSetForm" class="form-horizontal"> 108 <!--Image Set Add Modal Window-->
34 <essentials-help help-reference="help.imageSet" show-hide-variable="myHelp"></essentials-help> 109 <script type="text/ng-template" id="imageSetAddModal.html">
110 <div class="modal-header">
111 <h3 class="modal-title">Create a new image set</h3>
112 </div>
113 <form name="imageSetAddForm">
114 <div class="modal-body">
35 <div class="form-group"> 115 <div class="form-group">
36 <label class="col-sm-4 control-label">Image set name</label> 116 <label for="imageSetAddName">Image set name</label>
37 <div class="col-sm-4"> 117 <input type="text" class="form-control" id="imageSetAddName" name="name"
38 <input class="form-control" ng-model="imageSetName" ng-pattern="/^[a-z]{2,}$/" ng-required="true" placeholder="Enter image set name"/> 118 ng-model="name" required ng-pattern="/^[a-zA-Z]{2,}$/" autofocus>
119 <span class="help-block">Image set names must consist of two or more alphabetic characters.</span>
39 </div> 120 </div>
40 <div class="col-sm-4"> 121 <div class="checkbox">
41 <input type="checkbox" ng-model="updateExisting"/> Update existing image sets and regenerate HST beans 122 <label uib-tooltip="{{updateHint}}"
123 tooltip-placement="top" tooltip-trigger="mouseenter">
124 <input type="checkbox" ng-model="updateExisting">
125 Update existing image sets and regenerate HST beans
126 </label>
42 </div> 127 </div>
43 </div> 128 </div>
44 <div class="form-group col-sm-12"> 129 <div class="modal-footer">
45 <button ng-disabled="!newImageSetForm.$valid" class="btn btn-success pull-right" ng-click="addImageSet()">Create new image set</button> 130 <button class="btn btn-primary" type="submit" ng-click="create()"
131 ng-disabled="!imageSetAddForm.$dirty || imageSetAddForm.$invalid">Create</button>
132 <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
46 </div> 133 </div>
47 </form> 134 </form>
48 </div> 135 </script>
49 136
50 <div class="clearfix"></div> 137 <!--Variant Add Modal Window-->
51 <div ng-show="imageSets.length"> 138 <script type="text/ng-template" id="variantAddModal.html">
52 <h4>Edit Image Set</h4> 139 <div class="modal-header">
53 140 <h3 class="modal-title">Create a new image variant</h3>
54 <form novalidate name="imageSetFrom" class="form-horizontal"> 141 </div>
142 <form name="variantAddForm">
143 <div class="modal-body">
55 <div class="form-group"> 144 <div class="form-group">
56 <label class="col-sm-4 control-label">Select image set</label> 145 <label for="variantAddName">Variant name</label>
146 <input type="text" class="form-control" id="variantAddName" name="name"
147 ng-model="name" required ng-pattern="/^[a-zA-Z]{2,}$/" autofocus
148 variant-name image-set="imageSet">
149 <span class="help-block">Variant names must be unique and consist of two or more alphabetic characters.</span>
150 </div>
151 </div>
152 <div class="modal-footer">
153 <button class="btn btn-primary" type="submit" ng-click="create()"
154 ng-disabled="!variantAddForm.$dirty || variantAddForm.$invalid">Create</button>
155 <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
156 </div>
157 </form>
158 </script>
159
160 <!--Variant View Modal Window-->
161 <script type="text/ng-template" id="variantViewModal.html">
162 <div class="modal-header">
163 <h3 class="modal-title">Details for variant '{{variant.name}}'</h3>
164 </div>
165 <div class="modal-body">
166 <dl class="dl-horizontal">
167 <dt>Width constraint</dt>
168 <dd>{{dimension(variant.width)}}</dd>
169 <dt>Height constraint</dt>
170 <dd>{{dimension(variant.height)}}</dd>
171 <dt>Upscale</dt>
172 <dd>{{upscaling()}}</dd>
173 <dt>Speed vs. quality</dt>
174 <dd>{{optimization()}}</dd>
175 <dt>JPEG quality</dt>
176 <dd>{{compression()}}</dd>
177 </dl>
178 <h4>Translations</h4>
179 <table class="table table-hover">
180 <thead>
181 <tr>
182 <th>Language</th>
183 <th>Translation</th>
184 </tr>
185 </thead>
186 <tbody>
187 <tr ng-repeat="translation in variant.translations">
188 <td>{{translation.language}}</td>
189 <td>{{translation.message}}</td>
190 </tr>
191 </tbody>
192 </table>
193 </div>
194 <div class="modal-footer">
195 <button class="btn btn-primary" type="submit" ng-click="dismiss()">OK</button>
196 </div>
197 </script>
198
199 <!--Variant Edit Modal Window-->
200 <script type="text/ng-template" id="variantEditModal.html">
201 <div class="modal-header">
202 <h3 class="modal-title">Edit variant '{{variant.name}}'</h3>
203 </div>
204 <form name="variantEditForm">
205 <div class="modal-body">
206 <div class="form-horizontal">
207 <div class="form-group">
208 <label for="variantEditWidth" class="col-xs-3 control-label">Width constraint</label>
57 <div class="col-sm-4"> 209 <div class="col-xs-9">
58 <select chosen 210 <input type="text" class="form-control" id="variantEditWidth"
211 ng-model="variant.width" required ng-pattern="/^\d+$/" autofocus
212 uib-tooltip="A width constraint is expressed in units of px. A value of 0 means no width constraint."
213 tooltip-placement="top" tooltip-trigger="mouseenter">
214 </div>
215 </div>
216 <div class="form-group">
217 <label for="variantEditHeight" class="col-xs-3 control-label">Height constraint</label>
218 <div class="col-xs-9">
219 <input type="text" class="form-control" id="variantEditHeight"
220 ng-model="variant.height" required ng-pattern="/^\d+$/"
221 uib-tooltip="A height constraint is expressed in units of px. A value of 0 means no height constraint."
222 tooltip-placement="top" tooltip-trigger="mouseenter">
223 </div>
224 </div>
225 <div class="form-group">
226 <div class="col-xs-offset-3 col-sm-9">
227 <div class="checkbox">
228 <label uib-tooltip="Checking 'upscale' allows the image processor to enlarge image variants beyond the original dimensions. This will deteriorate image quality and is therefore not recommended."
229 tooltip-placement="top" tooltip-trigger="mouseenter">
230 <input type="checkbox" ng-model="variant.upscaling"> Upscale
59 class="form-control" 231 </label>
60 ng-model="selectedImageSet" 232 </div>
61 no-results-text="'No results found for'" 233 </div>
62 ng-options="option.name for option in imageSets" 234 </div>
63 data-placeholder="Select existing image set" 235 <div class="form-group">
236 <label for="variantEditOptimization" class="col-xs-3 control-label">Speed vs. quality</label>
237 <div class="col-xs-9">
238 <select id="variantEditOptimization" class="chosen-select" chosen
239 ng-model="variant.optimize"
240 ng-options="o.value as o.description for o in optimizeValues"
64 width="'100%'"> 241 width="'100%'">
65 <option value=""></option><!-- Necessary due to ESSENTIALS-677 -->
66 </select>
67 </div>
68 <div class="col-sm-4"></div>
69 </div>
70 <div ng-show="selectedImageSet">
71 <div class="form-group col-sm-12">
72 <h5>Add Image Variant</h5>
73 </div>
74 <div class="form-group">
75 <label class="col-sm-4 control-label">Variant name</label>
76 <div class="col-sm-4">
77 <input class="form-control" ng-model="imageVariantName" ng-pattern="/^[a-z]{2,}$/" ng-required="true" placeholder="Enter variant name"/>
78 </div>
79 <div class="col-sm-4">
80 <button ng-disabled="!imageVariantName" class="btn btn-success pull-right" type="button" ng-click="addImageVariant()">Add new image variant</button>
81 </div>
82 </div>
83 <div class="form-group col-sm-12">
84 <h5>Edit Image Variant</h5>
85 </div>
86 <div class="form-group">
87 <label class="col-sm-4 control-label">Select image variant</label>
88 <div class="col-sm-4">
89 <select name="selectedImageModel"
90 class="form-control"
91 ng-model="selectedImageModel"
92 ng-options="option.name for option in selectedImageSet.models"
93 placeholder="Select existing variant"
94 ng-change="disableSelection()"
95 ng-disabled="selectionDisabled"
96 width="'100%'">
97 </select> 242 </select>
98 </div> 243 </div>
99 <div class="col-sm-4 text-right">
100 <button ng-show="selectedImageModel"
101 class="btn btn-primary"
102 type="button"
103 ng-click="saveVariant()"
104 >
105 Save Changes
106 </button>
107 <button ng-show="selectedImageModel"
108 class="btn btn-default"
109 type="button"
110 ng-click="resetVariant()"
111 >
112 Discard Changes
113 </button>
114 <button ng-show="selectedImageModel && !selectedImageModel.readOnly"
115 class="btn btn-warning"
116 type="button"
117 ng-click="removeImageVariant(selectedImageModel)">
118 Delete variant
119 </button>
120 </div> 244 </div>
121 </div>
122
123 <div ng-show="selectedImageModel">
124 <div class="form-group" ng-hide="selectedImageModel.readOnly">
125 <div class="form-group">
126 <h4 class="col-sm-4 control-label">Variant Parameters</h4>
127 <div class="col-sm-8"></div>
128 </div>
129 <div class="form-group">
130 <label class="col-sm-4 control-label">Width</label>
131 <div class="col-sm-6">
132 <input class="form-control" ng-model="selectedImageModel.width" ng-pattern="/^[0-9]{1,}$/" ng-required="true"/>
133 </div>
134 <div class="col-sm-2"></div>
135 </div>
136 <div class="form-group">
137 <label class="col-sm-4 control-label">Height</label>
138 <div class="col-sm-6">
139 <input class="form-control" ng-model="selectedImageModel.height" ng-pattern="/^[0-9]{1,}$/" ng-required="true"/>
140 </div>
141 <div class="col-sm-2"></div>
142 </div>
143 <div class="form-group">
144 <label class="col-sm-4 control-label">Upscale:</label>
145 <div class="col-sm-6">
146 <select class="chosen-select" chosen
147 ng-model="selectedImageModel.upscaling"
148 ng-options="v.value as v.description for v in upscalingValues"
149 width="'100%'">
150 </select>
151 </div>
152 <div class="col-sm-2"></div>
153 </div>
154 <div class="form-group">
155 <label class="col-sm-4 control-label">Speed vs Quality</label>
156 <div class="col-sm-6">
157 <select class="chosen-select" chosen
158 ng-model="selectedImageModel.optimize"
159 ng-options="o.value as o.description for o in optimizeValues"
160 width="'100%'">
161 </select>
162 </div>
163 <div class="col-sm-2"></div>
164 </div>
165 <div class="form-group">
166 <label class="col-sm-4 control-label">JPEG Quality</label>
167 <div class="col-sm-6">
168 <select class="chosen-select" chosen
169 ng-model="selectedImageModel.compression"
170 ng-options="c.value as c.description for c in compressionValues"
171 width="'100%'">
172 </select>
173 </div>
174 <div class="col-sm-2"></div>
175 </div>
176 </div>
177
178 <div class="form-group"> 245 <div class="form-group">
179 <div class="form-group"> 246 <label for="variantEditCompression" class="col-xs-3 control-label">JPEG quality</label>
180 <h4 class="col-sm-4 control-label">Translations</h4>
181 <div class="col-sm-8"></div> 247 <div class="col-xs-9">
248 <select id="variantEditCompression" class="chosen-select" chosen
249 ng-model="variant.compression"
250 ng-options="c.value as c.description for c in compressionValues"
251 width="'100%'">
252 </select>
182 </div> 253 </div>
183 <div class="form-group col-sm-12" ng-repeat="translation in selectedImageModel.translations">
184 <label class="col-sm-2 control-label"></label>
185 <div class="col-sm-2">
186 <input class="form-control" ng-model="translation.language" ng-pattern="/^[a-z]{2,}$/" ng-required="true"/>
187 </div>
188 <div class="col-sm-6">
189 <input class="form-control" ng-model="translation.message" ng-required="true"/>
190 </div>
191 <div class="col-sm-2">
192 <button data-dismiss="alert" class="close" type="button" ng-click="removeTranslation(translation)">×</button>
193 </div>
194 </div>
195 <div class="form-group col-sm-12">
196 <button class="btn btn-success pull-right" type="button" ng-click="addTranslation()">Add new translation</button>
197 </div>
198 </div> 254 </div>
199 </div> 255 </div>
256 <h4>Translations</h4>
257 <table class="table table-hover">
258 <thead>
259 <tr>
260 <th>Language</th>
261 <th>Translation</th>
262 <th class="table-action"></th>
263 </tr>
264 </thead>
265 <tbody>
266 <tr ng-repeat="translation in variant.translations">
267 <td><input type="text" ng-model="translation.language"></td>
268 <td><input type="text" ng-model="translation.message"></td>
269 <td><hippo-icon name="trash" ng-click="deleteTranslation(translation)"></hippo-icon></td>
270 </tr>
271 </tbody>
272 </table>
273 <button class="btn btn-default" type="button" ng-click="addTranslation()">+ Add translation</button>
200 </div> 274 </div>
275 <div class="modal-footer">
276 <button class="btn btn-primary" type="submit" ng-click="save()"
277 ng-disabled="!variantEditForm.$dirty || variantEditForm.$invalid">Save Changes</button>
278 <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
279 </div>
201 </form> 280 </form>
202 </div> 281 </script>
282
283 <!--Variant Delete Modal Window-->
284 <script type="text/ng-template" id="variantDeleteModal.html">
285 <div class="modal-header">
286 <h3 class="modal-title">Delete Image Variant</h3>
203 </div> 287 </div>
288 <div class="modal-body">
289 <p>Are you sure you want to delete the image variant "{{variant.name}}"?</p>
290 </div>
291 <div class="modal-footer">
292 <button class="btn btn-primary" type="submit" ng-click="ok()" autofocus>OK</button>
293 <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
294 </div>
295 </script>
296
204</div> 297</div>

Diff Legend

Removed lines
+ Added lines
< Changed lines
> Changed lines