This site uses cookies. By continuing to browse the site, you agree to our use of cookies. Find out more about cookies.
Skip to main content
Metadecidim's official logo
  • English Triar la llengua Elegir el idioma Choose language
    • Català
    • Castellano
Sign Up Sign In
  • Home
  • Processes
  • Assemblies
  • Initiatives
  • Consultations
  • Conferences
  • Help

Propose new functionalities for Decidim software

#DecidimRoadmap Designing Decidim together

Phase 1 of 1
Open 2019-01-01 - 2030-12-31
Process phases Submit a proposal
  • The process
  • Debates
  • Propose new features
  • News
chevron-left Back to list

Improve Diff visualization for amendments

Avatar: Ivan Vergés Ivan Vergés verified-badge
28/05/2021 12:09  
Accepted / In progress

Is your feature request related to a problem? Please describe.
The current visualization of amendments uses a page that shows class diff tool that only works well for text (code like) comparisons. Comparisons between HTML texts are pretty much useless and very confusing. Also the tools for this job is very buggy (it is a customization in the Decidim code that does not work very well).

Describe the solution you'd like

As proposals are now using HTML, and there are not really good tools to compare differences in HTML (I challenge anyone to find them) I propose to modify this feature by giving the user 3 types of views to compare:

  1. Text diff view: This strips all the HTML from the original proposal and the amendment and places automatic line endings (\n char) after 80/100 chars (similar and, in fact using, as mailers do when creating a text version of a message). This creates a good input for the diff tools and provides useful marks on the relevant differences in the text, without other decorations.
  2. Source diff view: For the advanced user, this compares the source code (usually HTML but also without creating artificial new lines), similar as what currently exists. Still improved a little bit because now the differences are marked in stronger colors.
  3. Preview: This view shows the amendment as if it was a proposal, so the user can see how it looks. Currently there's no way to see an amendment as if it was accepted.


The 3 views will be clearly available as tabs, with big buttons. unified and side-by-side views will be applicable as well as a submenu.

For an example of the implementation take a look at:

https://greensconnect.ca/processes/Policy2021/f/223/proposals/2241

Describe alternatives you've considered
I've tried first to improve the HTML diff tools that is customized in Decidim. but it is really complicated to do it properly as HTMl can be very unpredictable. It is a much bigger work and i've been unable to find any opensource library capable of doing it.

Additional context

see attachment

Does this issue could impact on users private data?
Ex. issues related with user's sign up/sign in process, verifications, invitations, sensitive data like email, IP addresses, etc.

Funded by
Platoniq & The Green Party of Canda

This proposal has been accepted and is under development

List of Endorsements

Avatar: Platoniq Platoniq verified-badge
Avatar: Decidim Product Decidim Product verified-badge
Avatar: John Willson John Willson
Avatar: Virgile Deville Virgile Deville
Avatar: Nil Homedes Nil Homedes verified-badge
and 2 more people (see more) (see less)
Endorsements count5
Improve Diff visualization for amendments Comments 2

Reference: MDC-PROP-2021-05-16386
Version number 2 (of 2) see other versions
Check fingerprint

Fingerprint

The piece of text below is a shortened, hashed representation of this content. It's useful to ensure the content hasn't been tampered with, as a single modification would result in a totally different value.

Value: 29165f6aed219678afc7f3a653b9030f740cf6881a47a97b77a4a1bfeb0161ef

Source: {"body":{"en":"<p><strong>Is your feature request related to a problem? Please describe.</strong><br>The current visualization of amendments uses a page that shows class diff tool that only works well for text (code like) comparisons. Comparisons between HTML texts are pretty much useless and very confusing. Also the tools for this job is very buggy (it is a customization in the Decidim code that does not work very well).</p><p><strong>Describe the solution you'd like</strong></p><p>As proposals are now using HTML, and there are not really good tools to compare differences in HTML (I challenge anyone to find them) I propose to modify this feature by giving the user 3 types of views to compare:</p><ol><li><strong>Text diff view</strong>: This strips all the HTML from the original proposal and the amendment and places automatic line endings (\\n char) after 80/100 chars (similar and, in fact using, as mailers do when creating a text version of a message). This creates a good input for the diff tools and provides useful marks on the relevant differences in the text, without other decorations.</li><li><strong>Source diff view</strong>: For the advanced user, this compares the source code (usually HTML but also without creating artificial new lines), similar as what currently exists. Still improved a little bit because now the differences are marked in stronger colors.</li><li><strong>Preview</strong>: This view shows the amendment as if it was a proposal, so the user can see how it looks. Currently there's no way to see an amendment as if it was accepted.</li></ol><p><br></p><p>The 3 views will be clearly available as tabs, with big buttons. unified and side-by-side views will be applicable as well as a submenu.</p><p>For an example of the implementation take a look at:</p><p>https://greensconnect.ca/processes/Policy2021/f/223/proposals/2241</p><p><strong>Describe alternatives you've considered</strong><br>I've tried first to improve the HTML diff tools that is customized in Decidim. but it is really complicated to do it properly as HTMl can be very unpredictable. It is a much bigger work and i've been unable to find any opensource library capable of doing it.</p><p><strong>Additional context</strong><a href=\"https://imgur.com/S5sEGvS\" target=\"_blank\"><br></a></p><p>see attachment</p><p><strong>Does this issue could impact on users private data?</strong><br>Ex. issues related with user's sign up/sign in process, verifications, invitations, sensitive data like email, IP addresses, etc.</p><p><strong>Funded by</strong><br>Platoniq &amp; The Green Party of Canda</p>"},"title":{"en":"Improve Diff visualization for amendments"}}

This fingerprint is calculated using a SHA256 hashing algorithm. In order to replicate it yourself, you can use an MD5 calculator online and copy-paste the source data.

Share:

link-intact Share link

Share link:

Please paste this code in your page:

<script src="https://meta.decidim.org/processes/roadmap/f/122/proposals/16386/embed.js"></script>
<noscript><iframe src="https://meta.decidim.org/processes/roadmap/f/122/proposals/16386/embed.html" frameborder="0" scrolling="vertical"></iframe></noscript>

Related images

Screenshot_2021-05-28 National Seniors Strategy - Policy Proposals - GPC Policy Development Process - Greens Connect.png

Report inappropriate content

Is this content inappropriate?

Reason

2 comments

Order by:
  • Older
    • Best rated
    • Recent
    • Older
    • Most discussed
Avatar: John Willson John Willson
30/05/2021 05:48
  • Get link Get link
In favor  

Excellent work, Ivan, and a big improvement over what we had before.

We're happy to support this being integrated into the base software.

Avatar: Decidim Product Decidim Product verified-badge
11/06/2021 10:43
  • Get link Get link

@microstudi to improve the consistency of the layout, we suggest these small style changes, take a look: https://imgur.com/lA97HHs

Add your comment

Sign in with your account or sign up to add your comment.

Loading comments ...

  • Terms and conditions of use
  • About the community
  • Download Open Data files
  • Metadecidim at Twitter Twitter
  • Metadecidim at Instagram Instagram
  • Metadecidim at YouTube YouTube
  • Metadecidim at GitHub GitHub
Creative Commons License Website made with free software.
Decidim Logo

Confirm

OK Cancel

Please sign in

decidim Sign in with Decidim Barcelona
Or

Sign up

Forgot your password?