[PLUGINS][NoteTypeFeedFilter] Polish feed actions HTML, adding proper anchor titles and better user feedback when a filter in applied

[COMPONENTS][Collection] Notes feed template HTML polish to accomodate changes needed for NoteTypeFeedFilter
2022-01-07 21:10:55 +00:00
parent cb1dc4c10f
commit 1438433859
8 changed files with 158 additions and 74 deletions
--- a/components/Collection/templates/collection/notes.html.twig
+++ b/components/Collection/templates/collection/notes.html.twig
@@ -9,16 +9,25 @@
 {% endblock stylesheets %}

 {% block body %}
-<header class="feed-header">
-    {% if page_title is defined %}
-        <h1>{{ page_title | trans }}</h1>
-    {% endif %}
-    <nav class="feed-actions">
-        {% for block in handle_event('AddFeedActions', app.request, notes is defined and notes is not empty) %}
-            {{ block | raw }}
-        {% endfor %}
-    </nav>
-</header>
+    <header class="feed-header">
+        {% if page_title is defined %}
+            <h1 class="heading-no-margin">{{ page_title | trans }}</h1>
+        {% endif %}
+        <nav class="feed-actions">
+            <details class="feed-actions-details">
+                <summary>
+                    {{ icon('filter', 'icon icon-feed-actions') | raw }} {# button-container #}
+                </summary>
+                <div class="feed-actions-details-dropdown">
+                    <ul>
+                        {% for block in handle_event('AddFeedActions', app.request, notes is defined and notes is not empty) %}
+                            {{ block | raw }}
+                        {% endfor %}
+                    </ul>
+                </div>
+            </details>
+        </nav>
+    </header>

    {# Backwards compatibility with hAtom 0.1 #}
    <main class="feed" tabindex="0" role="feed">
--- a/plugins/NoteTypeFeedFilter/templates/NoteTypeFeedFilter/tabs.html.twig
+++ b/plugins/NoteTypeFeedFilter/templates/NoteTypeFeedFilter/tabs.html.twig
@@ -1,3 +1,8 @@
 {% for tab in tabs %}
-    <a {{ tab.active ? 'class="active"' : '' }} href="{{ tab.url }}">{{ tab['icon'] }}</a>
+    <li>
+        <a href="{{ tab.url }}" title="{{ tab.active ? ('Hide ' ~ tab['icon']) : ('Show ' ~ tab['icon']) | trans }}">
+            {{ tab['icon'] }}
+            <span>{{ icon(tab.active ? 'eye-opened' : 'eye-closed', 'icon') | raw }}</span>
+        </a>
+    </li>
 {% endfor %}
--- a/public/assets/default_theme/css/pages/feeds.css
+++ b/public/assets/default_theme/css/pages/feeds.css
@@ -1,30 +1,36 @@
 .feed-header {
    display: flex;
    margin-top: var(--m);
+    margin-bottom: var(--m);
+    align-items: center;
 }
+
 .feed-header .feed-actions {
+    text-transform: capitalize;
    margin-left: auto;
 }
-.feed-header .feed-actions a {
-    margin-left: var(--s);
-}
-.feed-header .feed-actions a:not(.active) {
-    opacity: 0.33;
+
+.feed-actions-details-dropdown {
+    font-size: 0.937rem;
 }
+
 .notes hr {
    margin-top: var(--s);
 }
+
 .note-wrapper {
    width: 100%;
    height: inherit;
    border-radius: var(--s) var(--s) 0 0;
 }
+
 .note-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--s);
 }
+
 .note-sidebar > * {
    max-width: 4rem;
    max-height: 4rem;
@@ -32,63 +38,79 @@
    height: auto;
    border-radius: 2px;
 }
+
 .note-sidebar img {
    background: unset !important;
 }
+
 .h-entry:not(:first-child) {
    margin-top: var(--s);
 }
+
 .h-entry:not(embed) {
    box-shadow: inset 0 0 0 2px var(--border);
 }
+
 .h-entry img {
    background: repeating-conic-gradient(#ffffff66 0deg 90deg, #ffffff33 0deg 180deg) 0 0/40px 40px round;
 }
+
 .h-entry[id^="note-anchor-"]:target {
    border: 2px solid var(--accent) !important;
 }
+
 .embed {
    display: flex;
    flex-wrap: wrap;
    padding: var(--s);
    border: unset;
 }
+
 .embed header {
    width: 100%;
    margin-bottom: var(--m);
 }
+
 .embed img {
    width: 25%;
    height: auto;
    margin-right: var(--s);
 }
+
 .embed .p-summary {
    width: 60%;
 }
+
 .embed .p-author,
 .embed .p-name {
    font-weight: bold;
 }
+
 .embed img {
    padding: unset;
    max-width: min-content;
    max-height: min-content;
 }
+
 .embed .p-summary hr {
    margin-top: var(--s);
    margin-bottom: var(--s);
 }
+
 .h-entry .embed[class*="p-"] {
    padding: unset;
 }
+
 .h-entry a:focus {
    text-decoration: underline;
 }
+
 .h-entry {
    display: flex;
    border-radius: var(--s);
    background-color: var(--background-card) !important;
 }
+
 .h-entry figure {
    margin: unset;
    object-fit: cover;
@@ -96,16 +118,19 @@
    background: var(--gradient);
    border-radius: var(--s);
 }
+
 .h-entry .replies {
    margin-bottom: var(--s);
    padding: 0 var(--s) 0 var(--s);
    border-left: 1px solid var(--border);
 }
+
 .note-replies-start {
    font-size: 0.937rem;
    font-weight: 700;
    opacity: 0.5;
 }
+
 .note-info,
 embed header {
    display: flex;
@@ -114,91 +139,126 @@ embed header {
    line-height: initial;
    padding: 8px var(--s) 8px 0;
 }
+
 .note-info {
    margin-top: 2px;
    margin-right: 2px;
    background: var(--gradient-backwards);
 }
+
 .note-info > * {
    align-items: center;
 }
+
 .note-info-start {
    display: flex;
    flex-wrap: wrap;
 }
+
 .note-info-start > * {
    word-break: break-all;
 }
+
 .note-conversation-info {
    margin-left: 4px;
 }
+
 .note-author-url,
 .note-conversation-url,
 .note-url {
    font-style: italic;
 }
+
 embed header {
    justify-content: space-between;
 }
+
 .note-author-url {
    float: left;
    margin-left: 4px;
 }
+
 .note-author-nickname,
 .note-conversation-info {
    opacity: 0.5;
 }
+
 .note-author-fullname {
    font-weight: bold;
 }
+
 .note-actions {
    display: flex;
    align-items: center;
    margin-left: auto;
 }
+
 .note-actions ul {
    display: flex;
    vertical-align: middle;
 }
+
 .note-actions ul > li {
    margin-left: 8px;
 }
+
 .note-actions-extra-details {
    display: flex;
    flex-direction: column;
 }
+
+.feed-actions-details summary,
 .note-actions-extra-details summary {
    display: block;
-    opacity: 0.33;
    width: var(--unit);
    height: var(--unit);
 }
+
+.note-actions-extra-details summary {
+    opacity: 0.33;
+}
+
+.feed-actions-details[open] > summary,
 .note-actions-extra-details[open] > summary {
    opacity: 1 !important;
 }
+
+.feed-actions-details[open] > .feed-actions-details-dropdown,
 .note-actions-extra-details[open] > summary + * {
    z-index: 1;
    display: flex;
    position: absolute;
    right: 0;
    flex-direction: column;
-    padding: var(--s);
+    padding: 4px 8px;
    border: 2px solid var(--border);
    border-radius: var(--s);
    background: var(--background-card);
    box-shadow: var(--shadow);
    width: max-content;
 }
+.feed-actions-details[open] svg {
+    width: 1em;
+    height: auto;
+}
+.feed-actions-details[open] > .feed-actions-details-dropdown a span {
+    margin-left: 4px;
+    float: right;
+}
+
 .note-actions-extra-details[open] > summary + * > li {
    line-height: 2;
+    font-size: 0.937rem;
 }

 .note-actions-extra-details hr {
    margin: 8px !important;
 }
+
 .note-actions-set {
    opacity: 1 !important;
 }
+
 .button-container {
    border: none !important;
    mask-repeat: no-repeat !important;
@@ -209,9 +269,11 @@ embed header {
    background-color: var(--foreground);
    opacity: 0.33;
 }
+
 .button-container:not(:first-of-type) {
    margin-left: var(--s);
 }
+
 .button-container:focus,
 .button-container:hover {
    border: none !important;
@@ -220,60 +282,71 @@ embed header {
    opacity: 1;
    background-color: var(--accent);
 }
+
 .favourite-button-container {
    -o-mask-image: url("../../icons/heart.svg");
    -moz-mask-image: url("../../icons/heart.svg");
    -webkit-mask-image: url("../../icons/heart.svg");
    mask-image: url("../../icons/heart.svg");
 }
+
 .reply-button-container {
    -o-mask-image: url("../../icons/reply.svg");
    -moz-mask-image: url("../../icons/reply.svg");
    -webkit-mask-image: url("../../icons/reply.svg");
    mask-image: url("../../icons/reply.svg");
 }
+
 .repeat-button-container {
    -o-mask-image: url("../../icons/repeat.svg");
    -moz-mask-image: url("../../icons/repeat.svg");
    -webkit-mask-image: url("../../icons/repeat.svg");
    mask-image: url("../../icons/repeat.svg");
 }
+
 .delete-button-container {
    -o-mask-image: url("../../icons/delete.svg");
    -moz-mask-image: url("../../icons/delete.svg");
    -webkit-mask-image: url("../../icons/delete.svg");
    mask-image: url("../../icons/delete.svg");
 }
+
 .note-content {
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--s) var(--s);
    padding: 0 var(--s) var(--s) 0;
 }
+
 .note-text a {
    text-decoration: underline !important;
 }
+
 .note-attachments {
    display: flex;
    justify-items: flex-start;
 }
+
 .note-attachments-unit {
    display: flex;
    flex-wrap: wrap;
    max-width: max-content;
    border-radius: var(--s);
    padding: var(--s);
-    align-self:flex-start;
+    align-self: flex-start;
    background-color: var(--background-card) !important;
 }
+
 .note-attachments-unit:not(:only-child) {
    margin-right: var(--s);
 }
+
 .note-attachments-unit > figure figcaption {
    display: flex;
    word-break: break-all;
    margin-bottom: var(--s);
 }
+
 .note-complementary {
    font-size: 0.937rem;
    border-left: 2px solid var(--accent);
@@ -284,12 +357,15 @@ embed header {
    margin-right: var(--s);
    background: var(--gradient) !important;
 }
+
 .note-complementary a {
    font-weight: bold;
 }
+
 .note-complementary:last-of-type {
    margin-bottom: var(--s);
 }
+
 .h-entry-language {
    position: relative;
    float: right;
@@ -298,10 +374,12 @@ embed header {
    color: var(--foreground);
    border-radius: 0 0 var(--s) 0;
 }
+
 .feed-empty {
    display: flex;
    flex-direction: column;
 }
+
 .feed-empty .feed-background {
    opacity: 3%;
    width: 40%;
@@ -312,13 +390,15 @@ embed header {
 }

 /* < 720p */
-@media only screen and (max-width:1280px) {
+@media only screen and (max-width: 1280px) {
    .note-sidebar {
        padding: 8px 2px 0 2px;
    }
+
    .note-sidebar .avatar {
        width: 60%;
    }
+
    .button-container {
        width: 0.937rem;
        height: 0.937rem;
--- a/public/assets/default_theme/css/widgets/sections.css
+++ b/public/assets/default_theme/css/widgets/sections.css
@@ -31,6 +31,8 @@
    align-self: center;
    margin-left: auto;
    text-align: right;
+    font-size: 0.937rem;
+    opacity: 0.66;
 }
 .profile-stats-subscriptions,
 .profile-stats-subscribers {
@@ -145,7 +147,7 @@
    background: var(--gradient);
    padding: 2px 8px;
 }
-.section-widget-subtitle-details summary {
+.section-form .section-widget-subtitle-details summary {
    border: 2px solid var(--border);
 }
 .section-widget-title-details summary,
@@ -169,6 +171,8 @@
    display: flex;
 }
 .section-subtitle-summary ~ [class|="form-row"] {
+    font-size: 0.937rem;
+    max-font-size: 0.937rem !important;
    padding: var(--s);
 }
 .section-subtitle-summary strong,
@@ -183,9 +187,14 @@
 .section-title-summary svg:last-child {
    margin-left: 4px;
 }
+.section-widget-subtitle-details .section-widget-subtitle-details:not(:last-of-type) {
+    margin-bottom: var(--s);
+}
 .section-form {
    display: flex;
    flex-direction: column;
+    background-color: var(--background-hard);
+    border-radius: var(--s);
    max-width: 100%;
    width: 100%;
    padding: var(--s);
--- a/public/assets/default_theme/icons/drop.svg
+++ b/public/assets/default_theme/icons/drop.svg
@@ -1,54 +1,4 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
-   sodipodi:docname="drop.svg"
-   id="svg6"
-   viewBox="0 0 32 32"
-   version="1.1">
-  <metadata
-     id="metadata12">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs10" />
-  <sodipodi:namedview
-     inkscape:current-layer="svg6"
-     inkscape:window-maximized="1"
-     inkscape:window-y="30"
-     inkscape:window-x="0"
-     inkscape:cy="16.019032"
-     inkscape:cx="16.050301"
-     inkscape:zoom="27.75"
-     showgrid="false"
-     id="namedview8"
-     inkscape:window-height="1022"
-     inkscape:window-width="1920"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0"
-     guidetolerance="10"
-     gridtolerance="10"
-     objecttolerance="10"
-     borderopacity="1"
-     bordercolor="#666666"
-     pagecolor="#ffffff" />
-  <title
-     id="title2">drop</title>
-  <path
-     style="fill-opacity:1"
-     id="path4"
-     d="M16 25.173c-0.823 0-10.695-17.1-10.284-17.813s20.157-0.713 20.568 0c0.411 0.713-9.461 17.813-10.284 17.813z" />
+<svg version="1.1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <title>Dropdown icon</title>
+  <path d="m16 25.173c-0.823 0-10.695-17.1-10.284-17.813s20.157-0.713 20.568 0-9.461 17.813-10.284 17.813z"/>
 </svg>
--- a/public/assets/icons/eye-closed.svg.twig
+++ b/public/assets/icons/eye-closed.svg.twig
@@ -0,0 +1,10 @@
+<!-- https://github.com/primer/octicons -->
+<!-- MIT License -->
+
+<svg xmlns="http://www.w3.org/2000/svg"
+     class="{{ iconClass|default('') }}"
+     viewBox="0 0 24 24"
+     width="24"
+     height="24">
+    <path d="M8.052 5.837A9.715 9.715 0 0112 5c2.955 0 5.309 1.315 7.06 2.864 1.756 1.553 2.866 3.307 3.307 4.08a.11.11 0 01.016.055.122.122 0 01-.017.06 16.766 16.766 0 01-1.53 2.218.75.75 0 101.163.946 18.253 18.253 0 001.67-2.42 1.607 1.607 0 00.001-1.602c-.485-.85-1.69-2.757-3.616-4.46C18.124 5.034 15.432 3.5 12 3.5c-1.695 0-3.215.374-4.552.963a.75.75 0 00.604 1.373z"></path><path fill-rule="evenodd" d="M19.166 17.987C17.328 19.38 14.933 20.5 12 20.5c-3.432 0-6.125-1.534-8.054-3.24C2.02 15.556.814 13.648.33 12.798a1.606 1.606 0 01.001-1.6A18.305 18.305 0 013.648 7.01L1.317 5.362a.75.75 0 11.866-1.224l20.5 14.5a.75.75 0 11-.866 1.224l-2.651-1.875zM4.902 7.898c-1.73 1.541-2.828 3.273-3.268 4.044a.118.118 0 00-.017.059c0 .015.003.034.016.055.441.774 1.551 2.527 3.307 4.08C6.69 17.685 9.045 19 12 19c2.334 0 4.29-.82 5.874-1.927l-3.516-2.487a3.5 3.5 0 01-5.583-3.949L4.902 7.899z"></path>
+</svg>
--- a/public/assets/icons/eye-opened.svg.twig
+++ b/public/assets/icons/eye-opened.svg.twig
@@ -0,0 +1,11 @@
+<!-- https://github.com/primer/octicons -->
+<!-- MIT License -->
+
+<svg xmlns="http://www.w3.org/2000/svg"
+     class="{{ iconClass|default('') }}"
+     viewBox="0 0 24 24"
+     width="24"
+     height="24">
+    <path d="M15.5 12a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0z"></path>
+    <path fill-rule="evenodd" d="M12 3.5c-3.432 0-6.125 1.534-8.054 3.24C2.02 8.445.814 10.352.33 11.202a1.6 1.6 0 000 1.598c.484.85 1.69 2.758 3.616 4.46C5.876 18.966 8.568 20.5 12 20.5c3.432 0 6.125-1.534 8.054-3.24 1.926-1.704 3.132-3.611 3.616-4.461a1.6 1.6 0 000-1.598c-.484-.85-1.69-2.757-3.616-4.46C18.124 5.034 15.432 3.5 12 3.5zM1.633 11.945c.441-.774 1.551-2.528 3.307-4.08C6.69 6.314 9.045 5 12 5c2.955 0 5.309 1.315 7.06 2.864 1.756 1.553 2.866 3.307 3.307 4.08a.111.111 0 01.017.056.111.111 0 01-.017.056c-.441.774-1.551 2.527-3.307 4.08C17.31 17.685 14.955 19 12 19c-2.955 0-5.309-1.315-7.06-2.864-1.756-1.553-2.866-3.306-3.307-4.08A.11.11 0 011.616 12a.11.11 0 01.017-.055z"></path>
+</svg>
--- a/public/assets/icons/filter.svg.twig
+++ b/public/assets/icons/filter.svg.twig
@@ -0,0 +1,10 @@
+<!-- https://github.com/primer/octicons -->
+<!-- MIT License -->
+<svg xmlns="http://www.w3.org/2000/svg"
+     class="{{ iconClass|default('') }}"
+     viewBox="0 0 24 24"
+     width="24"
+     height="24">
+    <title>Filter</title>
+    <path d="M2.75 6a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75zM6 11.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H6.75a.75.75 0 01-.75-.75zm4 4.938a.75.75 0 01.75-.75h2.5a.75.75 0 010 1.5h-2.5a.75.75 0 01-.75-.75z"></path>
+</svg>