VENOM-10: WIP

tpl/admin/jsTemplates/includes/btn.tpl

@@ -0,0 +1,4 @@
+<button class="btn btn--${type}">
+    <span class="btn-ripple"></span>
+    <span class="btn__content">${content}</span>
+</button>

tpl/admin/jsTemplates/includes/input.tpl

@@ -0,0 +1,7 @@
+<v-input
+    data-label="${label}"
+    required
+    name="${name}"
+    type="${type}"
+    data-error="${error}">
+</v-input>

tpl/admin/jsTemplates/includes/select.tpl

@@ -0,0 +1,8 @@
+<v-select ${required} name="${name}">
+    <v-label empty="${label}"></v-label>
+    <v-options>
+        {foreach(object as item)}
+        <v-option value="${item.value}" ${item.selected}>${item.name}</v-option>
+        {/for}
+    </v-options>
+</v-select>

tpl/admin/jsTemplates/includes/svg.tpl

@@ -0,0 +1,3 @@
+<svg role="img" class="icon">
+    <use href="/theme/admin/icon-sprite.svg#${icon}"></use>
+</svg>

tpl/admin/jsTemplates/rolesList.tpl

@@ -0,0 +1,23 @@
+<v-table>
+    <v-table-header>
+        <h2>Roles</h2>
+    </v-table-header>
+    <v-table-row>
+        <div>
+            <h3>Overview</h3>
+            {foreach(roles as role,key)}
+                <div data-link="/roles" data-id="${role.id}">
+                    <span class="icon-text">
+                        {include(includes/svg;icon=$role.icon)}
+                    </span>
+                    <span>${role.name}</span>
+                </div>
+            {/for}
+        </div>
+        <div>
+            <h3>Add new Role</h3>
+            {include(includes/input;label=New Role Name;name=newRoleame;error=New Role Name is required;type=text)}
+            {include(includes/btn;type=primary;content=Add)}
+        </div>
+    </v-table-row>
+</v-table>