piskel/src/templates/dialogs/import.html

<script type="text/template" id="templates/dialogs/import.html">
  <div class="dialog-wrapper">
    <h3 class="dialog-head">
      Import and Merge
      <span class="dialog-close">X</span>
    </h3>
    <div class="dialog-content import-wizard-container"></div>
  </div>
</script>

<script type="text/template" id="import-image-import">
<div class="import-step-container import-image-container">
  <form action="" method="POST" name="import-image-form">
    <div class="import-section">
      <span class="dialog-section-title">Name :</span><span class="import-image-file-name"></span>
    </div>
    <div class="import-section">
      <div class="import-section-preview"></div>
    </div>
    <div class="import-section">
      <label class="dialog-section-radio-label">
        <input class="dialog-section-radio" name="import-type" value="single" type="radio" checked="checked">
        Import as single image
      </label>
    </div>
    <div class="import-section import-subsection">
      <span class="dialog-section-title">Resize to</span>
      <input type="text" class="textfield import-size-field" autocomplete="off" name="resize-width"/>x
      <input type="text" class="textfield import-size-field" autocomplete="off" name="resize-height"/>
    </div>
    <div class="import-section import-subsection">
      <span class="import-section-title">Smooth resize</span>
      <input type="checkbox" class="checkbox-fix" checked="checked" name="smooth-resize-checkbox" value="1"/>
    </div>
    <div class="import-section">
      <label class="dialog-section-radio-label">
        <input class="dialog-section-radio" name="import-type" value="sheet" type="radio">
        Import as spritesheet
      </label>
    </div>
    <div class="import-section import-subsection">
      <span class="dialog-section-title">Frame size</span>
      <input type="text" class="textfield import-size-field" autocomplete="off" name="frame-size-x"/>x
      <input type="text" class="textfield import-size-field" autocomplete="off" name="frame-size-y"/>
    </div>
    <div class="import-section import-subsection">
      <span class="dialog-section-title">Offset</span>
      <input type="text" class="textfield import-size-field" autocomplete="off" name="frame-offset-x"/>x
      <input type="text" class="textfield import-size-field" autocomplete="off" name="frame-offset-y"/>
    </div>
  </form>
  <div class="import-step-buttons">
    <button class="import-back-button button">back</button>
    <button class="import-next-button button button-primary">next</button>
  </div>
</div>
</script>

<script type="text/template" id="import-select-mode">
<div class="import-step-container">
  <div class="import-info">
    <div class="import-preview"></div>
    <div class="import-meta"></div>
  </div>

  <div class="import-step-content">
    <div class="import-mode">
      <div class="import-mode-title">How do you want to import the new content?</div>
      <div class="import-mode-section">
        <span class="import-mode-section-description">Combine with your sprite</span>
        <button class="import-mode-merge-button button-primary button">Combine</button>
      </div>
      <div class="import-mode-section">
        <span class="import-mode-section-description">Replace your sprite</span>
        <button class="import-mode-replace-button button-primary button">Replace</button>
      </div>
    </div>

    <div class="import-step-buttons">
      <button class="import-back-button button">back</button>
      <button style="display: none" class="import-next-button button button-primary">next</button>
    </div>
  </div>
</div>
</script>

<script type="text/template" id="import-meta-content">
  <div class="import-name">
    <span class="import-meta-label">Name</span>
    <span class="import-meta-value" title="{{name}}">{{name}}</span>
  </div>
  <div class="import-dimensions">
    <span class="import-meta-label">Dimensions</span>
    <span class="import-meta-value">{{dimensions}}</span>
  </div>
  <div class="import-frames">
    <span class="import-meta-label">Frames</span>
    <span class="import-meta-value">{{frames}}</span>
  </div>
  <div class="import-layers">
    <span class="import-meta-label">Layers</span>
    <span class="import-meta-value">{{layers}}</span>
  </div>
</script>

<script type="text/template" id="import-adjust-size">
<div class="import-step-container">

  <div class="import-info">
    <div class="import-preview"></div>
    <div class="import-meta"></div>
  </div>

  <div class="import-step-content">
    <div class="import-resize-info"></div>
    <div class="import-resize-anchor import-resize-section">
      <div class="import-resize-anchor-info"></div>
      <div class="import-resize-anchor-container"></div>
    </div>
    <div class="import-step-buttons">
      <button class="import-back-button button">back</button>
      <button class="import-next-button button button-primary">next</button>
    </div>
  </div>
</div>
</script>

<script type="text/template" id="import-resize-bigger-partial">
<div class="import-resize-bigger">
  <div class="import-resize-section">
    The imported image is bigger than the current sprite.
  </div>
  <div class="import-resize-section">
    <label class="import-resize-option">
      <input type="radio" name="resize-mode" id="resize-option-expand" value="expand" {{expandChecked}}/>
      <span>Expand canvas to {{newSize}}</span>
    </label>
    <label class="import-resize-option">
      <input type="radio" name="resize-mode" id="resize-option-keep" value="keep" {{keepChecked}}/>
      <span>Keep canvas size at {{size}}</span>
    </label>
  </div>
</div>
</script>

<script type="text/template" id="import-resize-smaller-partial">
<div class="import-resize-smaller">
  <div class="import-resize-section">
    The image being imported is smaller ({{newSize}}) than the canvas size ({{size}}).
  </div>
</div>
</script>

<script type="text/template" id="import-insert-location">
<div class="import-step-container">
  <div class="import-info">
    <div class="import-preview"></div>
    <div class="import-meta"></div>
  </div>

  <div class="import-step-content">
    <div>Select the insertion frame:</div>
    <div class="insert-frame-preview"></div>
    <div class="insert-mode-container">
      <div class="insert-mode-option-label">
        Insert imported frames:
      </div>
      <label class="insert-mode-option">
        <input type="radio" name="insert-mode" id="insert-mode-add" value="add" checked="checked"/>
        <span>as new frames</span>
      </label>
      <label class="insert-mode-option">
        <input type="radio" name="insert-mode" id="insert-mode-insert" value="insert"/>
        <span>in existing frames</span>
      </label>
    </div>
    <div class="import-step-buttons">
      <button class="import-back-button button">back</button>
      <button class="import-next-button button button-primary">import</button>
    </div>
  </div>
</div>
</script>