From c789485cdd4945ab2bd57a55cc7e6aa900390483 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Sat, 1 Feb 2014 23:51:43 +0000
Subject: [PATCH 1/3] Added `for` attributes to the labels and corresponding
 `id` attributes on the input fields.

Swapped the "Max fieldsets" input to be a "number" (HTML5) type.
---
 app/views/archetype.config.html | 83 ++++++++++++++++++++-------------
 1 file changed, 51 insertions(+), 32 deletions(-)

diff --git a/app/views/archetype.config.html b/app/views/archetype.config.html
index eb3fb77..d853aa2 100644
--- a/app/views/archetype.config.html
+++ b/app/views/archetype.config.html
@@ -6,27 +6,31 @@
                     <i class="icon icon-add" ng-click="addFieldsetRow($index, $event)"></i>
                     <i class="icon icon-delete" ng-click="removeFieldsetRow($index)" ng-show="canRemoveFieldset()"></i>
                     <i class="icon icon-navigation handle" ng-show="canSortFieldset()"></i>
-                </div> 
+                </div>
                 <div class="archetypeFieldsetTitle" ng-click="focusFieldset(fieldset)">{{fieldset.label}}</div>
                 <div class="archetypeFieldsetCollapser" ng-hide="fieldset.collapse && fieldset.label">
                     <div class="archetypeFieldsetOption">
-                        <label>Label</label><input type="text" ng-model="fieldset.label" />
+                        <label for="archetypeFieldLabel">Label</label>
+                        <input type="text" id="archetypeFieldLabel" ng-model="fieldset.label" />
                     </div>
                     <div class="archetypeFieldsetOption">
-                        <label>Alias</label><input type="text" ng-model="fieldset.alias" />
+                        <label for="archetypeFieldAlias">Alias</label>
+                        <input type="text" id="archetypeFieldAlias" ng-model="fieldset.alias" />
                     </div>
                     <div class="archetypeFieldsetOption">
-                        <label>Label Template</label><input type="text" ng-model="fieldset.labelTemplate" />
+                        <label for="archetypeFieldLabelTemplate">Label Template</label>
+                        <input type="text" id="archetypeFieldLabelTemplate" ng-model="fieldset.labelTemplate" />
                     </div>
                     <div class="archetypeFieldsetOption" ng-show="archetypeConfigRenderModel.enableMultipleFieldsets">
-                        <label>Icon</label><i class="fieldsetIcon icon ng-class:fieldset.icon"></i><a ng-click="selectIcon(fieldset)">Select...</a>
+                        <label for="archetypeFieldIcon">Icon</label>
+                        <i class="fieldsetIcon icon ng-class:fieldset.icon"></i><a ng-click="selectIcon(fieldset)">Select...</a>
                     </div>
-                    <div class="archetypeFieldsetOption"> 
+                    <div class="archetypeFieldsetOption">
                         <label>Properties</label>
                     </div>
                     <div class="archetypePropertiesWrapper">
                         <ul ui-sortable="sortableOptions" ng-model="fieldset.properties">
-                            <li ng-repeat="property in fieldset.properties" ng-hide="property.remove">                              
+                            <li ng-repeat="property in fieldset.properties" ng-hide="property.remove">
                                 <div class="archetypeEditorControls">
                                     <i class="icon icon-add" ng-click="addPropertyRow(fieldset, $index)"></i>
                                     <i class="icon icon-delete" ng-click="removePropertyRow(fieldset, $index)" ng-show="canRemoveProperty(fieldset)"></i>
@@ -35,22 +39,28 @@
                                 <div class="archetypePropertyTitle" ng-click="focusProperty(fieldset.properties, property)">{{property.label}}</div>
                                 <div class="archetypePropertyCollapser" ng-hide="property.collapse && property.label">
                                     <div>
-                                         <label>Label</label><input type="text" ng-model="property.label" />
+                                        <label for="archetypeProperty{{$index}}Label">Label</label>
+                                        <input type="text" id="archetypeProperty{{$index}}Label" ng-model="property.label" />
                                     </div>
                                     <div>
-                                         <label>Alias</label><input type="text" ng-model="property.alias" />
+                                        <label for="archetypeProperty{{$index}}Alias">Alias</label>
+                                        <input type="text" id="archetypeProperty{{$index}}Alias" ng-model="property.alias" />
                                     </div>
                                     <div>
-                                         <label>Help Text</label><input type="text" ng-model="property.helpText" />
+                                        <label for="archetypeProperty{{$index}}HelpText">Help Text</label>
+                                        <input type="text" id="archetypeProperty{{$index}}HelpText" ng-model="property.helpText" />
                                     </div>
                                     <div>
