chylex/TweetDuck
1
0
Fork 0
mirror of https://github.com/chylex/TweetDuck.git synced 2025-05-11 20:34:07 +02:00
Code

Add edit-design plugin option to set composer/drawer size

Browse Source
This commit is contained in:
chylex 2019-05-26 18:41:23 +02:00
parent d0610865bd
commit 544b8664fd
2 changed files with 41 additions and 9 deletions
Resources/Plugins/edit-design
browser.jsmodal.html

24
Resources/Plugins/edit-design/browser.js
View File

@ -8,6 +8,7 @@ enabled(){
_theme: "light",
themeOverride: false,
columnWidth: "310px",
composerWidth: "default",
fontSize: "12px",
hideTweetActions: true,
moveTweetActionsToRight: true,
@ -380,8 +381,15 @@ enabled(){
this.css.insert("#general_settings .cf { display: none !important }");
this.css.insert("#settings-modal .js-setting-list li:nth-child(3) { border-bottom: 1px solid #ccd6dd }");
this.css.insert("html[data-td-font] { font-size: "+this.config.fontSize+" !important }");
this.css.insert(".avatar { border-radius: "+this.config.avatarRadius+"% !important }");
this.css.insert(`html[data-td-font] { font-size: ${this.config.fontSize} !important }`);
this.css.insert(`.avatar { border-radius: ${this.config.avatarRadius}% !important }`);
if (this.config.composerWidth !== "default"){
const width = this.config.composerWidth;
this.css.insert(`.js-app-content.is-open { margin-right: ${width} !important; transform: translateX(${width}) !important }`);
this.css.insert(`#tduck .js-app-content.tduck-is-opening { margin-right: 0 !important }`);
this.css.insert(`.js-drawer { width: ${width} !important; left: -${width} !important }`);
}
let currentTheme = TD.settings.getTheme();
@ -638,6 +646,13 @@ ${notificationScrollbarColor ? `
$(".js-dropdown.pos-r").toggleClass("pos-r pos-l");
}
};
this.uiDrawerActiveEvent = (e, data) => {
return if data.activeDrawer === null || this.config.composerWidth === "default";
const ele = $(".js-app-content").addClass("tduck-is-opening");
setTimeout(() => ele.removeClass("tduck-is-opening"), 250);
};
}
ready(){
@ -647,6 +662,7 @@ ready(){
// layout events
$(document).on("uiShowActionsMenu", this.uiShowActionsMenuEvent);
$(document).on("uiDrawerActive", this.uiDrawerActiveEvent);
// modal
$("[data-action='settings-menu']").on("click", this.onSettingsMenuClickedEvent);
@ -709,10 +725,12 @@ disabled(){
window.clearTimeout(this.optimizationTimer);
}
$(document).off("uiShowActionsMenu", this.uiShowActionsMenuEvent);
$(window).off("focus", this.onWindowFocusEvent);
$(window).off("blur", this.onWindowBlurEvent);
$(document).off("uiShowActionsMenu", this.uiShowActionsMenuEvent);
$(document).off("uiDrawerActive", this.uiDrawerActiveEvent);
TD.components.GlobalSettings.prototype.getInfo = this.prevFuncSettingsGetInfo;
TD.components.GlobalSettings.prototype.switchTab = this.prevFuncSettingsSwitchTab;

26
Resources/Plugins/edit-design/modal.html
View File

@ -55,6 +55,20 @@
<option disabled></option>
</select>
<!-- COMPOSER SIZE -->
<label class="txt-uppercase touch-larger-label">
<b>New Tweet panel</b>
</label>
<select data-td-key="composerWidth">
<option value="default">Default</option>
<option value="270px">Narrow (270px)</option>
<option value="310px">Medium (310px)</option>
<option value="350px">Wide (350px)</option>
<option value="custom-px">Custom</option>
<option value="change-custom-px">Change custom value...</option>
</select>
<!-- FONT SIZE -->
<label class="txt-uppercase touch-larger-label">
@ -69,10 +83,6 @@
<option value="custom-px">Custom</option>
<option value="change-custom-px">Change custom value...</option>
</select>
<label class="checkbox">
<input data-td-key="forceArialFont" class="js-theme-checkbox touch-larger-label" type="checkbox">
Use Arial as default font
</label>
<label class="checkbox">
<input data-td-key="increaseQuoteTextSize" class="js-theme-checkbox touch-larger-label" type="checkbox">
Increase quoted tweet font size
@ -116,6 +126,10 @@
<input data-td-key="themeColorTweaks" class="js-theme-checkbox touch-larger-label" type="checkbox">
Theme color tweaks
</label>
<label class="checkbox">
<input data-td-key="forceArialFont" class="js-theme-checkbox touch-larger-label" type="checkbox">
Use Arial as default font
</label>
<!-- ADVANCED -->
@ -172,7 +186,7 @@
#edit-design-panel {
width: 693px;
height: 380px;
height: 424px;
background-color: #FFF;
box-shadow: 0 0 10px rgba(17, 17, 17, 0.5);
}
@ -217,7 +231,7 @@
#edit-design-panel-content label.radio {
display: inline-block;
margin: 0 16px 5px 4px;
margin: 0 16px 0 4px;
cursor: pointer;
}