plumes/features/grouped-buttons/html/pl-grouped-buttons.html

Flying-fast Metro future vision components

<section class="pl-grouped-buttons {{compactOpened ? 'compact-opened' : ''}} {{hidden ? 'hidden' : ''}}">
  {{#buttons:i}}
    {{#if type == 'indicator'}}
      <rv-require
        data-index="{{i}}"
        name="pl-button-indicator"
        src="../buttons/pl-button-indicator"
        class="pl-grouped-buttons-button"
        data-image="{{image}}"
        data-cls="{{cls}}"
        data-bind-action="action"

        style="
          {{orientation}}: {{mode == 'compact' ? compactPositions[i] : positions[i]}}px;
          {{mode == 'compact' ? 'top: ' + compactPositionsTop[i] + 'px;' : ''}}
        "
       ></rv-require>
    {{else}}
      <rv-require
        data-index="{{i}}"
        name="pl-button-rounded"
        src="../buttons/pl-button-rounded"
        class="pl-grouped-buttons-button"
        data-image="{{image}}"
        data-icon="{{icon}}"
        data-cls="{{cls}}"
        data-bind-action="action"

        style="
          {{orientation}}: {{mode == 'compact' ? compactPositions[i] : positions[i]}}px;
          {{mode == 'compact' ? 'top: ' + compactPositionsTop[i] + 'px;' : ''}}
        "
       ></rv-require>
    {{/if}}
  {{/buttons}}

  <div
    class="pl-grouped-button-compact-panel"
    style="height: {{compactHeight}}px; {{orientation}}: 0;"
  ></div>

  <button
    class="pl-grouped-button-compact-button {{!buttons.length ? 'no-buttons' : ''}}"
    style="{{orientation}}: {{compactButtonPosition}}px"
    on-click="compactAction"
  >
    <i class="fa fa-ellipsis-v"></i>
  </button>
</section>