-                                         <label>DataType</label><select ng-model="property.dataTypeId" ng-options="value.id as value.name for (key, value) in availableDataTypes"></select>
-                                    </div>                            
-                                    <div>
-                                         <label>Default Value</label><input type="text" ng-model="property.value" />
+                                        <label for="archetypeProperty{{$index}}DataType">DataType</label>
+                                        <select ng-model="property.dataTypeId" id="archetypeProperty{{$index}}DataType" ng-options="value.id as value.name for (key, value) in availableDataTypes"></select>
                                     </div>
                                     <div>
-                                         <label>Required</label><input type="checkbox" ng-model="property.required" />
+                                        <label for="archetypeProperty{{$index}}DefaultValue">Default Value</label>
+                                        <input type="text" id="archetypeProperty{{$index}}DefaultValue" ng-model="property.value" />
+                                    </div>
+                                    <div>
+                                        <label for="archetypeProperty{{$index}}Required">Required</label>
+                                        <input type="checkbox" id="archetypeProperty{{$index}}Required" ng-model="property.required" />
                                     </div>
                                 </div>
                             </li>
@@ -60,45 +70,54 @@
             </div>
         </li>
     </ul>
-    
+
     <div class="archetypeOptions">
-            
         <div>
-            <label>Toggle Advanced Options<small>Show advanced options.</small></label><input type="checkbox" ng-model="archetypeConfigRenderModel.showAdvancedOptions"/>
+            <label for="archetypeOptionsToggle">Toggle Advanced Options<small>Show advanced options.</small></label>
+            <input type="checkbox" id="archetypeOptionsToggle" ng-model="archetypeConfigRenderModel.showAdvancedOptions"/>
         </div>
     </div>
-    
+
     <div class="archetypeAdvancedOptions" ng-show="archetypeConfigRenderModel.showAdvancedOptions">
         <div>
-            <label>Hide fieldset editor controls?<small>Hides the fieldset add/remove/sort controls.</small></label><input type="checkbox" ng-model="archetypeConfigRenderModel.hideFieldsetControls"/>
+            <label for="archetypeAdvancedOptionsHideControls">Hide fieldset editor controls?<small>Hides the fieldset add/remove/sort controls.</small></label>
+            <input type="checkbox" id="archetypeAdvancedOptionsHideControls" ng-model="archetypeConfigRenderModel.hideFieldsetControls"/>
         </div>
         <div>
-            <label>Hide property labels?<small>Hides the property labels.</small></label><input type="checkbox" ng-model="archetypeConfigRenderModel.hidePropertyLabels"/>
+            <label for="archetypeAdvancedOptionsHideLabels">Hide property labels?<small>Hides the property labels.</small></label>
+            <input type="checkbox" id="archetypeAdvancedOptionsHideLabels" ng-model="archetypeConfigRenderModel.hidePropertyLabels"/>
         </div>
         <div>
-            <label>Max fieldsets<small>How many Fieldsets are allowed? Entering '1' will disable the controls. Default is unlimited.</small></label><input type="text" class="archetypeMaxFieldsets" ng-model="archetypeConfigRenderModel.maxFieldsets"/>
+            <label for="archetypeAdvancedOptionsMaxFieldsets">Max fieldsets<small>How many Fieldsets are allowed? Entering '1' will disable the controls. Default is unlimited.</small></label>
+            <input type="number" id="archetypeAdvancedOptionsMaxFieldsets" class="archetypeMaxFieldsets" ng-model="archetypeConfigRenderModel.maxFieldsets"/>
         </div>
         <div>
-            <label>Enable multiple fieldsets?<small>Allows multiple types of fieldsets within this archetype.</small></label><input type="checkbox" ng-model="archetypeConfigRenderModel.enableMultipleFieldsets"/>
+            <label for="archetypeAdvancedOptionsMultipleFieldsets">Enable multiple fieldsets?<small>Allows multiple types of fieldsets within this archetype.</small></label>
+            <input type="checkbox" id="archetypeAdvancedOptionsMultipleFieldsets" ng-model="archetypeConfigRenderModel.enableMultipleFieldsets"/>
         </div> 
         <div>
