From 44bbc459736ac53b9150903af14c20a497caf9ab Mon Sep 17 00:00:00 2001 From: Dessalines Date: Tue, 3 Mar 2020 02:29:45 -0500 Subject: A first pass at adding icons, and tippy tooltips. - Adding icons for post-listing, comment-node, and navbar. - Adding html titles. - Updating moment expand to use users locale. --- ui/src/components/comment-form.tsx | 14 +++- ui/src/components/comment-node.tsx | 141 ++++++++++++++++++++++++++---------- ui/src/components/community.tsx | 1 + ui/src/components/iframely-card.tsx | 2 + ui/src/components/inbox.tsx | 1 + ui/src/components/main.tsx | 2 + ui/src/components/moment-time.tsx | 27 ++++++- ui/src/components/navbar.tsx | 32 ++++++-- ui/src/components/post-form.tsx | 16 +++- ui/src/components/post-listing.tsx | 133 +++++++++++++++++++++++++--------- ui/src/components/symbols.tsx | 57 ++++++++++----- ui/src/components/user.tsx | 1 + ui/src/index.html | 1 + ui/src/utils.ts | 12 +++ 14 files changed, 331 insertions(+), 109 deletions(-) (limited to 'ui/src') diff --git a/ui/src/components/comment-form.tsx b/ui/src/components/comment-form.tsx index eaa054d8..aa8e651d 100644 --- a/ui/src/components/comment-form.tsx +++ b/ui/src/components/comment-form.tsx @@ -141,16 +141,22 @@ export class CommentForm extends Component { - {i18n.t('formatting_help')} + + + -
+ { this.handleCommentDownvote = this.handleCommentDownvote.bind(this); } + componentDidUpdate() { + setupTippy(); + } + componentWillReceiveProps(nextProps: CommentNodeProps) { this.state.my_vote = nextProps.node.comment.my_vote; this.state.upvotes = nextProps.node.comment.upvotes; @@ -128,18 +133,22 @@ export class CommentNode extends Component { this.state.my_vote == 1 ? 'text-info' : 'text-muted' }`} onClick={linkEvent(node, this.handleCommentUpvote)} + data-tippy-content={i18n.t('upvote')} > -
{this.state.score}
+
+ {this.state.score} +
{WebSocketService.Instance.site.enable_downvotes && ( @@ -113,12 +119,16 @@ export class Navbar extends Component { > -
    +
      {this.props.post.duplicates && ( <>
    • @@ -470,65 +492,90 @@ export class PostListing extends Component { )}
    -
      +
        {UserService.Instance.user && ( <> {this.props.showBody && ( <> -
      • +
      • - {post.saved ? i18n.t('unsave') : i18n.t('save')} + + +
        • -
      • +
      • - {i18n.t('cross_post')} + + +
        • )} {this.myPost && this.props.showBody && ( <> -
      • +
      • - {i18n.t('edit')} + + +
        • -
      • +
      • - {!post.deleted - ? i18n.t('delete') - : i18n.t('restore')} + + +
        • )} {!this.state.showAdvanced && this.props.showBody ? ( -
      • +
      • - {i18n.t('more')} + + +
        • ) : ( <> {this.props.showBody && post.body && ( -
      • +
      • { )} {this.canModOnSelf && ( <> -
      • +
      • - {post.locked - ? i18n.t('unlock') - : i18n.t('lock')} + + +
        • -
      • +
      • - {post.stickied - ? i18n.t('unsticky') - : i18n.t('sticky')} + + +
        • diff --git a/ui/src/components/symbols.tsx b/ui/src/components/symbols.tsx index b5673263..09efcf68 100644 --- a/ui/src/components/symbols.tsx +++ b/ui/src/components/symbols.tsx @@ -15,40 +15,66 @@ export class Symbols extends Component { xmlnsXlink="http://www.w3.org/1999/xlink" > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - message-square - - image - - - + + - external-link - coffee1 - rss - arrow-down - arrow-up - - mail - + + { - search - github - spinner diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx index e2df15e1..e97d7b08 100644 --- a/ui/src/components/user.tsx +++ b/ui/src/components/user.tsx @@ -267,6 +267,7 @@ export class User extends Component { SortType[this.state.sort] }`} target="_blank" + title="RSS" > # diff --git a/ui/src/index.html b/ui/src/index.html index 24bed724..f39773d0 100644 --- a/ui/src/index.html +++ b/ui/src/index.html @@ -14,6 +14,7 @@ + diff --git a/ui/src/utils.ts b/ui/src/utils.ts index 66105720..7ef3e303 100644 --- a/ui/src/utils.ts +++ b/ui/src/utils.ts @@ -41,6 +41,7 @@ import markdown_it_container from 'markdown-it-container'; import twemoji from 'twemoji'; import emojiShortName from 'emoji-short-name'; import Toastify from 'toastify-js'; +import tippy from 'tippy.js'; export const repoUrl = 'https://github.com/dessalines/lemmy'; export const markdownHelpUrl = '/docs/about_guide.html'; @@ -477,6 +478,17 @@ export function setupTribute(): Tribute { }); } +let tippyInstance = tippy('[data-tippy-content]'); + +export function setupTippy() { + tippyInstance.forEach(e => e.destroy()); + tippyInstance = tippy('[data-tippy-content]', { + delay: [500, 0], + // Display on "long press" + touch: ['hold', 500], + }); +} + function userSearch(text: string, cb: any) { if (text) { let form: SearchForm = { -- cgit v1.2.3