templates/areas/col/options.html.twig line 1

Open in your IDE?
  1. {% extends 'areas/col/editables.html.twig' %}
  2. {% import 'areas/col/helptexts.html.twig' as helptexts %}
  4. {% block options %}
  5.   {% if editmode %}
  6.     {% set timestamp = 'now'|date('u') %}
  8.     <div class="editmode__options-icon" data-options-id="{{timestamp}}" data-bs-toggle="modal" data-bs-target="#colOptions{{timestamp}}"></div>
  10.     <div class="modal modal-editmode fade" id="colOptions{{timestamp}}" tabindex="-1" data-bs-backdrop="false" aria-labelledby="colOptionsLabel{{timestamp}}" aria-hidden="true" data-options-id="{{timestamp}}">
  11.       <div class="modal-dialog">
  12.         <div class="modal-content">
  13.           <div class="modal-header justify-content-end">
  14.             <div class="x-tool-tool-el x-tool-img x-tool-close" data-bs-dismiss="modal" aria-label="Close"></div>
  15.           </div>
  16.           <div class="modal-body">
  17.             <ul class="nav nav-tabs" id="myTab{{timestamp}}" role="tablist">
  18.               <li class="nav-item" role="presentation">
  19.                 <button class="nav-link active" id="size-tab-{{timestamp}}" data-bs-toggle="tab" data-bs-target="#size{{timestamp}}" type="button" role="tab" aria-controls="size{{timestamp}}" aria-selected="true">{{'ercas_doc_be_col_label_tabSize' | trans}}</button>
  20.               </li>
  21.               <li class="nav-item" role="presentation">
  22.                 <button class="nav-link" id="behave-tab-{{timestamp}}" data-bs-toggle="tab" data-bs-target="#behave{{timestamp}}" type="button" role="tab" aria-controls="behave{{timestamp}}" aria-selected="false">{{'ercas_doc_be_col_label_tabBehaviour' | trans}}</button>
  23.               </li>
  24.               <li class="nav-item" role="presentation">
  25.                 <button class="nav-link" id="background-tab-{{timestamp}}" data-bs-toggle="tab" data-bs-target="#background{{timestamp}}" type="button" role="tab" aria-controls="background{{timestamp}}" aria-selected="false">{{'ercas_doc_be_col_label_tabBackground' | trans}}</button>
  26.               </li>
  27.               {% if colBackgroundSelect.getData() == 'image' or colBackgroundSelect.getData() == 'video' %}
  28.                 <li class="nav-item" role="presentation">
  29.                   <button class="nav-link" id="gradient-tab-{{timestamp}}" data-bs-toggle="tab" data-bs-target="#gradient{{timestamp}}" type="button" role="tab" aria-controls="gradient{{timestamp}}" aria-selected="false">{{'ercas_doc_be_col_label_tabGradient' | trans}}</button>
  30.                 </li>
  31.               {% endif %}
  32.             </ul>
  34.             <!-- Tab panes -->
  35.             <div class="tab-content">
  36.               <div class="tab-pane active" id="size{{timestamp}}" role="tabpanel" aria-labelledby="size-tab-{{timestamp}}" tabindex="0">
  37.                 <fieldset class="x-fieldset x-fieldset-with-title x-fieldset-with-legend x-fieldset-default">
  38.                   <legend class="x-fieldset-header x-fieldset-header-default">
  39.                     <div class="x-component x-fieldset-header-text x-component-default">{{ 'ercas_doc_be_col_label_sizeSM' | trans }}</div>
  40.                   </legend>
  41.                   {{ colSizeSmSelect | raw }}
  42.                 </fieldset>
  43.                 <fieldset class="x-fieldset x-fieldset-with-title x-fieldset-with-legend x-fieldset-default">
  44.                   <legend class="x-fieldset-header x-fieldset-header-default">
  45.                     <div class="x-component x-fieldset-header-text x-component-default">{{ 'ercas_doc_be_col_label_sizeMD' | trans }}</div>
  46.                   </legend>
  47.                   {{ colSizeMdSelect | raw }}
  48.                 </fieldset>
  49.                 <fieldset class="x-fieldset x-fieldset-with-title x-fieldset-with-legend x-fieldset-default">
  50.                   <legend class="x-fieldset-header x-fieldset-header-default">
  51.                     <div class="x-component x-fieldset-header-text x-component-default">{{ 'ercas_doc_be_col_label_sizeLG' | trans }}</div>
  52.                   </legend>
  53.                   {{ colSizeLgSelect | raw }}
  54.                 </fieldset>
  55.                 <fieldset class="x-fieldset x-fieldset-with-title x-fieldset-with-legend x-fieldset-default">
  56.                   <legend class="x-fieldset-header x-fieldset-header-default">
  57.                     <div class="x-component x-fieldset-header-text x-component-default">{{ 'ercas_doc_be_col_label_margin' | trans }}</div>
  58.                   </legend>
  59.                   {{ colMarginSelect | raw }}
  60.                 </fieldset>
  61.               </div>
  62.               <div class="tab-pane" id="behave{{timestamp}}" role="tabpanel" aria-labelledby="behave-tab-{{timestamp}}" tabindex="0">
  63.                 <fieldset class="x-fieldset x-fieldset-with-title x-fieldset-with-legend x-fieldset-default">
  64.                   <legend class="x-fieldset-header x-fieldset-header-default">
  65.                     <div class="x-component x-fieldset-header-text x-component-default">{{ 'ercas_doc_be_col_label_offset' | trans }}</div>
  66.                   </legend>
  67.                   {{ colBehaveOffset | raw }}
  68.                 </fieldset>
  69.                 <fieldset class="x-fieldset x-fieldset-with-title x-fieldset-with-legend x-fieldset-default">
  70.                   <legend class="x-fieldset-header x-fieldset-header-default">
  71.                     <div class="x-component x-fieldset-header-text x-component-default">{{ 'ercas_doc_be_col_label_alignment' | trans }}</div>
  72.                   </legend>
  73.                   {{ colAlignSelect | raw }}
  74.                 </fieldset>
  75.                 <fieldset class="x-fieldset x-fieldset-with-title x-fieldset-with-legend x-fieldset-default">
  76.                   <legend class="x-fieldset-header x-fieldset-header-default">
  77.                     <div class="x-component x-fieldset-header-text x-component-default">{{ 'ercas_doc_be_col_label_createSpacer' | trans }}</div>
  78.                   </legend>
  79.                   {{ colCreateSpacerSelect | raw }}
  80.                 </fieldset>
  82.                 {#<fieldset class="x-fieldset x-fieldset-with-title x-fieldset-with-legend x-fieldset-default">
  83.                   <legend class="x-fieldset-header x-fieldset-header-default">
  84.                     <div class="x-component x-fieldset-header-text x-component-default">{{ 'ercas_doc_be_row_label_border' | trans }}</div>
  85.                   </legend>
  86.                   {{ colBorderSelect | raw }}
  87.                 </fieldset>#}
  89.                  {#<fieldset class="x-fieldset x-fieldset-with-title x-fieldset-with-legend x-fieldset-default">
  90.                     <legend class="x-fieldset-header x-fieldset-header-default">
  91.                       <div class="x-component x-fieldset-header-text x-component-default">{{ 'ercas_doc_be_col_label_InneraddingTopBottom' | trans }}</div>
  92.                     </legend>
  93.                     {{ colInnerTopBottomSelect | raw }}
  94.                   </fieldset>#}
  96.                 {% if colStickyVisible == true %}
  97.                   <fieldset class="x-fieldset x-fieldset-with-title x-fieldset-with-legend x-fieldset-default">
  98.                     <legend class="x-fieldset-header x-fieldset-header-default">
  99.                       <div class="x-component x-fieldset-header-text x-component-default">{{ 'ercas_doc_be_col_label_sticky' | trans }}</div>
  100.                     </legend>
  101.                     {{ colStickySelect | raw }}
  102.                   </fieldset>
  103.                 {% endif %}
  104.                 <fieldset class="x-fieldset x-fieldset-with-title x-fieldset-with-legend x-fieldset-default">
  105.                   <legend class="x-fieldset-header x-fieldset-header-default">
  106.                     <div class="x-component x-fieldset-header-text x-component-default">{{ 'ercas_doc_be_col_label_equal' | trans }}</div>
  107.                   </legend>
  108.                   {{ colNotEqualHightSelect | raw }}
  109.                 </fieldset>
  110.               </div>
  111.               <div class="tab-pane" id="background{{timestamp}}" role="tabpanel" aria-labelledby="background-tab-{{timestamp}}" tabindex="0">
  112.                 <fieldset class="x-fieldset x-fieldset-with-title x-fieldset-with-legend x-fieldset-default">
  113.                   <legend class="x-fieldset-header x-fieldset-header-default">
  114.                     <div class="x-component x-fieldset-header-text x-component-default">{{ 'ercas_doc_be_col_label_backgroundColor' | trans }}</div>
  115.                   </legend>
  116.                   {{ colBackgroundSelect | raw }}
  117.                 </fieldset>
  118.                 {% if colBackgroundSelect.getData() != 'image' and colBackgroundSelect.getData() != 'video' and colBackgroundSelect.getData() != 'none' %}
  119.                   <fieldset class="x-fieldset x-fieldset-with-title x-fieldset-with-legend x-fieldset-default">
  120.                     <legend class="x-fieldset-header x-fieldset-header-default">
  121.                       <div class="x-component x-fieldset-header-text x-component-default">{{ 'ercas_doc_be_col_label_opacity' | trans }}</div>
  122.                     </legend>
  123.                     {{ colOpacity | raw }}
  124.                   </fieldset>
  125.                 {% endif %}
  126.                 {% if colBackgroundSelect.getData() == 'image' or colBackgroundSelect.getData() == 'video' %}
  127.                   {% if colBackgroundSelect.getData() == 'image' %}
  128.                     <fieldset class="x-fieldset x-fieldset-with-title x-fieldset-with-legend x-fieldset-default">
  129.                       <legend class="x-fieldset-header x-fieldset-header-default">
  130.                         <div class="x-component x-fieldset-header-text x-component-default">{{ 'ercas_doc_be_col_label_image' | trans }}</div>
  131.                       </legend>
  132.                       {{ colImage | raw }}
  133.                     </fieldset>
  134.                   {% endif %}
  135.                   {% if colBackgroundSelect.getData() == 'video' %}
  136.                     <fieldset class="x-fieldset x-fieldset-with-title x-fieldset-with-legend x-fieldset-default">
  137.                       <legend class="x-fieldset-header x-fieldset-header-default">
  138.                         <div class="x-component x-fieldset-header-text x-component-default">{{ 'ercas_doc_be_col_label_video' | trans }}</div>
  139.                       </legend>
  140.                       {{ colVideo | raw }}
  141.                     </fieldset>
  142.                   {% endif %}
  143.                 {% endif %}
  144.                 {% if colBackgroundSelect.getData() != 'none' %}
  145.                   <fieldset class="x-fieldset x-fieldset-with-title x-fieldset-with-legend x-fieldset-default">
  146.                     <legend class="x-fieldset-header x-fieldset-header-default">
  147.                       <div class="x-component x-fieldset-header-text x-component-default">{{ 'ercas_doc_be_col_label_height' | trans }}</div>
  148.                     </legend>
  149.                     {{ colHeightSelect | raw }}
  150.                   </fieldset>
  151.                   <fieldset class="x-fieldset x-fieldset-with-title x-fieldset-with-legend x-fieldset-default">
  152.                     <legend class="x-fieldset-header x-fieldset-header-default">
  153.                       <div class="x-component x-fieldset-header-text x-component-default">{{ 'ercas_doc_be_col_label_paddingLeftRight' | trans }}</div>
  154.                     </legend>
  155.                     {{ colPaddingLeftRightSelect | raw }}
  156.                   </fieldset>
  157.                   <fieldset class="x-fieldset x-fieldset-with-title x-fieldset-with-legend x-fieldset-default">
  158.                     <legend class="x-fieldset-header x-fieldset-header-default">
  159.                       <div class="x-component x-fieldset-header-text x-component-default">{{ 'ercas_doc_be_col_label_paddingTopBottom' | trans }}</div>
  160.                     </legend>
  161.                     {{ colPaddingTopBottomSelect | raw }}
  162.                   </fieldset>
  163.                   <fieldset class="x-fieldset x-fieldset-with-title x-fieldset-with-legend x-fieldset-default">
  164.                     <legend class="x-fieldset-header x-fieldset-header-default">
  165.                       <div class="x-component x-fieldset-header-text x-component-default">{{ 'ercas_doc_be_col_label_alignContent' | trans }}</div>
  166.                     </legend>
  167.                     {{ colAlignConetentSelect | raw }}
  168.                   </fieldset>
  169.                 {% endif %}
  170.               </div>
  171.               <div class="tab-pane" id="gradient{{timestamp}}" role="tabpanel" aria-labelledby="gradient-tab-{{timestamp}}" tabindex="0">
  172.                 <fieldset class="x-fieldset x-fieldset-with-title x-fieldset-with-legend x-fieldset-default">
  173.                   <legend class="x-fieldset-header x-fieldset-header-default">
  174.                     <div class="x-component x-fieldset-header-text x-component-default">{{ 'ercas_doc_be_col_label_gradientAlignment' | trans }}</div>
  175.                   </legend>
  176.                   {{ colGradientAlignment | raw }}
  177.                 </fieldset>
  178.                 <fieldset class="x-fieldset x-fieldset-with-title x-fieldset-with-legend x-fieldset-default">
  179.                   <legend class="x-fieldset-header x-fieldset-header-default">
  180.                     <div class="x-component x-fieldset-header-text x-component-default">{{ 'ercas_doc_be_col_label_gradientSize' | trans }}</div>
  181.                   </legend>
  182.                   {{ colGradientSize | raw }}
  183.                 </fieldset>
  184.                 <fieldset class="x-fieldset x-fieldset-with-title x-fieldset-with-legend x-fieldset-default">
  185.                   <legend class="x-fieldset-header x-fieldset-header-default">
  186.                     <div class="x-component x-fieldset-header-text x-component-default">{{ 'ercas_doc_be_col_label_gradientOpacity' | trans }}</div>
  187.                   </legend>
  188.                   {{ colGradientOpacity | raw }}
  189.                 </fieldset>
  190.                 <fieldset class="x-fieldset x-fieldset-with-title x-fieldset-with-legend x-fieldset-default">
  191.                   <legend class="x-fieldset-header x-fieldset-header-default">
  192.                     <div class="x-component x-fieldset-header-text x-component-default">{{ 'ercas_doc_be_col_label_gradientColor' | trans }}</div>
  193.                   </legend>
  194.                   {{ colGradientColorSelect | raw }}
  195.                 </fieldset>
  196.               </div>
  197.             </div>
  198.           </div>
  199.           <div class="modal-footer">
  200.             {% include 'areas/includes/areas.buttons.html.twig' %}
  201.           </div>
  202.         </div>
  203.       </div>
  204.     </div>
  205.   {% endif %}
  207.   {% block view %}{% endblock %}
  208. {% endblock %}