Default

Campaign selector102 of 102 campaigns selected

Categories

Campaigns

Type

Clear All Filters
Cancel
Apply
<div class="e-row">
  <div class="e-col-6">
    <div class="e-campaignselector e-campaignselector-opened">
      <div class="e-campaignselector__button">
        <e-icon icon="e-campaign_selector" class-name="e-daterangepicker__icon"></e-icon>
        <span>
          <span class="e-campaignselector__item">
            Campaign selector
          </span>
          <span class="text-size-small">
            102 of 102 campaigns selected
          </span>
        </span>
        <span class="icon-right hide-pdf"></span>
      </div>
      <div class="e-campaignselector__popup">
        <div class="e-field">
          <div class="e-row">
            <div class="e-col-3 e-col-condensed">
              <h3>
                Categories
              </h3>
              <select class="e-select e-select__select2">
                <option>
                  All
                </option>
                <option>
                  No category
                </option>
                <option>
                  Content Editor
                </option>
              </select>
            </div>
            <div class="e-col-6 e-col-condensed">
              <h3>
                Campaigns
              </h3>
              <div style="position: relative;" class="clearable">
                <input class="e-input">
                <button type="button" style="position: absolute; cursor: pointer; top: 0px; right: 5px; border: 0px; display: none; background-color: transparent;" class="close">
                  ×
                </button>
              </div>
            </div>
            <div class="e-col-3 e-col-condensed">
              <h3>
                Type
              </h3>
              <select class="e-select e-select__select2">
                <option>
                  All
                </option>
                <option>
                  Ad hoc
                </option>
                <option>
                  Recurring
                </option>
                <option>
                  On event
                </option>
              </select>
            </div>
          </div>
        </div>
        <div class="e-field">
          <div class="e-row">
            <div class="e-col-7">
              <div class="e-buttongroup e-buttongroup-sticky">
                <button type="button" class="e-btn js-select-all">
                  Select all
                </button>
                <button type="button" class="e-btn js-deselect-all">
                  Deselect all
                </button>
                <button class="e-btn e-btn-disabled">
                  102 of 102 selected
                </button>
              </div>
            </div>
            <div class="e-col-5 text-align-right">
              <input type="checkbox" class="e-checkbox">
              <label for="js-selectedonly">
                Show only selected
              </label>
            </div>
          </div>
        </div>
        <div class="e-field">
          <div class="e-row">
            <div class="e-col-12">
              <div class="e-campaignselector__list">
                <div class="e-campaignselector__campaign campaign e-campaignselector__campaign-visible">
                  <input type="checkbox" checked="checked" class="e-checkbox">
                  <label>
                    <span>
                      ac_genreg_ksz_trunk-int_09300900
                    </span>
                    <small class="text-size-small">
                      (1 launches)
                    </small>
                    <small class="text-size-small float-right">
                      Recurring
                    </small>
                  </label>
                </div>
                <div class="e-campaignselector__campaign campaign e-campaignselector__campaign-visible">
                  <input type="checkbox" checked="checked" class="e-checkbox js-campaign-checkbox">
                  <label>
                    <span>
                      advanced_template_ksz
                    </span>
                    <small ng-show="launch.children" class="text-size-small">
                      (30 launches)
                    </small>
                    <small class="text-size-small float-right">
                      Recurring
                    </small>
                  </label>
                </div>
                <div class="e-campaignselector__campaign e-campaignselector__campaign-visible">
                  <input type="checkbox" checked="checked" class="e-checkbox">
                  <label>
                    <span>
                      Auto-generate text version 2015-11-24
                    </span>
                    <span>
                      (Nov 24, 2015)
                    </span>
                    <small class="text-size-small">
                      (1 launches)
                    </small>
                    <small class="text-size-small float-right">
                      Ad hoc
                    </small>
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="e-row">
          <div class="e-col-12">
            <div class="e-buttongroup">
              <div class="e-btn">
                Clear All Filters
              </div>
              <div class="e-btn">
                Cancel
              </div>
              <e-tooltip content="No changes have been made to the campaign selection">
                <div class="e-btn e-btn-primary e-btn-disabled">
                  Apply
                </div>
              </e-tooltip>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

                        <div class="e-row">
                          <div class="e-col-6">
                            <div class="e-campaignselector e-campaignselector-opened">
                              <div class="e-campaignselector__button">
                                <e-icon icon="e-campaign_selector" class-name="e-daterangepicker__icon"></e-icon><span><span class="e-campaignselector__item">Campaign selector</span><span class="text-size-small">102 of 102 campaigns selected</span></span><span class="icon-right hide-pdf"></span>
                              </div>
                              <div class="e-campaignselector__popup">
                                <div class="e-field">
                                  <div class="e-row">
                                    <div class="e-col-3 e-col-condensed">
                                      <h3>Categories</h3>
                                      <select class="e-select e-select__select2">
                                        <option>All</option>
                                        <option>No category</option>
                                        <option>Content Editor</option>
                                      </select>
                                    </div>
                                    <div class="e-col-6 e-col-condensed">
                                      <h3>Campaigns</h3>
                                      <div style="position: relative;" class="clearable">
                                        <input class="e-input">
                                        <button type="button" style="position: absolute; cursor: pointer; top: 0px; right: 5px; border: 0px; display: none; background-color: transparent;" class="close">×</button>
                                      </div>
                                    </div>
                                    <div class="e-col-3 e-col-condensed">
                                      <h3>Type</h3>
                                      <select class="e-select e-select__select2">
                                        <option>All</option>
                                        <option>Ad hoc</option>
                                        <option>Recurring</option>
                                        <option>On event</option>
                                      </select>
                                    </div>
                                  </div>
                                </div>
                                <div class="e-field">
                                  <div class="e-row">
                                    <div class="e-col-7">
                                      <div class="e-buttongroup e-buttongroup-sticky">
                                        <button type="button" class="e-btn js-select-all">Select all</button>
                                        <button type="button" class="e-btn js-deselect-all">Deselect all</button>
                                        <button class="e-btn e-btn-disabled">102 of 102 selected</button>
                                      </div>
                                    </div>
                                    <div class="e-col-5 text-align-right">
                                      <input type="checkbox" class="e-checkbox">
                                      <label for="js-selectedonly">Show only selected</label>
                                    </div>
                                  </div>
                                </div>
                                <div class="e-field">
                                  <div class="e-row">
                                    <div class="e-col-12">
                                      <div class="e-campaignselector__list">
                                        <div class="e-campaignselector__campaign campaign e-campaignselector__campaign-visible">
                                          <input type="checkbox" checked="checked" class="e-checkbox">
                                          <label><span>ac_genreg_ksz_trunk-int_09300900</span><small class="text-size-small">(1 launches)</small><small class="text-size-small float-right">Recurring</small></label>
                                        </div>
                                        <div class="e-campaignselector__campaign campaign e-campaignselector__campaign-visible">
                                          <input type="checkbox" checked="checked" class="e-checkbox js-campaign-checkbox">
                                          <label><span>advanced_template_ksz</span><small ng-show="launch.children" class="text-size-small">(30 launches)</small><small class="text-size-small float-right">Recurring</small></label>
                                        </div>
                                        <div class="e-campaignselector__campaign e-campaignselector__campaign-visible">
                                          <input type="checkbox" checked="checked" class="e-checkbox">
                                          <label><span>Auto-generate text version 2015-11-24</span><span>(Nov 24, 2015)</span><small class="text-size-small">(1 launches)</small><small class="text-size-small float-right">Ad hoc</small></label>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="e-row">
                                  <div class="e-col-12">
                                    <div class="e-buttongroup">
                                      <div class="e-btn">Clear All Filters</div>
                                      <div class="e-btn">Cancel</div>
                                      <e-tooltip content="No changes have been made to the campaign selection">
                                        <div class="e-btn e-btn-primary e-btn-disabled">Apply</div>
                                      </e-tooltip>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>

Campaignselector

This is a custom component for Trend Reporting. In order to use it, you have to implement all the logic in the Javascript.

Last update

Message refactor(icon): use new component
Date:
()
Committer: David Gyenes
Component history