-            <label>Hide fieldset toolbar?<small>Hides the fieldset toolbar that appears when more than one fieldset model appears.</small></label><input type="checkbox" ng-model="archetypeConfigRenderModel.hideFieldsetToolbar"/>
-        </div>  
-        <div>
-            <label>Custom Wrapper Class<small>(Optional) Enter a custom CSS class that will be applied to the wrapper div.</small></label><input type="text" ng-model="archetypeConfigRenderModel.customCssClass"/>
+            <label for="archetypeAdvancedOptionsFieldsetToolbar">Hide fieldset toolbar?<small>Hides the fieldset toolbar that appears when more than one fieldset model appears.</small></label>
+            <input type="checkbox" id="archetypeAdvancedOptionsFieldsetToolbar" ng-model="archetypeConfigRenderModel.hideFieldsetToolbar"/>
         </div>
         <div>
-            <label>CSS File<small>(Optional) Enter a path for a custom CSS file to be included on the page.</small></label><input type="text" ng-model="archetypeConfigRenderModel.customCssPath"/>
+            <label for="archetypeAdvancedOptionsCustomClass">Custom Wrapper Class<small>(Optional) Enter a custom CSS class that will be applied to the wrapper div.</small></label>
+            <input type="text" id="archetypeAdvancedOptionsCustomClass" ng-model="archetypeConfigRenderModel.customCssClass"/>
         </div>
         <div>
-            <label>JS File<small>(Optional) Enter a path for a custom JS file to be included on the page.</small></label><input type="text" ng-model="archetypeConfigRenderModel.customJsPath"/>
+            <label for="archetypeAdvancedOptionsCustomCss">CSS File<small>(Optional) Enter a path for a custom CSS file to be included on the page.</small></label>
+            <input type="text" id="archetypeAdvancedOptionsCustomCss" ng-model="archetypeConfigRenderModel.customCssPath"/>
         </div>
         <div>
-            <label>Toggle Developer Mode<small>Turn on for developer options.</small></label><input type="checkbox" ng-model="archetypeConfigRenderModel.developerMode"/>
+            <label for="archetypeAdvancedOptionsCustomJs">JS File<small>(Optional) Enter a path for a custom JS file to be included on the page.</small></label>
+            <input type="text" id="archetypeAdvancedOptionsCustomJs" ng-model="archetypeConfigRenderModel.customJsPath"/>
         </div>
         <div>
-            <label>Config Model<small>Be careful editing the text below, it controls the schema for this archetype.</small></label>
-            <textarea class="archetypeDeveloperModel" ng-model="archetypeConfigRenderModel"></textarea>
+            <label for="archetypeAdvancedOptionsDeveloperMode">Toggle Developer Mode<small>Turn on for developer options.</small></label>
+            <input type="checkbox" id="archetypeAdvancedOptionsDeveloperMode" ng-model="archetypeConfigRenderModel.developerMode"/>
+        </div>
+        <div>
+            <label for="archetypeAdvancedOptionsConfigModel">Config Model<small>Be careful editing the text below, it controls the schema for this archetype.</small></label>
+            <textarea class="archetypeDeveloperModel" id="archetypeAdvancedOptionsConfigModel" ng-model="archetypeConfigRenderModel"></textarea>
         </div>
     </div>
 </div>

From b55a1a43249d87fe01b453ac4ceacc804001e915 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Sat, 1 Feb 2014 23:48:16 +0000
Subject: [PATCH 2/3] Prevalue editor CSS tweaks.

General tightening up of the fields/properties.
---
 .gitignore              |  1 +
 app/less/archetype.less | 90 +++++++++++++++++++++++------------------
 2 files changed, 51 insertions(+), 40 deletions(-)

diff --git a/.gitignore b/.gitignore
index fa14c32..002e772 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,6 +10,7 @@ ehthumbs.db
 Desktop.ini
 $RECYCLE.BIN/
 
