More additions to icons.

- Adding edit and trash icons for sidebars
- Adding pencil edit instead of modified.
This commit is contained in:
Dessalines 2020-03-03 10:14:50 -05:00
parent fe5bd0341a
commit b3b4b79775
5 changed files with 47 additions and 14 deletions

View File

@ -268,13 +268,16 @@ export class Main extends Component<any, MainState> {
<div class="card-body"> <div class="card-body">
<h5 class="mb-0">{`${this.state.siteRes.site.name}`}</h5> <h5 class="mb-0">{`${this.state.siteRes.site.name}`}</h5>
{this.canAdmin && ( {this.canAdmin && (
<ul class="list-inline mb-1 text-muted small font-weight-bold"> <ul class="list-inline mb-1 text-muted font-weight-bold">
<li className="list-inline-item"> <li className="list-inline-item-action">
<span <span
class="pointer" class="pointer"
onClick={linkEvent(this, this.handleEditClick)} 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> </span>
</li> </li>
</ul> </ul>

View File

@ -1,6 +1,6 @@
import { Component } from 'inferno'; import { Component } from 'inferno';
import moment from 'moment'; import moment from 'moment';
import { getMomentLanguage, setupTippy } from '../utils'; import { getMomentLanguage, setupTippy, capitalizeFirstLetter } from '../utils';
import { i18n } from '../i18next'; import { i18n } from '../i18next';
interface MomentTimeProps { interface MomentTimeProps {
@ -28,10 +28,15 @@ export class MomentTime extends Component<MomentTimeProps, any> {
if (this.props.data.updated) { if (this.props.data.updated) {
return ( return (
<span <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" 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> </span>
); );
} else { } else {

View File

@ -579,8 +579,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<span <span
className="pointer" className="pointer"
onClick={linkEvent(this, this.handleViewSource)} 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> </span>
</li> </li>
)} )}

View File

@ -13,6 +13,7 @@ import {
getUnixTime, getUnixTime,
pictshareAvatarThumbnail, pictshareAvatarThumbnail,
showAvatars, showAvatars,
setupTippy,
} from '../utils'; } from '../utils';
import { CommunityForm } from './community-form'; import { CommunityForm } from './community-form';
import { i18n } from '../i18next'; import { i18n } from '../i18next';
@ -46,6 +47,10 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
this.handleEditCancel = this.handleEditCancel.bind(this); this.handleEditCancel = this.handleEditCancel.bind(this);
} }
componentDidUpdate() {
setupTippy();
}
render() { render() {
return ( return (
<div> <div>
@ -84,26 +89,37 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
<Link className="text-muted" to={`/c/${community.name}`}> <Link className="text-muted" to={`/c/${community.name}`}>
/c/{community.name} /c/{community.name}
</Link> </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 && ( {this.canMod && (
<> <>
<li className="list-inline-item"> <li className="list-inline-item-action">
<span <span
class="pointer" class="pointer"
onClick={linkEvent(this, this.handleEditClick)} 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> </span>
</li> </li>
{this.amCreator && ( {this.amCreator && (
<li className="list-inline-item"> <li className="list-inline-item-action">
<span <span
class="pointer" class="pointer"
onClick={linkEvent(this, this.handleDeleteClick)} onClick={linkEvent(this, this.handleDeleteClick)}
data-tippy-content={
!community.deleted
? i18n.t('delete')
: i18n.t('restore')
}
> >
{!community.deleted <svg
? i18n.t('delete') class={`icon icon-inline ${community.deleted &&
: i18n.t('restore')} 'text-danger'}`}
>
<use xlinkHref="#icon-trash"></use>
</svg>
</span> </span>
</li> </li>
)} )}

View File

@ -42,6 +42,9 @@ export class Symbols extends Component<any, any> {
<symbol id="icon-edit" viewBox="0 0 24 24"> <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> <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>
<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"> <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> <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> </symbol>