TweetDuck/resources/Plugins/templates/modal.html

<div id="templates-modal-wrap" class="scroll-v scroll-styled-v">
  <div id="templates-modal">
    <div id="template-list">
      <ul></ul>
      
      <div class="templates-modal-bottom">
        <button data-action="close" class="Button--secondary"><i class="icon icon-close icon-small padding-rs"></i><span class="label">Close</span></button>
        <button data-action="new-template" class="Button--primary"><i class="icon icon-plus icon-small padding-rs"></i><span class="label">New Template</span></button>
      </div>
    </div>
    
    <div id="template-editor" class="invisible">
      <div class="template-editor-form">
        <div class="compose-text-title">Template Name</div>
        <input name="template-name" type="text">
        
        <div class="compose-text-title">Contents</div>
        <textarea name="template-contents" class="compose-text scroll-v scroll-styled-v scroll-styled-h scroll-alt"></textarea>
        
        <div class="compose-text-title template-editor-tips-button">Advanced <i class="icon icon-arrow-d"></i></div>
        <div class="template-editor-tips">
          <p>You can use the following tokens. All tokens except for <span style="font-family: monospace">{ajax}</span> can only be used once.</p>
          <ul>
            <li>{cursor}</li>
            <li>Location where the cursor is placed</li>
            <li>{cursor#&lt;selectionlength&gt;}</li>
            <li>Places cursor and selects a set amount of characters</li>
            <li>{ajax#&lt;url&gt;}</li>
            <li>Replaced with the result of a cross-origin ajax request</li>
            <li>{ajax#&lt;eval&gt;#&lt;url&gt;}</li>
            <li>Allows parsing the ajax request using <span style="font-family: monospace">$</span> as the placeholder for the result<br>Example: <span style="font-family: monospace">$.substring(0,5)</span></li>
          </ul>
          <p>To use special characters in the tweet text, escape them with a backslash:
            <br><span style="font-family: monospace">&nbsp; \{&nbsp; \}&nbsp; \#&nbsp; \\</span>
          </p>
        </div>
      </div>
      
      <div class="templates-modal-bottom">
        <button data-action="editor-cancel" class="Button--secondary"><i class="icon icon-close icon-small padding-rs"></i><span class="label">Cancel</span></button>
        <button data-action="editor-confirm" class="Button--primary" style="margin-left:4px"><i class="icon icon-check icon-small padding-rs"></i><span class="label">Confirm</span></button>
      </div>
    </div>
  </div>
  
  <style type="text/css">
    
    /* General */
    
    #templates-modal-wrap {
      width: 100%;
      height: 100%;
      padding: 49px;
      position: absolute;
      z-index: 999;
      box-sizing: border-box;
      background-color: rgba(0, 0, 0, 0.5);
    }
    
    #templates-modal {
      width: 100%;
      height: 100%;
      min-width: 500px;
      background-color: #fff;
      display: flex;
    }
    
    #templates-modal > div {
      display: flex;
      flex-direction: column;
    }
    
    .templates-modal-bottom {
      flex: 0 0 auto;
      padding: 16px;
    }
    
    #template-list .templates-modal-bottom {
      display: flex;
      justify-content: space-between;
    }
    
    #template-editor .templates-modal-bottom {
      text-align: right;
    }
    
    .manage-templates-btn {
      /* modifies the Manage Templates button while open */
      color: #fff;
      box-shadow: 0 0 2px 3px #50a5e6;
      outline: 0;
    }
    
    /* Template list */
    
    #template-list {
      height: 100%;
      flex: 1 1 auto;
    }
    
    #template-list ul {
      list-style-type: none;
      font-size: 24px;
      color: #222;
      flex: 1 1 auto;
      padding: 12px;
      overflow-y: auto;
    }
    
    #template-list li {
      display: block;
      width: 100%;
      padding: 4px 8px;
      box-sizing: border-box;
    }
    
    #template-list li[data-template] {
      cursor: pointer;
    }
    
    #template-list li[data-template]:hover {
      background-color: #d8d8d8;
    }
    
    #template-list li span {
      white-space: nowrap;
    }
    
    #template-list li .icon {
      opacity: 0.6;
      margin-left: 4px;
      padding: 3px;
    }
    
    #template-list li .icon:hover {
      opacity: 1;
    }
    
    #template-list li .template-actions {
      float: right;
    }
    
    /* Template editor */
    
    #template-editor {
      height: 100%;
      flex: 0 0 auto;
      width: 25vw;
      min-width: 225px;
      max-width: 400px;
      background-color: #485865;
    }
    
    #template-editor.invisible {
      display: none;
    }
    
    .template-editor-form {
      flex: 1 1 auto;
      padding: 12px 16px;
      font-size: 14px;
      overflow-y: auto;
    }
    
    .template-editor-form .compose-text-title {
      margin: 24px 0 9px;
    }
    
    .template-editor-form .compose-text-title:first-child {
      margin-top: 0;
    }
    
    .template-editor-form input, .template-editor-form textarea {
      color: #111 !important;
      background-color: #fff !important;
      border: none;
      border-radius: 0;
    }
    
    .template-editor-form input:focus, .template-editor-form textarea:focus {
      box-shadow: inset 0 1px 3px rgba(17, 17, 17, 0.1), 0 0 8px rgba(80, 165, 230, 0.6) !important;
    }
    
    .template-editor-form textarea {
      height: 146px;
      font-size: 14px;
      padding: 10px;
      resize: none;
    }
    
    /* Template tips */
    
    .template-editor-form .template-editor-tips-button {
      cursor: pointer;
    }
    
    .template-editor-form .template-editor-tips-button .icon {
      font-size: 12px;
      vertical-align: -5%;
      margin-left: 4px;
    }
    
    .template-editor-form .template-editor-tips {
      display: none;
    }
    
    .template-editor-form .template-editor-tips p {
      margin: 10px 0;
    }
    
    .template-editor-form .template-editor-tips p:first-child {
      margin-top: 0;
    }
    
    .template-editor-form .template-editor-tips li:nth-child(2n+1) {
      margin-top: 5px;
      padding-left: 6px;
      font-family: monospace;
    }
    
    .template-editor-form .template-editor-tips li:nth-child(2n) {
      margin-top: 1px;
      padding-left: 14px;
      opacity: 0.66;
    }
  </style>
</div>