From d919e1aa247b7530b312b6310e09b1ed8eda0628 Mon Sep 17 00:00:00 2001 From: LeandroRoberto Date: Wed, 21 Oct 2015 20:00:29 -0200 Subject: [PATCH] Improvements in interface editing of Dispositivo --- compilacao/views.py | 6 +- static/js/compilacao.js | 191 +++++++++++++++++++++++ static/styles/compilacao.scss | 223 ++++++++++++++++++--------- static/styles/compilacao_tinymce.css | 10 ++ templates/compilacao/edit.html | 190 ++--------------------- templates/compilacao/edit_bloco.html | 112 +++++++------- 6 files changed, 414 insertions(+), 318 deletions(-) create mode 100644 static/js/compilacao.js create mode 100644 static/styles/compilacao_tinymce.css diff --git a/compilacao/views.py b/compilacao/views.py index b5bbc090f..49c1423a7 100644 --- a/compilacao/views.py +++ b/compilacao/views.py @@ -389,13 +389,13 @@ class DispositivoEditView(CompilacaoEditView, FormMixin): else: d_base = Dispositivo.objects.get(pk=self.pk_add) - result = [{'tipo_insert': 'Inserir Depois', + result = [{'tipo_insert': '↷  Inserir Depois', 'action': 'add_next', 'itens': []}, - {'tipo_insert': 'TODO: Inserir Dentro', + {'tipo_insert': '⇲  TODO: Inserir Dentro', 'action': 'add_in', 'itens': []}, - {'tipo_insert': 'TODO: Inserir Antes', + {'tipo_insert': '↶  TODO: Inserir Antes', 'action': 'add_prior', 'itens': []} ] diff --git a/static/js/compilacao.js b/static/js/compilacao.js new file mode 100644 index 000000000..1503fbaf1 --- /dev/null +++ b/static/js/compilacao.js @@ -0,0 +1,191 @@ + +$(document).ready(function() { + +var flag_add_next = false +var flag_add_next_pk = 0 +var flag_add_next_pai = 0 + +var withTinymce = false + +var onSubmitEditForm = function(event) { + + var texto = '' + var editorTiny = tinymce.get('editdi_texto') + + if (editorTiny != null) + texto = editorTiny.getContent(); + else + texto = $('#editdi_texto').val(); + + var formData = { + 'csrfmiddlewaretoken' : $('input[name=csrfmiddlewaretoken]').val(), + 'texto' : texto + }; + var url = $('.editdi_form form').attr( "action_ajax" ); + $("#message_block").css("display", "block"); + $.post(url,formData) + .done(function(data) { + $('.editselected').html(data); + clearEditSelected(); + reloadFunctionClicks(); + }).always(function() { + $("#message_block").css("display", "none"); + }); + event.preventDefault(); +} + +var clickEditDispositivo = function(event) { + var _pk = event.currentTarget.getAttribute('pk'); + if ($('#de'+_pk).hasClass("editselected")) { + clearEditSelected(); + return; + } + clearEditSelected(); + clickUpdateDispositivo(event) +} + +var clickUpdateDispositivo = function(event, __pk, __action, addeditselected) { + + var _pk = __pk; + var _action = __action; + var _variacao = ''; + var _tipo_pk = ''; + + if (event != null) { + _pk = event.currentTarget.getAttribute('pk'); + _action = $(this).attr('action'); + _variacao = $(this).attr('variacao'); + _tipo_pk = $(this).attr('tipo_pk'); + } + + if (flag_add_next_pk == 0) + flag_add_next_pk = _pk + + var url = '' + if (_action == '') + return + else if ( _action == null || _action.startsWith('refresh')) { + + if (_action != null && _action.endsWith('tinymce')) + withTinymce = true; + else if (_action != null && _action.endsWith('textarea')) + withTinymce = false; + + url = _pk+'/refresh?pkadd='+flag_add_next_pk+url; + + } + else { + url = _pk+'/actions?action='+_action; + url += '&tipo_pk='+_tipo_pk; + url += '&variacao='+_variacao; + if (addeditselected == null || addeditselected) { + $("#message_block").css("display", "block"); + } + } + + $.get(url).done(function( data ) { + + if ( _action == null || _action.startsWith('refresh')) { + + if (flag_add_next) { + + if (addeditselected) + clearEditSelected(); + + $( '#de' + _pk ).html( data); + flag_add_next = false + } + else { + clearEditSelected(); + $( '#de' + _pk ).prepend( data ); + } + reloadFunctionClicks(); + + if ( withTinymce ) { + initTinymce() + } + else { + $('.editdi_form form').submit(onSubmitEditForm); + } + + if (addeditselected == null || addeditselected) { + $('#de'+flag_add_next_pk).addClass('editselected'); + $('html, body').animate({ + scrollTop: $('#de' + flag_add_next_pk ).offset().top - window.innerHeight / 10 + }, 300); + flag_add_next_pk = 0; + } + } + + else if (_action == 'add_next') { + + clearEditSelected(); + + flag_add_next_pk = data.pk; + flag_add_next_pai = data.pai; + + if (flag_add_next_pk != null) + for (var pai = 0; pai < flag_add_next_pai.length; pai++) + if (flag_add_next_pai[pai] != -1) { + flag_add_next = true; + flag_add_next_pk = data.pk; + clickUpdateDispositivo(null, flag_add_next_pai[pai], 'refresh', pai == 0); + } + else { + href = location.href.split('#')[0] + location.href = href+'#'+flag_add_next_pk + location.reload(true) + } + else { + alert('Erro na inserção!'); + flag_add_next_pk = 0; + flag_add_next = false; + } + } + }).always(function() { + $("#message_block").css("display", "none"); + }); +} + + +function clearEditSelected() { + tinymce.remove(); + $('.editselected').removeClass('editselected'); + $('.editdi_form').remove(); + $('.editselected .label_pai, .edit .label_pai').remove(); + $('.editselected .actions_head, .edit .actions_head').remove(); + $('.editselected .actions_footer, .edit .actions_footer').remove(); +} + +function reloadFunctionClicks() { + $('.dispositivo .edit .di').off(); + $('.actions .btn-action').off(); + $('.actions_head .btn-action').off(); + $('.dispositivo .edit .di').on('click', clickEditDispositivo); + $('.actions .btn-action').on('click', clickEditDispositivo); + $('.actions_head .btn-action').on('click', clickUpdateDispositivo); +} + +function initTinymce() { + + tinymce.init({ + mode : "textareas", + force_br_newlines : false, + force_p_newlines : false, + forced_root_block : '', + plugins: ["table save code"], + menubar: "edit format table tools", + toolbar: "save | undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent", + tools: "inserttable", + save_onsavecallback: onSubmitEditForm, + border_css: "/static/styles/compilacao_tinymce.css", + content_css: "/static/styles/compilacao_tinymce.css" + }); +} + + +reloadFunctionClicks(); +$("#message_block").css("display", "none"); + +}); + diff --git a/static/styles/compilacao.scss b/static/styles/compilacao.scss index a8e7ade94..9c292481f 100644 --- a/static/styles/compilacao.scss +++ b/static/styles/compilacao.scss @@ -241,12 +241,12 @@ color: #fff; position: absolute; padding: 0 0.2em; - left: -2.1em; + left: -2.2em; opacity: 0; transition: all 0.4s ease-in-out; } -.compilacaoedit .edit > .actions a.btn-action { +.compilacaoedit .edit > .actions a.btn-inserts { background: #3498db; background-image: -webkit-linear-gradient(top, #3498db, #2980b9); background-image: -moz-linear-gradient(top, #3498db, #2980b9); @@ -256,14 +256,13 @@ -webkit-border-radius: 7; -moz-border-radius: 7; border-radius: 7px; - color: #ffffff !important; - font-size: 18px; + color: #ffffff !important; font-weight: bold; padding: 2px 6px 2px 7px; text-decoration: none; } -.compilacaoedit .edit > .actions a.btn-action:hover { +.compilacaoedit .edit > .actions a.btn-inserts:hover { background: #3cb0fd; background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db); background-image: -moz-linear-gradient(top, #3cb0fd, #3498db); @@ -310,9 +309,8 @@ } -.compilacaoedit .articulacao{ - - margin-left: -0.8em; +.compilacaoedit .articulacao{ + margin-left: -0.8em; margin-top: 2em; } @@ -329,16 +327,9 @@ display: none; } .compilacaoedit .editselected > .editdi { - padding: 1em; -} - -.compilacaoedit .editdi_form { - display: block; - clear: both; - padding: 1em; + padding-top: 1em; } - .compilacaoedit .editselected > .label_pai { position: absolute; color: #999; @@ -350,9 +341,8 @@ } .compilacaoedit .editselected { - border: 2.1em solid #eee; - padding: 0 0 1em 0; - padding-bottom: 0em; + border: 2.2em solid #eee; + padding: 1em; margin: 1em -2em 1em -2.8em; z-index: 1; background-color: #fff !important; @@ -364,61 +354,56 @@ } -.compilacaoedit .actions_head { +.compilacaoedit .actions_inserts { color: #fff; - position: relative; - opacity: 0; - transition: all 0.4s ease-in-out; - border-top: 1px solid #2980b9; - z-index: 9; - margin: 0em; + position: relative; + transition: all 0.4s ease-in-out; + margin: 0em; } - -.compilacaoedit .actions_head ul { + + +.compilacaoedit .actions_inserts ul { margin-left: 0; } -.compilacaoedit .actions_head li { +.compilacaoedit .actions_inserts li { font-weight: normal !important; display: inline-block; position: relative; - white-space:nowrap; - max-width:something; + white-space:nowrap; } -.compilacaoedit .actions_head > li.left { +.compilacaoedit .actions_inserts > li.left { border-right: 1px solid white; } -.compilacaoedit .actions_head > li.right { - width: 3em; +.compilacaoedit .actions_inserts > li.right { + min-width: 2em; text-align: center; } - -.compilacaoedit .actions_head > li.right:nth-child(3n + 1) { - clear:right; -} - - - -.compilacaoedit .actions_head li ul { + + +.compilacaoedit .actions_inserts li ul { display: none; position:absolute; top: auto; } -.compilacaoedit .actions_head li:hover ul{ +.compilacaoedit .actions_inserts li:hover ul{ display: block; } -.compilacaoedit .actions_head li:hover ul li{ +.compilacaoedit .actions_inserts li:hover ul li{ display: block; background: #3498db; background-image: none; } - -.compilacaoedit .actions_head a.btn-action { +.compilacaoedit .actions_inserts { + z-index: 99; +} + +.compilacaoedit a.btn-inserts { background: #3498db; background-image: -webkit-linear-gradient(top, #3498db, #2980b9); background-image: -moz-linear-gradient(top, #3498db, #2980b9); @@ -430,12 +415,15 @@ border-radius: 0px; color: #ffffff !important; font-size: 0.8em; - padding: 1px 6px 2px 7px; + padding: 0 6px 0 7px; text-decoration: none; - display: block; + display: block; + line-height: 1.7em; + min-height: 1.7em; + margin: 0; } -.compilacaoedit .actions_head a.btn-action:hover { +.compilacaoedit a.btn-inserts:hover { background: #3cb0fd; background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db); background-image: -moz-linear-gradient(top, #3cb0fd, #3498db); @@ -443,22 +431,114 @@ background-image: -o-linear-gradient(top, #3cb0fd, #3498db); background-image: linear-gradient(to bottom, #3cb0fd, #3498db); text-decoration: none; -} +} -.compilacaoedit .actions_head > li > a.btn-action { - font-weight: bold; +.compilacaoedit .actions_inserts > li >a.btn-inserts { + line-height: 2.2em; + min-height: 2.2em; font-size: 1em; - + padding: 0 1em; + } + + + + + +.compilacaoedit .editdi_form input[type=submit] { + margin: 0; + padding: 0.35em 2em; +} + +.compilacaoedit .editdi_form a.alert { + background-image: none; + background-color: #A70808 !important; + color: #c99 !important; + font-weight: normal !important; + margin: 0; + padding: 0.35em 2em; } -.compilacaoedit .actions_head { - z-index: 99; - opacity: 0.5; +.compilacaoedit .editdi_form a.alert:hover { + background-image: none; + background-color: #c70808 !important; + color: #ecc !important; } -.compilacaoedit .actions_head:hover { - opacity: 1; -} + + + +.compilacaoedit .actions_head { + margin: -2.2em -2.2em 0 0; + position: absolute; + top: 0; + right: 0; + list-style: none; + display: table; + z-index: 98; +} + +.compilacaoedit .actions_head > li{ + float: right; +} + + +.compilacaoedit a.btn-action { + display: table-cell; + font-size: 1em; + background-image: none; + background-color: transparent !important; + color: #615151 !important; + vertical-align: middle; + line-height: 2.2em; + min-width: 2.2em; + text-align: center; + text-shadow: 0 0 10px rgba(0,0,0,0.3); +} +.compilacaoedit a.btn-action:hover { + background-color: rgba(0,0,0,0.1) !important; + text-shadow: 0 0 5px #777; + color: #fff !important; +} + +.compilacaoedit .actions_right { + margin: 0 -2.2em 0 0; + position: absolute; + top: 0; + right: 0; + list-style: none; + display: table; + z-index: 9; +} + + + + + + + + + + + + + + + + + + + +.compilacaoedit .editdi_form { + display: block; + clear: both; + margin: -1em; +} + +.compilacaoedit .editdi_form textarea { + margin: 0; + resize: vertical; + min-height: 12.5em; +} .compilacaoedit .actions_insert { opacity: 1; @@ -471,21 +551,15 @@ } .compilacaoedit .actions_insert > li.right{ - opacity: 1; - width: 3em; - text-align: center; -} -.compilacaoedit .actions_insert > li.right:nth-child(3n + 1) { - clear:right; -} - - + opacity: 1; + text-align: center; +} .compilacaoedit .actions_insert > li.left:nth-child(1), .compilacaoedit .actions_insert > li.left:nth-child(2) { opacity: 1; display: block; - min-width: 30%; - max-width: 30%; + min-width: 33%; + max-width: 33%; } .compilacaoedit .actions_insert li.left:nth-child(1) ul, .compilacaoedit .actions_insert li.left:nth-child(2) ul { @@ -518,18 +592,15 @@ display: block; height: auto !important; } - + .clear { clear:both; - height: 0; - width: 0; } -#tinymce .mceContentBody p { - font-family: "Open Sans" "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif !important; +.mce-container { + border-color: #ccc !important; } - @media only screen and (max-width: 40.0625em) { .compilacao .fixed{ diff --git a/static/styles/compilacao_tinymce.css b/static/styles/compilacao_tinymce.css new file mode 100644 index 000000000..cf39b89ad --- /dev/null +++ b/static/styles/compilacao_tinymce.css @@ -0,0 +1,10 @@ + + +.mce-content-body { + font-family: "Open Sans" "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; + font-style: normal; + font-weight: normal; + line-height: 1.5; + font-size: 1em; + color: #444444; +} \ No newline at end of file diff --git a/templates/compilacao/edit.html b/templates/compilacao/edit.html index 07fbcfbdf..4a366bba5 100644 --- a/templates/compilacao/edit.html +++ b/templates/compilacao/edit.html @@ -1,196 +1,24 @@ {% extends "base.html" %} {% load i18n %} {% load compilacao_filters %} +{% load staticfiles %} +{% load sass_tags %} + +{% block head_content %}{{block.super}} + +{% endblock %} {% block title%} -

Edição: {{ view.get_norma }} - Texto Multivigente

+

Edição: {{ view.get_norma }} - {% trans 'Texto Multivigente' %}

{% endblock %} {% block base_content %} - -
Aguarde... Atualizando informações!!!
{% include 'compilacao/edit_bloco.html'%}
+ {% endblock base_content %} diff --git a/templates/compilacao/edit_bloco.html b/templates/compilacao/edit_bloco.html index 751ecf71d..5a14126c5 100644 --- a/templates/compilacao/edit_bloco.html +++ b/templates/compilacao/edit_bloco.html @@ -13,59 +13,70 @@
{% endif%} + {% if view|render_actions_head:dispositivo %} - + + +
+
+ +
Ordem: {{dispositivo.ordem}}, nivel: {{dispositivo.nivel}}
+
Número: {{dispositivo.get_numero_completo}}
+
+ +
+
Em Edição: {% nomenclatura_heranca dispositivo %}
+
+
{% endif%} {% if view.pk_view == 0 and view.pk_add == 0 or view.pk_add != view.pk_view %} -
- E + E
-
{% spaceless %} @@ -88,22 +99,7 @@ {%endwith%} {% endif%}
- - - {% else%} - - {% if not dispositivo.tipo_dispositivo.dispositivo_de_articulacao %} -
-
- {% csrf_token %} - -
- -
-
-
- {%endif%} - + {% endif%} {% set_nivel_old view dispositivo.nivel %}