diff options
Diffstat (limited to 'ui/src')
-rw-r--r-- | ui/src/components/main.tsx | 9 | ||||
-rw-r--r-- | ui/src/components/moment-time.tsx | 11 | ||||
-rw-r--r-- | ui/src/components/post-listing.tsx | 8 | ||||
-rw-r--r-- | ui/src/components/sidebar.tsx | 30 | ||||
-rw-r--r-- | ui/src/components/symbols.tsx | 3 |
5 files changed, 47 insertions, 14 deletions
diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx index 014d82d3..3f7d8fa6 100644 --- a/ui/src/components/main.tsx +++ b/ui/src/components/main.tsx @@ -268,13 +268,16 @@ export class Main extends Component<any, MainState> { <div class="card-body"> <h5 class="mb-0">{`${this.state.siteRes.site.name}`}</h5> {this.canAdmin && ( - <ul class="list-inline mb-1 text-muted small font-weight-bold"> - <li className="list-inline-item"> + <ul class="list-inline mb-1 text-muted font-weight-bold"> + <li className="list-inline-item-action"> <span class="pointer" onClick={linkEvent(this, this.handleEditClick)} + data-tippy-content={i18n.t('edit')} > - {i18n.t('edit')} + <svg class="icon icon-inline"> + <use xlinkHref="#icon-edit"></use> + </svg> </span> </li> </ul> diff --git a/ui/src/components/moment-time.tsx b/ui/src/components/moment-time.tsx index a256f785..76e5fe28 100644 --- a/ui/src/components/moment-time.tsx +++ b/ui/src/components/moment-time.tsx @@ -1,6 +1,6 @@ import { Component } from 'inferno'; import moment from 'moment'; -import { getMomentLanguage, setupTippy } from '../utils'; +import { getMomentLanguage, setupTippy, capitalizeFirstLetter } from '../utils'; import { i18n } from '../i18next'; interface MomentTimeProps { @@ -28,10 +28,15 @@ export class MomentTime extends Component<MomentTimeProps, any> { if (this.props.data.updated) { return ( <span - data-tippy-content={this.format(this.props.data.updated)} + data-tippy-content={`${capitalizeFirstLetter( + i18n.t('modified') + )} ${this.format(this.props.data.updated)}`} className="font-italics pointer unselectable" > - {i18n.t('modified')} {moment.utc(this.props.data.updated).fromNow()} + <svg class="icon icon-inline mr-1"> + <use xlinkHref="#icon-edit-2"></use> + </svg> + {moment.utc(this.props.data.updated).fromNow()} </span> ); } else { diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx index bc23543a..6e285ee9 100644 --- a/ui/src/components/post-listing.tsx +++ b/ui/src/components/post-listing.tsx @@ -579,8 +579,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> { <span className="pointer" onClick={linkEvent(this, this.handleViewSource)} + data-tippy-content={i18n.t('view_source')} > - {i18n.t('view_source')} + <svg + class={`icon icon-inline ${this.state + .viewSource && 'text-success'}`} + > + <use xlinkHref="#icon-eye"></use> + </svg> </span> </li> )} diff --git a/ui/src/components/sidebar.tsx b/ui/src/components/sidebar.tsx index 5c8ef1a9..a78589d5 100644 --- a/ui/src/components/sidebar.tsx +++ b/ui/src/components/sidebar.tsx @@ -13,6 +13,7 @@ import { getUnixTime, pictshareAvatarThumbnail, showAvatars, + setupTippy, } from '../utils'; import { CommunityForm } from './community-form'; import { i18n } from '../i18next'; @@ -46,6 +47,10 @@ export class Sidebar extends Component<SidebarProps, SidebarState> { this.handleEditCancel = this.handleEditCancel.bind(this); } + componentDidUpdate() { + setupTippy(); + } + render() { return ( <div> @@ -84,26 +89,37 @@ export class Sidebar extends Component<SidebarProps, SidebarState> { <Link className="text-muted" to={`/c/${community.name}`}> /c/{community.name} </Link> - <ul class="list-inline mb-1 text-muted small font-weight-bold"> + <ul class="list-inline mb-1 text-muted font-weight-bold"> {this.canMod && ( <> - <li className="list-inline-item"> + <li className="list-inline-item-action"> <span class="pointer" onClick={linkEvent(this, this.handleEditClick)} + data-tippy-content={i18n.t('edit')} > - {i18n.t('edit')} + <svg class="icon icon-inline"> + <use xlinkHref="#icon-edit"></use> + </svg> </span> </li> {this.amCreator && ( - <li className="list-inline-item"> + <li className="list-inline-item-action"> <span class="pointer" onClick={linkEvent(this, this.handleDeleteClick)} + data-tippy-content={ + !community.deleted + ? i18n.t('delete') + : i18n.t('restore') + } > - {!community.deleted - ? i18n.t('delete') - : i18n.t('restore')} + <svg + class={`icon icon-inline ${community.deleted && + 'text-danger'}`} + > + <use xlinkHref="#icon-trash"></use> + </svg> </span> </li> )} diff --git a/ui/src/components/symbols.tsx b/ui/src/components/symbols.tsx index 09efcf68..108fbab3 100644 --- a/ui/src/components/symbols.tsx +++ b/ui/src/components/symbols.tsx @@ -42,6 +42,9 @@ export class Symbols extends Component<any, any> { <symbol id="icon-edit" viewBox="0 0 24 24"> <path d="M11 3h-7c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-7c0-0.552-0.448-1-1-1s-1 0.448-1 1v7c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-14c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-14c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h7c0.552 0 1-0.448 1-1s-0.448-1-1-1zM17.793 1.793l-9.5 9.5c-0.122 0.121-0.217 0.28-0.263 0.465l-1 4c-0.039 0.15-0.042 0.318 0 0.485 0.134 0.536 0.677 0.862 1.213 0.728l4-1c0.167-0.041 0.33-0.129 0.465-0.263l9.5-9.5c0.609-0.609 0.914-1.41 0.914-2.207s-0.305-1.598-0.914-2.207-1.411-0.915-2.208-0.915-1.598 0.305-2.207 0.914zM19.207 3.207c0.219-0.219 0.504-0.328 0.793-0.328s0.574 0.109 0.793 0.328 0.328 0.504 0.328 0.793-0.109 0.574-0.328 0.793l-9.304 9.304-2.114 0.529 0.529-2.114z"></path> </symbol> + <symbol id="icon-edit-2" viewBox="0 0 24 24"> + <path d="M16.293 2.293l-13.5 13.5c-0.117 0.116-0.21 0.268-0.258 0.444l-1.5 5.5c-0.046 0.163-0.049 0.346 0 0.526 0.145 0.533 0.695 0.847 1.228 0.702l5.5-1.5c0.159-0.042 0.315-0.129 0.444-0.258l13.5-13.5c0.747-0.747 1.121-1.729 1.121-2.707s-0.374-1.96-1.121-2.707-1.729-1.121-2.707-1.121-1.96 0.374-2.707 1.121zM17.707 3.707c0.357-0.357 0.824-0.535 1.293-0.535s0.936 0.178 1.293 0.536 0.535 0.823 0.535 1.292-0.178 0.936-0.535 1.293l-13.312 13.312-3.556 0.97 0.97-3.555z"></path> + </symbol> <symbol id="icon-trash" viewBox="0 0 24 24"> <path d="M18 7v13c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-10c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-13zM17 5v-1c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-4c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v1h-4c-0.552 0-1 0.448-1 1s0.448 1 1 1h1v13c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h10c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-13h1c0.552 0 1-0.448 1-1s-0.448-1-1-1zM9 5v-1c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h4c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v1z"></path> </symbol> |