Add alternancia de editores com frontEnd bootstrap

sapl/compilacao/views.py

@@ -2894,13 +2894,15 @@ class TextNotificacoesView(CompMixin, ListView, FormView):
                  _('Dispositivo está substituindo um Dispositivo de outro '
                    'Texto Articulado.'))
 
-            padd(r, type_notificacao, 'compilacao:dispositivo_edit_alteracao',
+            padd(r, type_notificacao,
+                 'sapl.compilacao:dispositivo_edit_alteracao',
                  r.dispositivo_substituido and
                  r.dispositivo_substituido.dispositivo_subsequente != r,
                  _('Dispositivo está substituindo um Dispositivo que não '
                    'possui este como seu Dispositivo Subsequente.'))
 
-            padd(r, type_notificacao, 'compilacao:dispositivo_edit_alteracao',
+            padd(r, type_notificacao,
+                 'sapl.compilacao:dispositivo_edit_alteracao',
                  r.dispositivo_subsequente and
                  r.dispositivo_subsequente.dispositivo_substituido != r,
                  _('Dispositivo foi substituído por outro que não '

sapl/static/js/compilacao_edit.js

@@ -15,7 +15,17 @@ function DispositivoEdit() {
         return instance;
     };
 
-    instance.bindActionClick = function(event) {
+    instance.bindActionsEditorType = function(event) {
+        editortype = this.getAttribute('editortype');
+        SetCookie("editortype", editortype, 30);
+        var dpt = $(this).closest('.dpt');
+
+        var pk = dpt.attr('pk');
+        instance.clearEditSelected();
+        instance.triggerBtnDptEdit(pk);
+    }
+
+    instance.bindActionsClick = function(event) {
         var pk = this.getAttribute('pk');
 
         var form_data = {
@@ -68,7 +78,6 @@ function DispositivoEdit() {
         instance.clearEditSelected();
         instance.loadActionsEdit(dpt);
 
-
         dpt.on('get_form_base', function () {
             var _this = $(this);
             _this.addClass('dpt-selected');
@@ -83,7 +92,7 @@ function DispositivoEdit() {
             var btns_excluir = _this.find('.btns-excluir');
             _this.find('.dpt-actions-bottom').last().append(btns_excluir);
 
-            btns_excluir.find('.btn-excluir').on('click', instance.bindActionClick);
+            btns_excluir.find('.btn-excluir').on('click', instance.bindActionsClick);
         });
         instance.loadForm(dpt, 'get_form_base');
     }
@@ -93,23 +102,27 @@ function DispositivoEdit() {
         var url = pk+'/refresh?action=get_actions';
         $.get(url).done(function(data) {
             dpt.find('.dpt-actions').first().html(data);
-            dpt.find('.btn-inserts').on('click', instance.bindActionClick);
+            dpt.find('.btn-inserts').on('click', instance.bindActionsClick);
+            dpt.find('.btn-editor-type').on('click', instance.bindActionsEditorType);
+
+            if (editortype == 'construct')
+                dpt.find('.btn-group-inserts').first().addClass('open');
+
         });
     }
-
     instance.loadForm = function(dpt, trigger) {
         var pk = dpt.attr('pk');
-        if (editortype == "construct")
-            return;
 
         var dpt_form = dpt.children().filter('.dpt-form');
         if (dpt_form.length == 1) {
             var url = pk+'/refresh?action='+trigger;
             $.get(url).done(function(data) {
-                dpt_form.html(data);
-                dpt_form.find('form').submit(instance.onSubmitEditFormBase);
-                if (editortype == 'tinymce' ) {
-                    initTinymce();
+                if (editortype != "construct") {
+                    dpt_form.html(data);
+                    dpt_form.find('form').submit(instance.onSubmitEditFormBase);
+                    if (editortype == 'tinymce' ) {
+                        initTinymce();
+                    }
                 }
                 dpt.trigger(trigger);
             }).always(function() {
@@ -230,6 +243,7 @@ function DispositivoEdit() {
             var dpt = $('#id'+pk).closest('.dpt');
             dpt = $('#'+dpt.replaceWith(data).attr('id'));
             instance.onClicks(dpt);
+            instance.reloadFunctionsDraggables();
 
             if (trigger_edit_pk > 0)
                 instance.triggerBtnDptEdit(trigger_edit_pk)
@@ -320,7 +334,7 @@ function DispositivoEdit() {
             editortype = "textarea"
             SetCookie("editortype", editortype, 30)
         }
-        editortype = "textarea";
+        //editortype = "textarea";
         instance.offClicks();
         instance.onClicks();
         instance.reloadFunctionsDraggables();

sapl/static/styles/app.scss

@@ -145,11 +145,6 @@ fieldset {
     }
   }
 }
-.btn-primary, .btn-danger{
-  font-size: 16px;
-  height: 40px !important;
-  display: inline-block;
-}
 
 /* INDEX */
 #conteudo {

sapl/static/styles/compilacao.scss

@@ -529,12 +529,20 @@ a:link:after, a:visited:after {
       right: 0px;
       z-index: 3;
       opacity: 0;
+
+      .activate {
+        display:none;
+      }
+      .deactivate {
+        display:inline;
+      }
     }
     & > .dpt-actions, & > .dpt-actions-bottom {
       display: none;
     }
     & > .dpt-text {
       cursor: pointer;
+      min-height: 31px;
       &:hover {
         color: $color_buttons;
         transition: color 0.3s ease;
@@ -550,6 +558,7 @@ a:link:after, a:visited:after {
     }
 
     &:hover {
+      background-color: rgba(0, 0, 0, 0.01);
       & > .dpt-actions-fixed {
         opacity: 1;
       }
@@ -610,10 +619,11 @@ a:link:after, a:visited:after {
     }
     .dpt-selected {
       &.dpt {
-        margin: -0.2em -0.5em;
+        margin: 0em -0.5em;
       }
     }
   } /* fim dpt-alts */
+
   .dpt-selected {
     &.dpt {
       width: auto !important;
@@ -699,21 +709,34 @@ a:link:after, a:visited:after {
       .dpt {
         box-shadow: 0 0 0;
       }
-
-
     }
     & > .dpt-actions-fixed {
-      display: none;
-
+      opacity: 1;
+      margin-top: -1em;
+      margin-right: -0.5em;
+      .activate {
+        display:inline;
+      }
+      .deactivate {
+        display:none;
+      }
+      .btn-dpt-edit {
+        background-color: #02baf2;
+        color: white;
+        border: 0;
+        font-weight: bold;
+      }
     }
 
     .dropdown-menu {
-      right: auto !important;
-      left: 0;
-      padding: 2px 0;
-      & > .top.arrow {
-        right: 88%;
-        left: auto;
+      &.dropdown-menu-left {
+        right: auto !important;
+        left: 0;
+        padding: 2px 0;
+        & > .top.arrow {
+          right: 88%;
+          left: auto;
+        }
       }
       li {
         a {
@@ -723,11 +746,16 @@ a:link:after, a:visited:after {
         }
       }
     }
+    .btn-group {
+      .radius-right {
+        border-bottom-right-radius: 4px !important;
+        border-top-right-radius: 4px !important;
+      }
+
+    }
 
     &:hover {
-      .dpt-actions-fixed { 
-        margin-top: 1em;
-        margin-right: 1em;
+      .dpt-actions-fixed {
       }
     }
 

sapl/templates/compilacao/ajax_actions_dinamic_edit.html

@@ -1,19 +1,19 @@
 {% load i18n %}
 
-<div class="btn-group" role="group">
+<div class="btn-group dropdown" role="group">
   {% if object.dispositivo_subsequente == None %}
     {% for inserts in allowed_inserts %}
       {% if inserts.itens %}
 
-        <div class="btn-group" role="group">
+        <div class="btn-group btn-group-inserts" role="group">
           <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
             {{inserts.icone|safe}}<span>{{inserts.tipo_insert}}</span>
           </button>
 
-          <ul class="dropdown-menu">
+          <ul class="dropdown-menu dropdown-menu-left">
             <div class="arrow top"></div>
             {% for item in inserts.itens %}
-              <li><a class="btn-inserts btn-action" action="{{inserts.action}}" pk="{{item.dispositivo_base}}" variacao="{{item.variacao}}" tipo_pk="{{item.tipo_pk}}">{{item.provavel|safe}}</a></li>
+              <li><a class="btn-inserts btn-action " action="{{inserts.action}}" pk="{{item.dispositivo_base}}" variacao="{{item.variacao}}" tipo_pk="{{item.tipo_pk}}">{{item.provavel|safe}}</a></li>
             {% endfor %}
           </ul>
         </div>
@@ -21,3 +21,22 @@
     {% endfor %}
   {%endif%}
 </div>
+
+<div class="btn-toolbar pull-right" role="toolbar" >
+
+  <div class="btn-group " role="group">
+    <button type="button" class="btn btn-primary btn-sm radius-right" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+      <i class="fa fa-edit fa-lg"></i>
+    </button>
+
+    <ul class="dropdown-menu">
+      <div class="arrow top"></div>
+
+        <li><a class="btn-editor-type" editortype="construct">Construtor</a></li>
+        <li><a class="btn-editor-type" editortype="textarea">Editor Simples</a></li>
+        <li><a class="btn-editor-type" editortype="tinymce">Editor tinymce</a></li>
+        <li><a class="btn-editor-avancado" href="{% url 'sapl.compilacao:dispositivo_edit' object.ta_id object.pk %}" >Editor Avançado</a></li>
+
+    </ul>
+  </div>
+</div>

sapl/templates/compilacao/text_edit_bloco.html

@@ -5,11 +5,11 @@
 {% dispositivotree dispositivos_list %}
     <div class="dpt" id="id{{node.dpt.id}}" pk="{{node.dpt.pk}}" ordem="{{node.dpt.ordem}}" name="{{node.dpt.pk}}" title="{{node.dpt.pk}} - {{node.dpt.ordem}}">
       <div class="dpt-actions-fixed btn-group">
+        <a class="btn-action btn-dpt-edit btn btn-default btn-sm" pk="{{node.dpt.pk}}"><span class="deactivate">{% trans 'Editar'%}</span><span class="activate">{% trans 'Em Edição'%}</span> {{ node.td.nome }} {{ node.dpt.rotulo }}</a>
         {% if not node.dpt.rotulo and not node.dpt.texto and node.td.dispositivo_de_articulacao%}
-            <a class="btn-action btn-dpt-edit btn btn-primary btn-sm" pk="{{node.dpt.pk}}">{% trans 'Editar'%} {{ node.td.nome }} {{ node.dpt.rotulo }}</a>
         {% endif %}
       </div>
-      <div class="dpt-actions btn-group"></div>
+      <div class="dpt-actions"></div>
       <div class="dpt-text {{node.td.class_css}} {%if node.dpt.fim_vigencia %}desativado{%endif%} {%if node.dpt.rotulo or node.dpt.texto or not node.td.dispositivo_de_articulacao %}btn-dpt-edit{%endif%}" title="{% trans 'Editar' %} {{node.td.nome}}">
 
           {{ node.td.rotulo_prefixo_html|safe }}