Umbraco-CMS/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html

<div ng-controller="Umbraco.PropertyEditors.GridController" class="umb-grid umb-property-editor clearfix" id="umb-grid">

    <umb-editor-sub-header ng-if="showReorderButton()" appearance="white">

        <umb-editor-sub-header-content-right>
            <umb-button
                type="button"
                icon="icon-navigation"
                button-style="link"
                label-key="{{reorderKey}}"
                action="toggleSortMode()">
            </umb-button>
        </umb-editor-sub-header-content-right>

    </umb-editor-sub-header>


    <div ng-if="contentReady">

        <!-- Template picker -->

        <div class="templates-preview"
             ng-show="!model.value || model.value == ''">

             <p><strong><localize key="grid_chooseLayout" /></strong></p>

            <div class="preview-rows layout"
                 ng-repeat="template in model.config.items.templates"
                 ng-click="addTemplate(template)">

                <div class="preview-row">

                    <div class="preview-col"
                         ng-repeat="section in template.sections"
                         ng-style="{width: percentage(section.grid) + '%'}">

                        <div class="preview-cell">
                        </div>

                    </div>

                </div>

                <div class="preview-overlay">
                </div>

                <small>{{template.name}}</small>

            </div> <!-- .templates-preview-rows -->

        </div> <!-- .templates-preview -->
        <!-- template picker end -->

        <!-- Grids -->
        <div class="umb-grid-width">
            <div class="tb">

                <!-- for each column in model -->
                <div class="umb-column td"
                     ng-repeat="section in model.value.sections"
                     ng-init="initSection(section)"
                     ng-style="{width: section.$percentage + '%'}">

                    <div ui-sortable="sortableOptionsRow" ng-model="section.rows">

                        <!-- for each row in template section -->
                        <!-- ng-mouseenter="setCurrentRow(row)" -->
                        <!-- ng-mouseleave="disableCurrentRow()"  -->
                        <div class="umb-row"
                             ng-repeat="row in section.rows"
                             ng-click="clickRow($index, section.rows, $event)"
                             ng-class="{
                                     '-has-config': row.hasConfig,
                                     '-active': row === active,
                                     '-active-child': row === currentRowWithActiveChild}"

                             bind-click-on="{{row === active || row === currentRowWithActiveChild}}"
                             data-rowid="{{row.$uniqueId}}">

                            <div class="umb-row-title-bar">

                                <div class=".umb-grid-right">
                                    <div class="umb-row-title">{{row.label || row.name}}</div>

                                    <div class="umb-grid-has-config" ng-if="row.hasConfig && !sortMode">
                                            <localize key="grid_settingsApplied" />
                                    </div>
                                </div>

                               <!-- Row tool -->
                               <div class="umb-tools row-tools" ng-show="(row === active || row === currentRowWithActiveChild) && !sortMode">

                                   <div class="cell-tools-edit row-tool" ng-if="hasSettings">
                                       <i class="icon icon-settings" title="@grid_settings" localize="title" ng-click="editGridItemSettings(row, 'row')"></i>
                                   </div>

                                    <div class="cell-tools-remove row-tool">
                                        <i class="icon-trash" ng-click="togglePrompt(row)" localize="title" title="@delete"></i>
                                        <umb-confirm-action
                                            ng-if="row.deletePrompt"
                                            direction="left"
                                            on-confirm="removeRow(section, $index)"
                                            on-cancel="hidePrompt(row)">
                                        </umb-confirm-action>
                                    </div>

                               </div>


                            </div>

                            <!-- row container -->
                            <div class="{{row.cssClass}} umb-row-inner">

                                <div class="mainTb">
                                    <div class="tb">
                                        <div>

                                            <!-- Areas in row -->
                                            <div class="umb-cell td mainTd"
                                                 ng-repeat="area in row.areas"
                                                 ng-style="{width: area.$percentage + '%'}"
                                                 ng-class="{
                                                    '-has-config': area.hasConfig,
                                                    '-active': area === active,
                                                    '-active-child': area === currentCellWithActiveChild}"
                                                 ng-model="area.controls"
                                                 ng-click="clickCell($index, row.areas, row, $event)"

                                                 bind-click-on="{{area === active}}">

                                                 <!-- Cell -->
                                                 <div class="umb-cell-content"
                                                      ng-class="
                                                        {'-active': area === active,
                                                        '-has-editors': area.controls.length > 0,
                                                        '-collapsed': sortMode}">

                                                      <!-- disable drop overlay -->
                                                      <div class="drop-overlay -disable" ng-if="area.dropNotAllowed">
                                                          <i class="icon-delete drop-icon"></i>
                                                          <localize key="grid_contentNotAllowed" />
                                                      </div>

                                                      <!-- allow drop overlay -->
                                                      <div class="drop-overlay -allow" ng-if="area.dropOnEmpty">
                                                          <i class="icon-download drop-icon"></i>
                                                          <localize key="grid_contentAllowed" />
                                                      </div>

                                                      <div class="umb-grid-has-config" ng-if="area.hasConfig && !sortMode">
                                                         <localize key="grid_settingsApplied" />
                                                      </div>

                                                      <div class="cell-tools" ng-if="(area === active || area === currentCellWithActiveChild) && !sortMode">
                                                         <div class="cell-tool" ng-click="editGridItemSettings(area, 'cell')">
                                                            <i class="icon-settings"></i>
                                                         </div>
                                                      </div>

                                                      <div class="umb-cell-inner" ui-sortable="sortableOptionsCell" umb-grid-hack-scope ng-model="area.controls">

                                                          <!-- Control placeholder -->
                                                          <div class="umb-cell-placeholder" ng-if="area.controls.length === 0" ng-click="openEditorOverlay($event, area, 0, area.$uniqueId);">
                                                               <div class="cell-tools-add -center">
                                                                   <localize ng-if="!sortMode" key="grid_addElement" />
                                                                   <localize ng-if="sortMode" key="grid_dropElement" />
                                                               </div>
                                                          </div>

                                                          <!-- for each control in areas -->
                                                          <div class="umb-control"
                                                              umb-grid-hack-scope
                                                              ng-repeat="control in area.controls"
                                                              ng-click="clickControl($index, area.controls, area, $event)"
                                                              ng-class="{'-active': control === active}"

                                                              bind-click-on="{{control === active}}"
                                                              umb-set-dirty-on-change="{{control.value}}"
                                                              data-itemid="{{control.$uniqueId}}">

                                                              <div class="umb-control-click-overlay" ng-show="control !== active && !sortMode"></div>

                                                              <div class="umb-control-collapsed umb-control-handle" ng-show="sortMode">
                                                                  {{ getTemplateName(control) }}
                                                              </div>

                                                              <div class="umb-control-inner" ng-hide="sortMode">

                                                                  <div class="umb-control-bar umb-control-handle">

                                                                      <div class="umb-control-title" ng-if="control === active">
                                                                          {{ getTemplateName(control) }}
                                                                      </div>

                                                                      <div class="umb-tools" ng-if="control === active">

                                                                          <div class="umb-control-tool" ng-if="control.editor.config.settings">
                                                                              <i class="umb-control-tool-icon icon-settings" ng-click="editGridItemSettings(control, 'control')"></i>
                                                                          </div>

                                                                          <div class="umb-control-tool">
                                                                              <i class="umb-control-tool-icon icon-trash" ng-click="togglePrompt(control)" localize="title" title="@delete"></i>
                                                                              <umb-confirm-action ng-if="control.deletePrompt"
                                                                                                  direction="left"
                                                                                                  on-confirm="removeControl(area, $index)"
                                                                                                  on-cancel="hidePrompt(control)">
                                                                              </umb-confirm-action>
                                                                          </div>

                                                                      </div>

                                                                  </div>

                                                                  <!-- Redering the editor for specific control -->
                                                                  <div ng-if="control && control.$editorPath"
                                                                       ng-include="control.$editorPath"
                                                                       class="umb-cell-{{control.editor.view}}">
                                                                  </div>

                                                              </div>
                                                          </div>

                                                      </div>
                                                      <!-- Controls repeat end -->

                                                      <!-- if area is empty tools -->
                                                      <div class="umb-grid-add-more-content" ng-if="area.controls.length > 0 && !sortMode && (area.maxItems == undefined || area.maxItems == '' || area.maxItems == 0 || area.maxItems > area.controls.length)">
                                                          <div class="cell-tools-add -bar newbtn" ng-click="openEditorOverlay($event, area, 0, area.$uniqueId);"><localize key="grid_addElement" /></div>
                                                      </div>

                                                 </div>

                                            </div>
                                            <!-- cells repeat end -->

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- row container end -->

                        </div>
                        <!-- row repeat -->

                    </div>
                    <!-- row sortable end -->
                    <!-- column tools -->

                    <div class="umb-add-row" ng-if="!sortMode">

                       <a href=""
                          class="iconBox"
                          ng-click="toggleAddRow()"
                          ng-if="!showRowConfigurations">

                          <i class=" icon icon-add" title="@general_add" localize="title"></i>

                       </a>

                    </div>

                    <div class="templates-preview" ng-if="showRowConfigurations">

                        <p ng-hide="section.rows.length > 0"><strong><localize key="grid_addRows" /></strong></p>

                        <div class="preview-rows columns"
                             ng-repeat="layout in  section.$allowedLayouts"
                             ng-show="layout.areas.length > 0"
                             ng-click="addRow(section, layout)">

                            <div class="preview-row">

                                <div class="preview-col" ng-style="{width: percentage(area.grid) + '%'}" ng-repeat="area in layout.areas">

                                    <div class="preview-cell">
                                    </div>

                                </div>

                            </div>

                            <div class="preview-overlay">
                            </div>

                            <small>{{layout.label || layout.name}}</small>

                        </div> <!-- .templates-preview-rows -->

                    </div> <!-- .templates-preview -->
                    <!-- column tools end -->

                </div>
                <!-- column repeat end -->
            </div>
        </div>
    </div>

    <umb-overlay
      ng-if="editorOverlay.show"
      model="editorOverlay"
      view="editorOverlay.view"
      position="target">
    </umb-overlay>

</div>