~netlandish/links

4156b6074f31fe0d91513c5fd6d4054741654f19 — Yader Velasquez 9 months ago 35e433d
Small changes for UI
Use icon instead of Mark as read link
Display icon tooltip for help
3 files changed, 65 insertions(+), 22 deletions(-)

M core/routes.go
M static/css/style.css
M templates/link_list.html
M core/routes.go => core/routes.go +8 -4
@@ 70,7 70,7 @@ func (s *Service) RegisterRoutes() {
	s.eg.POST("/add", s.OrgLinksCreate).Name = s.RouteName("link_create_post")
	s.eg.GET("/link/:id", s.OrgLinkDetail).Name = s.RouteName("link_detail")
	s.eg.GET("/click/:id", s.OrgLinkRedirect).Name = s.RouteName("link_redirect")
	s.eg.GET("/read/:id", s.OrgLinkAsRead).Name = s.RouteName("link_mark_as_read")
	s.eg.GET("/read/:id", s.OrgLinkAsReadToggle).Name = s.RouteName("link_mark_as_read")
	s.eg.GET("/star/:id", s.OrgLinkStarToggle).Name = s.RouteName("link_star_toggle")
	s.eg.GET("/link/:id/delete", s.OrgLinkDelete).Name = s.RouteName("link_delete")
	s.eg.POST("/link/:id/delete", s.OrgLinkDelete).Name = s.RouteName("link_delete")


@@ 1138,6 1138,7 @@ func (s *Service) PopularLinkList(c echo.Context) error {
	pd := localizer.NewPageData(lt.Translate("Bookmarks"))
	pd.Data["bookmark"] = lt.Translate("bookmark")
	pd.Data["popular"] = lt.Translate("Popular Bookmarks")
	pd.Data["no_links"] = lt.Translate("No Links")

	links := result.PopularLinks
	gmap := gobwebs.Map{


@@ 1312,6 1313,10 @@ func (s *Service) OrgLinksList(c echo.Context) error {
	pd.Data["starred"] = lt.Translate("Starred")
	pd.Data["untagged"] = lt.Translate("Untagged")
	pd.Data["mark_as_read"] = lt.Translate("Mark as read")
	pd.Data["mark_as_unread"] = lt.Translate("Mark as unread")
	pd.Data["mark_as_starred"] = lt.Translate("Starred")
	pd.Data["mark_as_non_starred"] = lt.Translate("Unstarred")
	pd.Data["no_links"] = lt.Translate("No Links")
	orgLinks := result.OrgLinks.Result
	gmap := gobwebs.Map{
		"pd":               pd,


@@ 2173,7 2178,7 @@ func (s *Service) OrgLinkStarToggle(c echo.Context) error {
	return c.Redirect(http.StatusMovedPermanently, redirect)
}

func (s *Service) OrgLinkAsRead(c echo.Context) error {
func (s *Service) OrgLinkAsReadToggle(c echo.Context) error {
	gctx := c.(*server.Context)
	id, err := strconv.Atoi(c.Param("id"))
	if err != nil {


@@ 2183,7 2188,6 @@ func (s *Service) OrgLinkAsRead(c echo.Context) error {
	opts := &database.FilterOptions{
		Filter: sq.And{
			sq.Eq{"ol.id": id},
			sq.Eq{"ol.unread": true},
			sq.Eq{"ol.user_id": gctx.User.GetID()},
		},
		Limit: 1,


@@ 2209,7 2213,7 @@ func (s *Service) OrgLinkAsRead(c echo.Context) error {
				}
			}`)
	op.Var("id", link.ID)
	op.Var("unread", false)
	op.Var("unread", !link.Unread)
	err = links.Execute(c.Request().Context(), op, &result)
	if err != nil {
		return err

M static/css/style.css => static/css/style.css +24 -0
@@ 400,6 400,10 @@ a.bullet-link:before {
    margin-right: 7px;
}

.read-link {
    line-height: 0;
}

.plan-selected {
    border: 1px solid var(--color-primary);
}


@@ 427,3 431,23 @@ a.bullet-link:before {
.tour-section-img {
    margin-top: 15px;
}

.non-starred {
  color: var(--color-darkGrey);
}

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

.tooltip-link[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    color: var(--color-darkGrey);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    padding: 5px;
    white-space: nowrap;
}

M templates/link_list.html => templates/link_list.html +33 -18
@@ 28,24 28,40 @@
        <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>
                  <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 not .Unread}}
              <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>
              {{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" href="{{reverse "core:link_star_toggle" .ID}}">
                    <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>


@@ 53,7 69,7 @@
                {{end}}
              {{else}}
                {{if eq .UserID $.currentUserID}}
                    <a class="star-link" href="{{reverse "core:link_star_toggle" .ID}}">
                    <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>


@@ 113,13 129,12 @@
              </time>
              <small>{{$.pd.Data.by}}</small>
              <small><a href="{{reverse "core:org_link_list" .OrgSlug}}" class="underline">{{.OrgSlug}}</a></small>
              {{if and .Unread (eq .UserID $.currentUserID)}}
                  <small> | <a href="{{reverse "core:link_mark_as_read" .ID}}" class="underline">{{$.pd.Data.mark_as_read}}</a></small>
              {{end}}
            </p>
        {{end}}
      </article>
    </li>
    {{else}}
    <p class="text-center">{{.pd.Data.no_links}}</p>
    {{end}}
  </ul>
  {{if or .prevURL .nextURL}}