From 56938a7bdcc1abab05f0c7b6c83deb209ba69e1a Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Sun, 21 Feb 2021 09:57:32 +0100
Subject: [PATCH] Move relation type id and macro id to sidebar box (#9657)

---
 .../src/views/macros/views/settings.html      | 126 ++++++++++--------
 .../relationtypes/views/relationType.html     |  97 ++++++++------
 2 files changed, 127 insertions(+), 96 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/macros/views/settings.html b/src/Umbraco.Web.UI.Client/src/views/macros/views/settings.html
index 9825a6f919..c152c33193 100644
--- a/src/Umbraco.Web.UI.Client/src/views/macros/views/settings.html
+++ b/src/Umbraco.Web.UI.Client/src/views/macros/views/settings.html
@@ -1,62 +1,76 @@
 <div ng-controller="Umbraco.Editors.Macros.SettingsController as vm">
-    <umb-box>
-        <umb-box-header title="Info"></umb-box-header>
-        <umb-box-content>
-            <umb-control-group label="Id">
-                {{model.macro.id}}<br/>
-                {{model.macro.key}}
-            </umb-control-group>
-        </umb-box-content>
-    </umb-box>
-    <umb-box>
-        <umb-box-header title="Macro partial view"></umb-box-header>
-        <umb-box-content>
-            <umb-control-group label="Macro partial view" required="true">
 
-                <umb-node-preview ng-if="model.macro.node"
-                                  icon="model.macro.node.icon"
-                                  name="model.macro.node.name"
-                                  allow-edit="true"
-                                  allow-remove="true"
-                                  on-edit="model.openViewPicker()"
-                                  on-remove="model.removeMacroView()">
-                </umb-node-preview>
+    <div class="umb-package-details">
 
-                <input type="hidden" ng-model="mandatoryViewValidator" ng-required="!model.macro.node" />
+        <div class="umb-package-details__main-content">
 
-                <button type="button"
-                        class="umb-node-preview-add"
-                        ng-show="!model.macro.node"
-                        ng-click="model.openViewPicker()">
-                    <localize key="general_add">Add</localize>
-                </button>
+            <umb-box>
+                <umb-box-header title="Macro partial view"></umb-box-header>
+                <umb-box-content>
+                    <umb-control-group label="Macro partial view" required="true" hide-label="true">
+
+                        <umb-node-preview
+                            ng-if="model.macro.node"
+                            icon="model.macro.node.icon"
+                            name="model.macro.node.name"
+                            allow-edit="true"
+                            allow-remove="true"
+                            on-edit="model.openViewPicker()"
+                            on-remove="model.removeMacroView()">
+                        </umb-node-preview>
+
+                        <input type="hidden" ng-model="mandatoryViewValidator" ng-required="!model.macro.node" />
+
+                        <button type="button"
+                                class="umb-node-preview-add"
+                                ng-show="!model.macro.node"
+                                ng-click="model.openViewPicker()">
+                            <localize key="general_add">Add</localize>
+                        </button>
+
+                    </umb-control-group>
+                </umb-box-content>
+            </umb-box>
+            <umb-box>
+                <umb-box-header title="Editor settings"></umb-box-header>
+                <umb-box-content>
+                    <umb-control-group label="Use in rich text editor and the grid">
+                        <umb-toggle checked="model.macro.useInEditor" on-click="model.toggle('useInEditor')"></umb-toggle>
+                    </umb-control-group>
+                    <umb-control-group label="Render in rich text editor and the grid" ng-if="model.macro.useInEditor">
+                        <umb-toggle checked="model.macro.renderInEditor && model.macro.useInEditor" on-click="model.toggle('renderInEditor')"></umb-toggle>
+                    </umb-control-group>
+                </umb-box-content>
+            </umb-box>
+            <umb-box>
+                <umb-box-header title="Cache settings"></umb-box-header>
+                <umb-box-content>
+                    <umb-control-group label="Cache period">
+                        <input type="number" min="0" ng-model="model.macro.cachePeriod" />
+                    </umb-control-group>
+                    <umb-control-group label="Cache by page">
+                        <umb-toggle checked="model.macro.cacheByPage" on-click="model.toggle('cacheByPage')"></umb-toggle>
+                    </umb-control-group>
+                    <umb-control-group label="Cache personalized">
+                        <umb-toggle checked="model.macro.cacheByUser" on-click="model.toggle('cacheByUser')"></umb-toggle>
+                    </umb-control-group>
+                </umb-box-content>
+            </umb-box>
+
+        </div>
+
+        <div class="umb-package-details__sidebar">
+            <umb-box data-element="node-info-general">
+                <umb-box-header title-key="general_general"></umb-box-header>
+                <umb-box-content class="block-form">
+                    <umb-control-group label="Id">
+                        <div>{{model.macro.id}}</div>
+                        <small>{{model.macro.key}}</small>
+                    </umb-control-group>
+                </umb-box-content>
+            </umb-box>
+        </div>
+
+    </div>
 
-            </umb-control-group>
-        </umb-box-content>
-    </umb-box>
-    <umb-box>
-        <umb-box-header title="Editor settings"></umb-box-header>
-        <umb-box-content>
-            <umb-control-group label="Use in rich text editor and the grid">
-                <umb-toggle checked="model.macro.useInEditor" on-click="model.toggle('useInEditor')"></umb-toggle>
-            </umb-control-group>
-            <umb-control-group label="Render in rich text editor and the grid" ng-if="model.macro.useInEditor">
-                <umb-toggle checked="model.macro.renderInEditor && model.macro.useInEditor" on-click="model.toggle('renderInEditor')"></umb-toggle>
-            </umb-control-group>
-        </umb-box-content>
-    </umb-box>
-    <umb-box>
-        <umb-box-header title="Cache settings"></umb-box-header>
-        <umb-box-content>
-            <umb-control-group label="Cache period">
-               <input type="number" min="0" ng-model="model.macro.cachePeriod"/>
-            </umb-control-group>
-            <umb-control-group label="Cache by page">
-                <umb-toggle checked="model.macro.cacheByPage" on-click="model.toggle('cacheByPage')"></umb-toggle>
-            </umb-control-group>
-            <umb-control-group label="Cache personalized">
-                <umb-toggle checked="model.macro.cacheByUser" on-click="model.toggle('cacheByUser')"></umb-toggle>
-            </umb-control-group>
-        </umb-box-content>
-    </umb-box>
 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/relationtypes/views/relationType.html b/src/Umbraco.Web.UI.Client/src/views/relationtypes/views/relationType.html
index 100d8d9d09..8f910a6c86 100644
--- a/src/Umbraco.Web.UI.Client/src/views/relationtypes/views/relationType.html
+++ b/src/Umbraco.Web.UI.Client/src/views/relationtypes/views/relationType.html
@@ -1,46 +1,63 @@
 <div ng-controller="Umbraco.Editors.RelationTypes.SettingsController as vm">
-    <umb-box>
-        <umb-box-content>
-            <!-- ID -->
-            <umb-control-group label="Id">
-                <div>{{model.relationType.id}}</div>
-                <small>{{model.relationType.key}}</small>
-            </umb-control-group>
 
-            <!-- Direction -->
-            <umb-control-group label="@relationType_direction">
-                <ul class="unstyled">
-                    <li>
-                        <umb-radiobutton name="relationTypeDirection"
-                                         value="false"
-                                         model="model.relationType.isBidirectional"
-                                         text="{{vm.labels.parentToChild}}">
-                        </umb-radiobutton>
-                    </li>
-                    <li>
-                        <umb-radiobutton name="relationTypeDirection"
-                                         value="true"
-                                         model="model.relationType.isBidirectional"
-                                         text="{{vm.labels.bidirectional}}">
-                        </umb-radiobutton>
-                    </li>
-                </ul>
-            </umb-control-group>
+    <div class="umb-package-details">
 
-            <!-- Parent-->
-            <umb-control-group label="@relationType_parent">
-                <div>{{model.relationType.parentObjectTypeName}}</div>
-            </umb-control-group>
+        <div class="umb-package-details__main-content">
 
-            <!-- Child -->
-            <umb-control-group label="@relationType_child">
-                <div>{{model.relationType.childObjectTypeName}}</div>
-            </umb-control-group>
+            <umb-box>
+                <umb-box-content>
 
-            <!-- Relation count -->
-            <umb-control-group label="@relationType_count" ng-if="model.relationType.relations.length > 0">
-                <div>{{model.relationType.relations.length}}</div>
-            </umb-control-group>
-        </umb-box-content>
-    </umb-box>
+                    <!-- Direction -->
+                    <umb-control-group label="@relationType_direction">
+                        <ul class="unstyled">
+                            <li>
+                                <umb-radiobutton name="relationTypeDirection"
+                                                 value="false"
+                                                 model="model.relationType.isBidirectional"
+                                                 text="{{vm.labels.parentToChild}}">
+                                </umb-radiobutton>
+                            </li>
+                            <li>
+                                <umb-radiobutton name="relationTypeDirection"
+                                                 value="true"
+                                                 model="model.relationType.isBidirectional"
+                                                 text="{{vm.labels.bidirectional}}">
+                                </umb-radiobutton>
+                            </li>
+                        </ul>
+                    </umb-control-group>
+
+                    <!-- Parent-->
+                    <umb-control-group label="@relationType_parent">
+                        <div>{{model.relationType.parentObjectTypeName}}</div>
+                    </umb-control-group>
+
+                    <!-- Child -->
+                    <umb-control-group label="@relationType_child">
+                        <div>{{model.relationType.childObjectTypeName}}</div>
+                    </umb-control-group>
+
+                    <!-- Relation count -->
+                    <umb-control-group label="@relationType_count" ng-if="model.relationType.relations.length > 0">
+                        <div>{{model.relationType.relations.length}}</div>
+                    </umb-control-group>
+                </umb-box-content>
+            </umb-box>
+
+        </div>
+
+        <div class="umb-package-details__sidebar">
+            <umb-box data-element="node-info-general">
+                <umb-box-header title-key="general_general"></umb-box-header>
+                <umb-box-content class="block-form">
+                    <umb-control-group label="Id">
+                        <div>{{model.relationType.id}}</div>
+                        <small>{{model.relationType.key}}</small>
+                    </umb-control-group>
+                </umb-box-content>
+            </umb-box>
+        </div>
+
+    </div>
+    
 </div>