From 65779be906a2051ad656aa65a0950b66121c4e90 Mon Sep 17 00:00:00 2001 From: Dessalines Date: Tue, 3 Mar 2020 02:29:45 -0500 Subject: [PATCH] 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/assets/css/main.css | 26 +++++ ui/assets/css/tippy.css | 1 + ui/package.json | 1 + 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 +++ ui/translations/en.json | 2 + ui/yarn.lock | 12 +++ 19 files changed, 373 insertions(+), 109 deletions(-) create mode 100644 ui/assets/css/tippy.css diff --git a/ui/assets/css/main.css b/ui/assets/css/main.css index b03f27036..d206a508d 100644 --- a/ui/assets/css/main.css +++ b/ui/assets/css/main.css @@ -95,8 +95,17 @@ fill: currentColor; vertical-align: middle; align-self: center; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } +.icon-inline { + margin-bottom: 2px; +} .spin { animation: spins 2s linear infinite; @@ -225,3 +234,20 @@ hr { height: 50px; width: 50px; } + +.unselectable { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.list-inline-item-action { + display: inline-block; +} + +.list-inline-item-action:not(:last-child) { + margin-right: 1.2rem; +} diff --git a/ui/assets/css/tippy.css b/ui/assets/css/tippy.css new file mode 100644 index 000000000..ff0a31326 --- /dev/null +++ b/ui/assets/css/tippy.css @@ -0,0 +1 @@ +.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}.tippy-iOS{cursor:pointer!important;-webkit-tap-highlight-color:transparent}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{border-width:8px 8px 0;border-top-color:#333;bottom:-7px;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;border-width:0 8px 8px;border-bottom-color:#333;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:#333;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:#333;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1} \ No newline at end of file diff --git a/ui/package.json b/ui/package.json index f12f947af..8658d1363 100644 --- a/ui/package.json +++ b/ui/package.json @@ -41,6 +41,7 @@ "reconnecting-websocket": "^4.4.0", "rxjs": "^6.4.0", "terser": "^4.6.3", + "tippy.js": "^6.0.0", "toastify-js": "^1.6.2", "tributejs": "^4.1.1", "twemoji": "^12.1.2", diff --git a/ui/src/components/comment-form.tsx b/ui/src/components/comment-form.tsx index eaa054d83..aa8e651de 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 b56732632..09efcf68f 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 e2df15e14..e97d7b08d 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 24bed7247..f39773d02 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 661057206..7ef3e303e 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 = { diff --git a/ui/translations/en.json b/ui/translations/en.json index 8b719c712..1f959396a 100644 --- a/ui/translations/en.json +++ b/ui/translations/en.json @@ -146,6 +146,8 @@ "browser_default": "Browser Default", "downvotes_disabled": "Downvotes disabled", "enable_downvotes": "Enable Downvotes", + "upvote": "Upvote", + "downvote": "Downvote", "open_registration": "Open Registration", "registration_closed": "Registration closed", "enable_nsfw": "Enable NSFW", diff --git a/ui/yarn.lock b/ui/yarn.lock index 601f3067a..6c1f222b2 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -104,6 +104,11 @@ lodash "^4.17.13" to-fast-properties "^2.0.0" +"@popperjs/core@^2.0.6": + version "2.0.6" + resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.0.6.tgz#5a39ac118811ca844155b0ad5190b8c24f35e533" + integrity sha512-zj7Gw8QC4jmR92eKUvtrZUEpl2ypRbq+qlE4pwf9n2hnUO9BOAcWUs4/Ht+gNIbFt98xtqhLvccdCfD469MzpQ== + "@samverschueren/stream-to-observable@^0.3.0": version "0.3.0" resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f" @@ -4432,6 +4437,13 @@ tiny-warning@^1.0.0: resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== +tippy.js@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.0.0.tgz#6bc4f477ea82ef344db51ae34f106a8b25f2d02c" + integrity sha512-2NVc5A8cnO9N/Fk+tTU6KEm6m8ZXT1u3pOY756zZ5BE38rWDl/hVyoWhTfM79HW1nEJSpn/VujqAMMZGHsE9qQ== + dependencies: + "@popperjs/core" "^2.0.6" + tmp@^0.0.33: version "0.0.33" resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"