[utils] more utils

client/style/style.scss

@@ -4,6 +4,7 @@
 @import "node_modules/flatpickr/dist/themes/airbnb";
 @import "node_modules/codemirror/lib/codemirror";
 @import "node_modules/frappe-datatable/dist/frappe-datatable";
+// @import "node_modules/octicons/build/build.css";
 
 $spacer-1: 0.25rem;
 $spacer-2: 0.5rem;
@@ -252,3 +253,45 @@ mark {
 	background: inherit;
 }
 
+.align-right {
+	text-align: right;
+}
+
+.align-center {
+	text-align: center;
+}
+
+.btn-sm {
+	margin: $spacer-1;
+}
+
+.vertical-margin {
+	margin: $spacer-3 0px;
+}
+
+// just for accounting
+
+.setup-container {
+	margin: 40px auto;
+	padding: 20px 0px;
+	width: 450px;
+
+	border: 1px solid $gray-300;
+	border-radius: 4px;
+
+	h3 {
+		text-align: center;
+	}
+
+	.form-body {
+		display: none;
+	}
+
+	.form-body.active {
+		display: block;
+	}
+
+	.setup-link-area {
+		margin: $spacer-1 $spacer-4;
+	}
+}

client/ui/index.js

@@ -2,6 +2,43 @@ const frappe = require('frappejs');
 const Dropdown = require('./dropdown');
 
 module.exports = {
+    create(tag, o) {
+        let element = document.createElement(tag);
+
+        let $ = (expr, con) => {
+            return typeof expr === "string"
+                ? (con || document).querySelector(expr)
+                : expr || null;
+        }
+
+        for (var i in o) {
+            let val = o[i];
+
+            if (i === "inside") {
+                $(val).appendChild(element);
+            }
+            else if (i === "around") {
+                let ref = $(val);
+                ref.parentNode.insertBefore(element, ref);
+                element.appendChild(ref);
+
+            } else if (i === "styles") {
+                if(typeof val === "object") {
+                    Object.keys(val).map(prop => {
+                        element.style[prop] = val[prop];
+                    });
+                }
+            } else if (i in element ) {
+                element[i] = val;
+            }
+            else {
+                element.setAttribute(i, val);
+            }
+        }
+
+        return element;
+    },
+
     add(tag, className, parent, textContent) {
         let element = document.createElement(tag);
         if (className) {
@@ -36,7 +73,7 @@ module.exports = {
         }
     },
 
-    remove_class(element, className) {
+    removeClass(element, className) {
         if (element.classList) {
             element.classList.remove(className);
         } else {

client/ui/utils.js

@@ -33,5 +33,24 @@ module.exports = {
             parent.classList.remove('hide');
         }
         return link;
-    }
+    },
+
+    // https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/
+    forEachNode(nodeList, callback, scope) {
+        if(!nodeList) return;
+        for (var i = 0; i < nodeList.length; i++) {
+            callback.call(scope, nodeList[i], i);
+        }
+    },
+
+    activate($parent, $child, commonClass, activeClass='active', index = -1) {
+        let $children = $parent.querySelectorAll(`.${commonClass}.${activeClass}`);
+
+        this.forEachNode($children, (node, i) => {
+            if(index >= 0 && i <= index) return;
+            node.classList.remove(activeClass);
+        })
+
+		$child.classList.add(activeClass);
+	}
 }

package.json

@@ -28,6 +28,7 @@
     "node-sass": "^4.7.2",
     "nodemon": "^1.14.7",
     "nunjucks": "^3.1.0",
+    "octicons": "^7.2.0",
     "popper.js": "^1.12.9",
     "precss": "^2.0.0",
     "rollup": "^0.55.1",

yarn.lock

@@ -2475,7 +2475,7 @@ oauth-sign@~0.8.1, oauth-sign@~0.8.2:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
 
-object-assign@^4.0.1, object-assign@^4.1.0:
+object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
 
@@ -2490,6 +2490,12 @@ object.omit@^2.0.0:
     for-own "^0.1.4"
     is-extendable "^0.1.1"
 
+octicons@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/octicons/-/octicons-7.2.0.tgz#a721635f73c774d7ffda56a83a29dbde03fc4b53"
+  dependencies:
+    object-assign "^4.1.1"
+
 on-finished@~2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"