#22776 - Polished version of menu configurator admin area

SnowdogApps · Sep 9, 2016 · 98aec10 · 98aec10
1 parent 9beddcb
commit 98aec10
Show file tree

Hide file tree

Showing 13 changed files with 269 additions and 667 deletions.
diff --git a/view/adminhtml/layout/snowmenu_menu_edit.xml b/view/adminhtml/layout/snowmenu_menu_edit.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0"?>
 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
     <head>
-        <css src="Snowdog_Menu::css/jstree/style.min.css" />
+        <css src="Snowdog_Menu::css/styles.css" />
         <css src="Snowdog_Menu::css/autocomplete.css" />
+        <css src="Snowdog_Menu::css/jstree/style.min.css" />
     </head>
     <body>
         <referenceContainer name="content">
@@ -23,4 +24,4 @@
             </block>
         </referenceContainer>
     </body>
-</page>
+</page>
diff --git a/view/adminhtml/layout/snowmenu_menu_index.xml b/view/adminhtml/layout/snowmenu_menu_index.xml
@@ -5,4 +5,4 @@
             <uiComponent name="snowmenu_menu_list"/>
         </referenceContainer>
     </body>
-</page>
+</page>
diff --git a/view/adminhtml/requirejs-config.js b/view/adminhtml/requirejs-config.js
@@ -6,13 +6,13 @@
 var config = {
     map: {
         '*': {
-            snowMenuTree: "Snowdog_Menu/js/jstree",
+            snowMenuAutoCompleteField: "Snowdog_Menu/js/auto_complete_field",
+            snowMenuEditorAdd: "Snowdog_Menu/js/add",
             snowMenuEditorInit: "Snowdog_Menu/js/init",
-            snowMenuEditorSerialize: "Snowdog_Menu/js/serialize",
             snowMenuEditorRename: "Snowdog_Menu/js/rename",
-            snowMenuEditorAdd: "Snowdog_Menu/js/add",
+            snowMenuEditorSerialize: "Snowdog_Menu/js/serialize",
             snowMenuSimpleField: "Snowdog_Menu/js/simple_field",
-            snowMenuAutoCompleteField: "Snowdog_Menu/js/auto_complete_field"
+            snowMenuTree: "Snowdog_Menu/js/jstree"
         }
     }
 };
diff --git a/view/adminhtml/templates/menu/node_type/category.phtml b/view/adminhtml/templates/menu/node_type/category.phtml
@@ -1,8 +1,17 @@
 <?php /** @var $block \Snowdog\Menu\Block\NodeType\Category */ ?>
-<div class="admin__field field field-title" data-mage-init='<?= str_replace('\'', '', $block->getJsonConfig()) ?>'>
-    <label class="label admin__field-label" for="category-id"><?= __('Category') ?></label>
+<div class="admin__field field field-title"
+     data-mage-init='<?= str_replace('\'', '', $block->getJsonConfig()) ?>'
+>
+    <label class="label admin__field-label">
+        <?= __('Category') ?>
+    </label>
     <div class="admin__field-control control autocomplete_container">
-        <input class="input-text admin__control-text" id="category-id" type="text"/>
+        <input class="input-text admin__control-text" type="text"/>
     </div>
-    <span class="label"></span>
-</div>
+    <div class="selected-option">
+      <p class="selected-option__label">
+        Category ID
+      </p>
+      <p class="selected-option__value"></p>
+    </div>
+</div>
diff --git a/view/adminhtml/templates/menu/nodes.phtml b/view/adminhtml/templates/menu/nodes.phtml
@@ -1,35 +1,58 @@
 <?php /** @var $block \Snowdog\Menu\Block\Menu\Edit\Tab\Nodes */ ?>
-<fieldset class="fieldset admin__fieldset fieldset-wide" id="menu_tree_editor">
-    <div>
-        <div class="admin__field field field-title" data-mage-init='{"snowMenuEditorInit":{}}'
-             id="snowmenu_tree_container">
-            <?= $block->renderNodes() ?>
-        </div>
-        <div class="admin__field field field-title" data-mage-init='{"snowMenuEditorAdd":{}}'
-             class="node-buttons-container">
-            <?php foreach ($block->getNodeButtons() as $code => $label): ?>
-                <button id="add-<?= $code ?>" data-type="<?= $code ?>"><?= $label ?></button>
-            <?php endforeach ?>
-            <button data-remove="true"><?= __('Delete selected node') ?></button>
-        </div>
-        <div class="admin__field field field-title">
-            <label class="label admin__field-label" for="snowmenu-node-name"><?= __('Node name') ?></label>
-            <div class="admin__field-control control">
-                <input class="input-text admin__control-text" data-mage-init='{"snowMenuEditorRename":{"type":"name"}}'
-                       id="snowmenu-node-name" type="text"/>
-            </div>
+<div class="fieldset admin__fieldset fieldset-wide snowdog-tree-menu-editor" id="menu_tree_editor">
+    <div class="admin__field field field-title"
+         data-mage-init='{"snowMenuEditorInit":{}}'
+         id="snowmenu_tree_container"
+    >
+        <?= $block->renderNodes() ?>
+    </div>
+
+    <div class="admin__field field field-title"
+         data-mage-init='{"snowMenuEditorAdd":{}}'
+         class="node-buttons-container"
+    >
+        <?php foreach ($block->getNodeButtons() as $code => $label): ?>
+            <button id="add-<?= $code ?>" data-type="<?= $code ?>">
+                <?= $label ?>
+            </button>
+        <?php endforeach ?>
+        <button data-remove="true">
+            <?= __('Delete selected node') ?>
+        </button>
+    </div>
+
+    <div class="admin__field field field-title">
+        <label class="label admin__field-label" for="snowmenu-node-name">
+            <?= __('Node name') ?>
+        </label>
+        <div class="admin__field-control control">
+            <input class="input-text admin__control-text"
+                   data-mage-init='{"snowMenuEditorRename":{"type":"name"}}'
+                   id="snowmenu-node-name"
+                   type="text"
+            />
         </div>
-        <div class="admin__field field field-title">
-            <label class="label admin__field-label" for="snowmenu-node-classes"><?= __('Node CSS classes') ?></label>
-            <div class="admin__field-control control">
-                <input class="input-text admin__control-text"
-                       data-mage-init='{"snowMenuEditorRename":{"type":"classes"}}'
-                       id="snowmenu-node-classes" type="text"/>
-            </div>
+    </div>
+
+    <div class="admin__field field field-title">
+        <label class="label admin__field-label"for="snowmenu-node-classes">
+          <?= __('Node CSS classes') ?>
+        </label>
+        <div class="admin__field-control control">
+            <input class="input-text admin__control-text"
+                   data-mage-init='{"snowMenuEditorRename":{"type":"classes"}}'
+                   id="snowmenu-node-classes"
+                   type="text"
+             />
         </div>
-        <?php foreach ($block->getNodeForms() as $form): ?>
-            <?= $form->toHtml() ?>
-        <?php endforeach ?>
-        <input type="hidden" name="serialized_nodes" data-mage-init='{"snowMenuEditorSerialize":{}}'/>
     </div>
+
+    <?php foreach ($block->getNodeForms() as $form): ?>
+        <?= $form->toHtml() ?>
+    <?php endforeach ?>
+
+    <input type="hidden"
+           name="serialized_nodes"
+           data-mage-init='{"snowMenuEditorSerialize":{}}'
+    />
 </fieldset>