~netlandish/links

898fd9ed0ffe498b5b5ede23b378bf48a29cc780 — Yader Velasquez 9 months ago 3f43ebf
Improve icons for links
3 files changed, 78 insertions(+), 53 deletions(-)

M core/routes.go
M static/css/style.css
M templates/link_list.html
M core/routes.go => core/routes.go +3 -2
@@ 1298,8 1298,8 @@ func (s *Service) OrgLinksList(c echo.Context) error {
	pd := localizer.NewPageData(lt.Translate("Bookmarks"))
	pd.Data["bookmark"] = lt.Translate("bookmark")
	pd.Data["saved"] = lt.Translate("saved")
	pd.Data["public_post"] = lt.Translate("Public Post")
	pd.Data["private_post"] = lt.Translate("Private Post")
	pd.Data["public"] = lt.Translate("Public")
	pd.Data["private"] = lt.Translate("Private")
	pd.Data["edit"] = lt.Translate("Edit")
	pd.Data["delete"] = lt.Translate("Delete")
	pd.Data["next"] = lt.Translate("Next")


@@ 1317,6 1317,7 @@ func (s *Service) OrgLinksList(c echo.Context) error {
	pd.Data["mark_as_starred"] = lt.Translate("Star")
	pd.Data["mark_as_non_starred"] = lt.Translate("Unstar")
	pd.Data["no_links"] = lt.Translate("No Links")
	pd.Data["archive"] = lt.Translate("Archive")
	orgLinks := result.OrgLinks.Result
	gmap := gobwebs.Map{
		"pd":               pd,

M static/css/style.css => static/css/style.css +21 -1
@@ 436,6 436,11 @@ a.bullet-link:before {
  color: var(--color-darkGrey);
}

.icon-link {
    line-height: 0;
    margin-left: 10px;
}

.tooltip-link[data-tooltip] {
    position: relative;
}


@@ 448,10 453,25 @@ a.bullet-link:before {
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    padding: 5px;
    white-space: nowrap;
    z-index: 1000;
    border: 1px solid var(--color-darkGrey);
    padding: 10px 2px 10px 2px;
    opacity: 1 !important;
}

.lock-icon {
    margin-top: 9px;
}
.lock-icon[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    color: var(--color-darkGrey);
    position: absolute;
    transform: translateX(-50%);
    background-color: #fff;
    white-space: nowrap;
    z-index: 1000;
    border: 1px solid var(--color-darkGrey);
    padding: 0 2px 0 3px;
    opacity: 1 !important;
}

M templates/link_list.html => templates/link_list.html +54 -50
@@ 28,53 28,21 @@
        <div class="d-flex items-center">
          {{if $.isOrgLink}}
              {{if $.canRead }}
                  <svg class="mr-1" xmlns="http://www.w3.org/2000/svg"
                                    fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width:20px"
                                    title="{{if .IsPrivate}}{{$.pd.Data.private_post}}{{else}}{{$.pd.Data.public_post}}{{end}}"
                                    aria-label="{{if .IsPrivate}}{{$.pd.Data.private_post}}{{else}}{{$.pd.Data.public_post}}{{end}}">
                      {{if .IsPrivate}}
                      <path stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
                      {{else}}
                      <path stroke-linecap="round"
                        stroke-linejoin="round" d="M13.5 10.5V6.75a4.5 4.5 0 119 0v3.75M3.75 21.75h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H3.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
                      {{end}}
                  </svg>
              {{end}}
              {{if .Unread}}
                {{if eq .UserID $.currentUserID}}
                    <a class="read-link tooltip-link" href="{{reverse "core:link_mark_as_read" .ID}}" data-tooltip="{{$.pd.Data.mark_as_read}}">
                        <svg class="mr-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width:20px">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                        </svg>
                    </a>
                {{end}}
              {{else}}
                {{if eq .UserID $.currentUserID}}
                    <a class="read-link tooltip-link" href="{{reverse "core:link_mark_as_read" .ID}}" data-tooltip="{{$.pd.Data.mark_as_unread}}">
                        <svg title="test" class="mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" style="width:20px">
                          <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" />
                        </svg>
                    </a>
                {{end}}
              {{end}}
              {{if not .Starred}}
                {{if eq .UserID $.currentUserID}}
                    <a class="star-link non-starred tooltip-link" href="{{reverse "core:link_star_toggle" .ID}}" data-tooltip="{{$.pd.Data.mark_as_starred}}">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width:20px">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
                        </svg>
                    </a>
                {{end}}
              {{else}}
                {{if eq .UserID $.currentUserID}}
                    <a class="star-link tooltip-link" href="{{reverse "core:link_star_toggle" .ID}}" data-tooltip="{{$.pd.Data.mark_as_non_starred}}">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width:20px">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
                        </svg>
                    </a>
                {{end}}
                <span class="lock-icon" data-tooltip="{{if .IsPrivate}}{{$.pd.Data.private}}{{else}}{{$.pd.Data.public}}{{end}}">
                    <svg class="mr-1" xmlns="http://www.w3.org/2000/svg"
                            fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width:20px"
                            title="{{if .IsPrivate}}{{$.pd.Data.private}}{{else}}{{$.pd.Data.public}}{{end}}"
                            aria-label="{{if .IsPrivate}}{{$.pd.Data.private}}{{else}}{{$.pd.Data.public}}{{end}}">
                        {{if .IsPrivate}}
                        <path stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
                        {{else}}
                        <path stroke-linecap="round"
                            stroke-linejoin="round" d="M13.5 10.5V6.75a4.5 4.5 0 119 0v3.75M3.75 21.75h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H3.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
                        {{end}}
                    </svg>
                </span>
              {{end}}
          {{end}}
          <h3 class="is-marginless mr-1">


@@ 85,18 53,54 @@
          {{end}}
          {{if $.isOrgLink}}
            {{if eq .UserID $.currentUserID}}
                <a class="edit-element-icon" href="{{if eq .Type 0}}{{reverse "core:link_edit" .ID}}{{else if eq .Type 1}}{{reverse "core:note_edit" .ID}}{{end}}">
                <!-- Read/Unread -->
                {{if .Unread}}
                <a class="icon-link tooltip-link" href="{{reverse "core:link_mark_as_read" .ID}}" data-tooltip="{{$.pd.Data.mark_as_read}}">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width:20px;">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                    </svg>
                </a>
                {{else}}
                <a class="icon-link tooltip-link" href="{{reverse "core:link_mark_as_read" .ID}}" data-tooltip="{{$.pd.Data.mark_as_unread}}">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" style="width:20px;">
                        <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" />
                    </svg>
                </a>
                {{end}}

                <!-- Star/Unstar -->
                {{if .Starred}}
                <a class="icon-link tooltip-lin tooltip-link" href="{{reverse "core:link_star_toggle" .ID}}" data-tooltip="{{$.pd.Data.mark_as_non_starred}}">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width:20px;">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
                    </svg>
                </a>
                {{else}}
                <a class="icon-link non-starred tooltip-link" href="{{reverse "core:link_star_toggle" .ID}}" data-tooltip="{{$.pd.Data.mark_as_starred}}">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width:20px;">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
                    </svg>
                </a>
                {{end}}

                <!-- Edit -->
                <a class="icon-link tooltip-link"
                    href="{{if eq .Type 0}}{{reverse "core:link_edit" .ID}}{{else if eq .Type 1}}{{reverse "core:note_edit" .ID}}{{end}}" data-tooltip="{{$.pd.Data.edit}}">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" style="width:20px;">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
                    </svg>
                </a>
                <a class="edit-element-icon" href="{{reverse "core:link_delete" .ID}}">

                <!-- Delete -->
                <a class="icon-link tooltip-link" href="{{reverse "core:link_delete" .ID}}" data-tooltip="{{$.pd.Data.delete}}">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" style="width:20px;">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
                    </svg>
                </a>

                <!-- Archived -->
                {{if .ArchiveURL}}
                <a class="edit-element-icon" href="{{.ArchiveURL}}" target="_blank">
                <a class="icon-link tooltip-link" href="{{.ArchiveURL}}" target="_blank" data-tooltip="{{$.pd.Data.archive}}">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" style="width:20px;">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z" />
                    </svg>