1
0
mirror of https://github.com/chylex/TweetDuck.git synced 2025-01-26 00:46:04 +01:00
TweetDuck/Resources/Plugins/edit-design/modal.html

244 lines
7.7 KiB
HTML

<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">
<i class="icon icon-close"></i>
</a>
</header>
<div class="mdl-inner">
<div class="td-modal-content mdl-content js-mdl-content horizontal-flow-container">
<div class="td-modal-inner-cols">
<div class="l-column mdl-column">
<!-- THEME -->
<label class="txt-uppercase touch-larger-label">
<b>Theme</b>
</label>
<label class="radio">
<input data-td-theme="dark" class="js-theme-radio touch-larger-label" name="theme" type="radio">
Dark
</label>
<label class="radio">
<input data-td-theme="light" class="js-theme-radio touch-larger-label" name="theme" type="radio">
Light
</label>
<!-- COLUMN SIZE -->
<label class="txt-uppercase touch-larger-label">
<b>Columns</b>
</label>
<select data-td-key="columnWidth">
<option disabled></option>
<optgroup label="Fixed width">
<option value="270px">Narrow (270px)</option>
<option value="310px">Medium (310px)</option>
<option value="350px">Wide (350px)</option>
<option value="400px">Extreme (400px)</option>
<option value="custom">Custom</option>
</optgroup>
<option disabled></option>
<optgroup label="Dynamic width">
<option value="/3">3 columns on screen</option>
<option value="/4">4 columns on screen</option>
<option value="/5">5 columns on screen</option>
<option value="/6">6 columns on screen</option>
</optgroup>
<option disabled></option>
</select>
<!-- FONT SIZE -->
<label class="txt-uppercase touch-larger-label">
<b>Font size</b>
</label>
<select data-td-key="fontSize">
<option value="12px">Tiny (12px)</option>
<option value="13px">Small (13px)</option>
<option value="14px">Medium (14px)</option>
<option value="15px">Large (15px)</option>
<option value="16px">Largest (16px)</option>
<option value="custom">Custom</option>
</select>
<!-- ADVANCED -->
<label class="txt-uppercase touch-larger-label">
<b>Advanced</b>
</label>
<label class="checkbox">
<input data-td-key="optimizeAnimations" class="js-theme-checkbox touch-larger-label" type="checkbox">
Use more memory for smoother animations
</label>
</div>
<div class="l-column mdl-column">
<!-- LAYOUT -->
<label class="txt-uppercase touch-larger-label">
<b>Layout</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="revertReplies" data-td-reload class="js-theme-checkbox touch-larger-label" type="checkbox">
Revert reply style (reloads page)
</label>
<!-- DESIGN -->
<label class="txt-uppercase touch-larger-label">
<b>Design</b>
</label>
<label class="checkbox">
<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="roundedScrollBars" class="js-theme-checkbox touch-larger-label" type="checkbox">
Rounded scroll bars
</label>
<label class="checkbox">
<input data-td-key="revertIcons" class="js-theme-checkbox touch-larger-label" type="checkbox">
Revert icon design
</label>
<label class="checkbox">
<input data-td-key="smallComposeTextSize" class="js-theme-checkbox touch-larger-label" type="checkbox">
Small compose tweet font size
</label>
</div>
<div class="l-column mdl-column">
<!-- AVATAR SHAPE -->
<label class="txt-uppercase 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>Round</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>
</div>
<!-- END -->
</div>
<footer class="padding-vxl txt-center">
<button class="js-dismiss btn btn-positive pull-right">
<i class="icon icon-check icon-small padding-rs"></i>
<span class="label">Done</span>
</button>
</footer>
</div>
</div>
<style type="text/css">
/* Containers */
.td-modal-panel {
width: 693px;
height: 380px;
}
.td-modal-inner-cols {
padding: 0 6px;
}
.td-modal-inner-cols .l-column {
padding: 15px 9px;
box-sizing: border-box;
font-size: 0; /* fix custom font size breaking the modal layout */
}
.td-modal-inner-cols .l-column:nth-child(2) {
width: 250px;
}
.td-modal-inner-full {
padding: 15px;
}
.td-modal-inner-full .txt-center {
margin-bottom: 10px;
}
/* Elements */
.td-modal-content label {
margin-top: 18px;
}
.td-modal-content label:first-child {
margin-top: 0;
}
.td-modal-content label.radio {
display: inline-block;
margin: 0 16px 5px 4px;
cursor: pointer;
}
.td-modal-content label.checkbox {
margin: 0 0 5px 4px;
cursor: pointer;
}
/* Avatar shape */
.td-avatar-shape-container {
text-align: center;
}
.td-avatar-shape-item-outer {
display: inline-block;
margin: 0 4px 10px;
padding: 16px 14px 8px;
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>