Add avatar style selection to edit-design plugin

Resources/Plugins/edit-design/browser.js

@@ -131,6 +131,7 @@ enabled(){
     this.resetLayout();
     this.resetDesign();
     
+    this.css.insert(".avatar { border-radius: "+this.config.avatarRadius+"% !important }");
     // TODO
   };
 }

Resources/Plugins/edit-design/modal.html

@@ -8,6 +8,33 @@
   <div class="mdl-inner">
     <div class="mdl-content js-mdl-content horizontal-flow-container">
       
+      <!-- AVATAR SHAPE -->
+      
+      <div class="td-modal-inner-full">
+        <label class="txt-uppercase txt-center touch-larger-label">
+          <b>Avatar shape</b>
+        </label>
+        <div class="td-avatar-shape-container">
+          <div class="td-avatar-shape-item-outer" data-td-key="avatarRadius" data-td-value="2">
+            <div class="td-avatar-shape" style="border-radius:2%"></div>
+            <label>Square</label>
+          </div>
+          <div class="td-avatar-shape-item-outer" data-td-key="avatarRadius" data-td-value="10">
+            <div class="td-avatar-shape" style="border-radius:10%"></div>
+            <label>Default</label>
+          </div>
+          <div class="td-avatar-shape-item-outer" data-td-key="avatarRadius" data-td-value="30">
+            <div class="td-avatar-shape" style="border-radius:30%"></div>
+            <label>Rounded</label>
+          </div>
+          <div class="td-avatar-shape-item-outer" data-td-key="avatarRadius" data-td-value="50">
+            <div class="td-avatar-shape" style="border-radius:50%"></div>
+            <label>Circle</label>
+          </div>
+        </div>
+      </div>
+      
+      <!-- END -->
     </div>
     <footer class="padding-vxl txt-center">
       <button class="js-dismiss btn btn-positive pull-right">
@@ -35,4 +62,36 @@
   .td-modal-inner-full .txt-center {
     margin-bottom: 10px;
   }
+  
+  .td-avatar-shape-container {
+    text-align: center;
+  }
+  
+  .td-avatar-shape-item-outer {
+    display: inline-block;
+    margin: 0 12px;
+    padding: 20px 20px 10px;
+    box-sizing: border-box;
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
+    border: 2px solid #F5F8FA;
+    background-color: #F5F8FA;
+  }
+  
+  .td-avatar-shape-item-outer:hover {
+    border-color: #888;
+  }
+  
+  .td-avatar-shape-item-outer.selected {
+    border-color: #666;
+  }
+  
+  .td-avatar-shape-item-outer label {
+    margin: 10px 0 0;
+  }
+  
+  .td-avatar-shape {
+    width: 48px;
+    height: 48px;
+    background-color: #71BAF2;
+  }
 </style>

Resources/Plugins/edit-design/notification.js

@@ -21,9 +21,11 @@ run(){
   
   // config handling
   this.defaultConfig = {
+    avatarRadius: 10
   };
   
   var loadConfigObject = config => {
     let css = window.TDPF_createCustomStyle(this);
+    css.insert(".avatar { border-radius: "+config.avatarRadius+"% !important }");
   };
 }