diff --git a/Resources/Plugins/edit-design/browser.js b/Resources/Plugins/edit-design/browser.js index f51ec9c5..a431a350 100644 --- a/Resources/Plugins/edit-design/browser.js +++ b/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(); } diff --git a/Resources/Plugins/edit-design/modal.html b/Resources/Plugins/edit-design/modal.html index 79316032..6be56d55 100644 --- a/Resources/Plugins/edit-design/modal.html +++ b/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 & 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 & 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; }