+app/less/*.css
 dist/
 node_modules/
 pkg/tmp/
diff --git a/app/less/archetype.less b/app/less/archetype.less
index 15172a5..c07f7de 100644
--- a/app/less/archetype.less
+++ b/app/less/archetype.less
@@ -100,14 +100,14 @@
 .archetypeEditor .archetypeFieldsetToolbar {
     margin-bottom: 10px;
     overflow: hidden;
-}
 
-.archetypeEditor .archetypeFieldsetToolbar li {
-    float: left;
-    padding: 2px 4px;
-    margin-right: 10px;
-    border: 1px solid #ddd;
-    cursor: pointer;
+    li {
+        float: left;
+        padding: 2px 4px;
+        margin-right: 10px;
+        border: 1px solid #ddd;
+        cursor: pointer;
+    }
 }
 
 .archetypeEditor .archetypeFieldsetHeaderText{
@@ -150,41 +150,44 @@
 
 .archetypeConfig .archetypeFieldsetWrapper{
     border: 1px solid #ccc;
-    padding: 10px 5px;
+    padding: 10px;
     margin-bottom: 10px;
 }
 
-.archetypeConfig .archetypeFieldsetOption input[type=text]{
-    width: 600px;
+.archetypeConfig .archetypeFieldsetOption{
+    margin-bottom: 15px;
+    input[type=text]{
+        width: 600px;
+    }
 }
 
 .archetypeConfig .archetypeDeveloperModel {
+    font-family: monospace;
     width: 88%;
-    margin-left: 30px;
-    height: 100px;
+    margin: 5px 10px 10px;
+    height: 130px;
 }
 
-.archetypeConfig .archetypePropertiesWrapper{
+.archetypeConfig .archetypePropertiesWrapper {
     border: 1px solid #ddd;
-    padding: 10px;
-    margin: 10px;
-    margin-left: 50px;
-    width: 665px;
-}
+    padding: 8px;
+    margin: -40px 10px 10px 140px;
+    width: 595px;
 
-.archetypeConfig .archetypePropertiesWrapper ul{
-    padding: 0;
-    margin: 0;
-}
+    ul {
+        padding: 0;
+        margin: 0;
+    }
 
-.archetypeConfig .archetypePropertiesWrapper li{
-    padding: 10px;
-    margin-bottom: 10px;
-    background-color: #eee;
-}
+    li {
+        padding: 10px;
+        margin-bottom: 10px;
+        background-color: #eee;
+    }
 
-.archetypeConfig .archetypePropertiesWrapper li:last-child{
-    margin-bottom: 0;
+    li:last-child {
+        margin-bottom: 0;
+    }
 }
 
 .archetypeConfig .archetypeFieldsets {
@@ -192,33 +195,40 @@
 }
 
 .archetypeConfig .archetypeFieldsetTitle {
+    cursor: pointer;
     overflow: hidden;
 }
 
 .archetypeConfig .archetypeOptions label{
-    width: 200px;
-}
-
-.archetypeConfig .archetypeAdvancedOptions label{
     width: 400px;
 }
 
-.archetypeConfig .archetypeDeveloperModel {
-    margin-bottom: 10px;
+.archetypeConfig .archetypeAdvancedOptions {
+    margin-top: 15px;
+    div {
+        margin-bottom: 10px;
+    }
+    label {
+        width: 400px;
+    }
 }
 
 .archetypeConfig .archetypeMaxFieldsets{
     border: 1px solid #ddd;
-    width: 25px;
+    width: 40px;
     text-align: right;
 }
 
-.archetypeConfig .archetypePropertyTitle{
+.archetypeConfig .archetypePropertyTitle {
+    cursor: pointer;
     overflow: hidden;
 }
 
 .archetypeConfig .archetypePropertyCollapser{
     margin-top: 10px;
+    div {
+        margin-bottom: 10px;
+    }
 }
 
 .archetypeEditor .archetypeFieldsetError{
@@ -239,10 +249,10 @@
     background-color:   #d0e7f1 !important;
 }
 
-.archetypeConfig .archetypeFieldsetCollapser{
-    margin-top: 5px;
+.archetypeConfig .archetypeFieldsetCollapser {
+    margin-top: 15px;
 }
 
-.archetypeConfig .fieldsetIcon{
+.archetypeConfig .fieldsetIcon {
     margin-right: 10px;
 }
\ No newline at end of file

From 4dc21b3e1828b69ab1e22d8fc7250cdfe0d3ee2b Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Sun, 2 Feb 2014 15:04:24 +0000
Subject: [PATCH 3/3] Fixed the `id`s for the fieldset labels - added the
 index/position.

Corrected the nested repeater's `id`s with the context of the parent's index/position.
---
 app/views/archetype.config.html | 38 ++++++++++++++++-----------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/app/views/archetype.config.html b/app/views/archetype.config.html
index d853aa2..bf70139 100644
--- a/app/views/archetype.config.html
+++ b/app/views/archetype.config.html
@@ -10,19 +10,19 @@
                 <div class="archetypeFieldsetTitle" ng-click="focusFieldset(fieldset)">{{fieldset.label}}</div>
                 <div class="archetypeFieldsetCollapser" ng-hide="fieldset.collapse && fieldset.label">
                     <div class="archetypeFieldsetOption">
-                        <label for="archetypeFieldLabel">Label</label>
-                        <input type="text" id="archetypeFieldLabel" ng-model="fieldset.label" />
+                        <label for="archetypeFieldLabel_{{$index}}">Label</label>
+                        <input type="text" id="archetypeFieldLabel_{{$index}}" ng-model="fieldset.label" />
                     </div>
                     <div class="archetypeFieldsetOption">
-                        <label for="archetypeFieldAlias">Alias</label>
-                        <input type="text" id="archetypeFieldAlias" ng-model="fieldset.alias" />
+                        <label for="archetypeFieldAlias_{{$index}}">Alias</label>
+                        <input type="text" id="archetypeFieldAlias_{{$index}}" ng-model="fieldset.alias" />
                     </div>
                     <div class="archetypeFieldsetOption">
-                        <label for="archetypeFieldLabelTemplate">Label Template</label>
-                        <input type="text" id="archetypeFieldLabelTemplate" ng-model="fieldset.labelTemplate" />
+                        <label for="archetypeFieldLabelTemplate_{{$index}}">Label Template</label>
+                        <input type="text" id="archetypeFieldLabelTemplate_{{$index}}" ng-model="fieldset.labelTemplate" />
                     </div>
                     <div class="archetypeFieldsetOption" ng-show="archetypeConfigRenderModel.enableMultipleFieldsets">
-                        <label for="archetypeFieldIcon">Icon</label>
+                        <label for="archetypeFieldIcon_{{$index}}">Icon</label>
                         <i class="fieldsetIcon icon ng-class:fieldset.icon"></i><a ng-click="selectIcon(fieldset)">Select...</a>
                     </div>
                     <div class="archetypeFieldsetOption">
@@ -39,28 +39,28 @@
                                 <div class="archetypePropertyTitle" ng-click="focusProperty(fieldset.properties, property)">{{property.label}}</div>
                                 <div class="archetypePropertyCollapser" ng-hide="property.collapse && property.label">
                                     <div>
-                                        <label for="archetypeProperty{{$index}}Label">Label</label>
-                                        <input type="text" id="archetypeProperty{{$index}}Label" ng-model="property.label" />
+                                        <label for="archetypePropertyLabel_{{$parent.$index}}_{{$index}}">Label</label>
+                                        <input type="text" id="archetypePropertyLabel_{{$parent.$index}}_{{$index}}" ng-model="property.label" />
                                     </div>
                                     <div>
-                                        <label for="archetypeProperty{{$index}}Alias">Alias</label>
-                                        <input type="text" id="archetypeProperty{{$index}}Alias" ng-model="property.alias" />
+                                        <label for="archetypePropertyAlias_{{$parent.$index}}_{{$index}}">Alias</label>
+                                        <input type="text" id="archetypePropertyAlias_{{$parent.$index}}_{{$index}}" ng-model="property.alias" />
                                     </div>
                                     <div>
-                                        <label for="archetypeProperty{{$index}}HelpText">Help Text</label>
-                                        <input type="text" id="archetypeProperty{{$index}}HelpText" ng-model="property.helpText" />
+                                        <label for="archetypePropertyHelpText_{{$parent.$index}}_{{$index}}">Help Text</label>
+                                        <input type="text" id="archetypePropertyHelpText_{{$parent.$index}}_{{$index}}" ng-model="property.helpText" />
                                     </div>
                                     <div>
-                                        <label for="archetypeProperty{{$index}}DataType">DataType</label>
-                                        <select ng-model="property.dataTypeId" id="archetypeProperty{{$index}}DataType" ng-options="value.id as value.name for (key, value) in availableDataTypes"></select>
+                                        <label for="archetypePropertyDataType_{{$parent.$index}}_{{$index}}">DataType</label>
+                                        <select id="archetypePropertyDataType_{{$parent.$index}}_{{$index}}" ng-model="property.dataTypeId" ng-options="value.id as value.name for (key, value) in availableDataTypes"></select>
                                     </div>
                                     <div>
-                                        <label for="archetypeProperty{{$index}}DefaultValue">Default Value</label>
-                                        <input type="text" id="archetypeProperty{{$index}}DefaultValue" ng-model="property.value" />
+                                        <label for="archetypePropertyDefaultValue_{{$parent.$index}}_{{$index}}">Default Value</label>
+                                        <input type="text" id="archetypePropertyDefaultValue_{{$parent.$index}}_{{$index}}" ng-model="property.value" />
                                     </div>
                                     <div>
-                                        <label for="archetypeProperty{{$index}}Required">Required</label>
-                                        <input type="checkbox" id="archetypeProperty{{$index}}Required" ng-model="property.required" />
+                                        <label for="archetypePropertyRequired_{{$parent.$index}}_{{$index}}">Required</label>
+                                        <input type="checkbox" id="archetypePropertyRequired_{{$parent.$index}}_{{$index}}" ng-model="property.required" />
                                     </div>
                                 </div>
                             </li>