Add several toggles to edit-design plugin (most from revert-design)

Resources/Plugins/edit-design/browser.js

@@ -7,6 +7,10 @@ enabled(){
   this.defaultConfig = {
     columnWidth: "310px",
     fontSize: "12px",
+    hideTweetActions: true,
+    moveTweetActionsToRight: true,
+    smallComposeTextSize: false,
+    roundedScrollBars: false,
     avatarRadius: 10
   };
   
@@ -167,9 +171,6 @@ enabled(){
   });
   
   // css and layout injection
-  this.resetLayout = function(){
-  };
-  
   this.resetDesign = function(){
     if (this.css){
       this.css.remove();
@@ -179,12 +180,33 @@ enabled(){
   };
   
   this.reinjectAll = function(){
-    this.resetLayout();
     this.resetDesign();
     
     this.css.insert(".txt-base-smallest:not(.icon), .txt-base-largest:not(.icon) { font-size: "+this.config.fontSize+" !important }");
     this.css.insert(".avatar { border-radius: "+this.config.avatarRadius+"% !important }");
     
+    if (this.config.hideTweetActions){
+      this.css.insert(".tweet-action { opacity: 0; }");
+      this.css.insert(".is-favorite .tweet-action, .is-retweet .tweet-action { opacity: 0.5; visibility: visible !important; }");
+      this.css.insert(".tweet:hover .tweet-action, .is-favorite .tweet-action[rel='favorite'], .is-retweet .tweet-action[rel='retweet'] { opacity: 1; visibility: visible !important; }");
+    }
+    
+    if (this.config.moveTweetActionsToRight){
+      this.css.insert(".tweet-actions { float: right !important; width: auto !important; }");
+      this.css.insert(".tweet-actions > li:nth-child(4) { margin-right: 2px !important; }");
+    }
+    
+    if (this.config.smallComposeTextSize){
+      this.css.insert(".compose-text { font-size: 12px !important; height: 120px !important; }");
+    }
+    
+    if (!this.config.roundedScrollBars){
+      this.css.insert(".scroll-styled-v::-webkit-scrollbar { width: 8px }");
+      this.css.insert(".scroll-styled-h::-webkit-scrollbar { height: 8px }");
+      this.css.insert(".scroll-styled-v::-webkit-scrollbar-thumb { border-radius: 0 }");
+      this.css.insert(".scroll-styled-h::-webkit-scrollbar-thumb { border-radius: 0 }");
+    }
+    
     if (this.config.columnWidth[0] === '/'){
       let cols = this.config.columnWidth.slice(1);
       
@@ -217,6 +239,12 @@ enabled(){
       default: TD.settings.setFontSize(parseInt(this.config.fontSize, 10) >= 16 ? "largest" : "smallest"); break;
     }
   };
+  
+  this.uiShowActionsMenuEvent = function(){
+    if (this.config.moveTweetActionsToRight){
+      $(".js-dropdown.pos-r").toggleClass("pos-r pos-l");
+    }
+  };
 }
 
 ready(){
@@ -235,18 +263,21 @@ ready(){
   
   this.onAppReady();
   
-  // DOM
+  // layout events
+  $(document).on("uiShowActionsMenu", this.uiShowActionsMenuEvent);
+  
+  // modal
   $("[data-action='settings-menu']").on("click", this.onSettingsMenuClickedEvent);
   $(".js-app").append('<div id="td-design-plugin-modal" class="js-modal settings-modal ovl scroll-v scroll-styled-v"></div>');
 }
 
 disabled(){
-  this.resetLayout();
-  
   if (this.css){
     this.css.remove();
   }
   
+  $(document).off("uiShowActionsMenu", this.uiShowActionsMenuEvent);
+  
   $("[data-action='settings-menu']").off("click", this.onSettingsMenuClickedEvent);
   $("#td-design-plugin-modal").remove();
 }

Resources/Plugins/edit-design/modal.html

@@ -1,4 +1,4 @@
-<div class="js-modal-panel mdl s-tall-fixed is-inverted-dark">
+<div class="td-modal-panel js-modal-panel mdl s-tall-fixed is-inverted-dark">
   <header class="js-mdl-header mdl-header js-drag-handle">
     <h3 class="mdl-header-title js-header-title">TweetDuck - Layout &amp; Design</h3>
     <a href="#" class="mdl-dismiss js-dismiss link-normal-dark">
@@ -64,6 +64,28 @@
         </div>
         
         <div class="l-column mdl-column">
+          
+          <!-- DESIGN -->
+          
+          <label class="txt-uppercase touch-larger-label">
+            <b>Layout &amp; Design</b>
+          </label>
+          <label class="checkbox">
+            <input data-td-key="hideTweetActions" class="js-theme-checkbox touch-larger-label" type="checkbox">
+            Hide Tweet Actions
+          </label>
+          <label class="checkbox">
+            <input data-td-key="moveTweetActionsToRight" class="js-theme-checkbox touch-larger-label" type="checkbox">
+            Tweet Actions on the Right Side
+          </label>
+          <label class="checkbox">
+            <input data-td-key="smallComposeTextSize" class="js-theme-checkbox touch-larger-label" type="checkbox">
+            Small Compose Tweet Font Size
+          </label>
+          <label class="checkbox">
+            <input data-td-key="roundedScrollBars" class="js-theme-checkbox touch-larger-label" type="checkbox">
+            Rounded Scroll Bars
+          </label>
         </div>
         
         <div class="l-column mdl-column">
@@ -109,6 +131,11 @@
   
   /* Containers */
   
+  .td-modal-panel {
+    width: 693px;
+    height: 374px;
+  }
+  
   .td-modal-inner-cols {
     padding: 0 6px;
   }
@@ -118,6 +145,10 @@
     box-sizing: border-box;
   }
   
+  .td-modal-inner-cols .l-column:nth-child(2) {
+    width: 250px;
+  }
+  
   .td-modal-inner-full {
     padding: 15px;
   }