mirror of
https://github.com/irislib/iris-messenger.git
synced 2024-09-20 01:56:33 +00:00
wip block button, v1.6.1
This commit is contained in:
parent
da57b3cf49
commit
ebf0ce96b0
@ -1408,32 +1408,39 @@ form.public {
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.follow {
|
.follow, .block {
|
||||||
min-width: 110px;
|
min-width: 110px;
|
||||||
transition: background-color 0.1s ease;
|
transition: background-color 0.1s ease;
|
||||||
padding: 5px 20px;
|
padding: 5px 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.follow.following {
|
.block.blocked, .follow.following {
|
||||||
background-color: var(--notify);
|
background-color: var(--notify);
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
border: var(--button-border-size) solid var(--notify);
|
border: var(--button-border-size) solid var(--notify);
|
||||||
}
|
}
|
||||||
|
|
||||||
.follow.following:hover {
|
.block.blocked {
|
||||||
background-color: var(--warning-background);
|
background-color: var(--warning-background);
|
||||||
border-color: var(--warning-background);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.follow .hover {
|
.block.blocked:hover {
|
||||||
|
background-color: var(--notify);
|
||||||
|
}
|
||||||
|
|
||||||
|
.follow.following:hover {
|
||||||
|
background-color: var(--warning-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.block .hover, .follow .hover {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.follow.following:hover .hover {
|
.block.blocked:hover .hover, .follow.following:hover .hover {
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.follow.following:hover .nonhover {
|
.block.blocked:hover .nonhover, .follow.following:hover .nonhover {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -12,6 +12,7 @@ let onlineTimeout;
|
|||||||
let ourActivity;
|
let ourActivity;
|
||||||
let hasFollowers;
|
let hasFollowers;
|
||||||
const follows = {};
|
const follows = {};
|
||||||
|
const blocks = {};
|
||||||
const channels = window.channels = {};
|
const channels = window.channels = {};
|
||||||
|
|
||||||
const DEFAULT_SETTINGS = {
|
const DEFAULT_SETTINGS = {
|
||||||
@ -50,7 +51,8 @@ function getFollowsFn(callback, k, maxDepth = 2, currentDepth = 1) {
|
|||||||
|
|
||||||
addFollow(k, currentDepth - 1);
|
addFollow(k, currentDepth - 1);
|
||||||
|
|
||||||
State.public.user(k).get('follow').map().once((isFollowing, followedKey) => { // TODO: .on for unfollow
|
State.public.user(k).get('follow').map().on((isFollowing, followedKey) => { // TODO: .on for unfollow
|
||||||
|
if (follows[followedKey] === isFollowing) { return; }
|
||||||
if (isFollowing) {
|
if (isFollowing) {
|
||||||
addFollow(followedKey, currentDepth, k);
|
addFollow(followedKey, currentDepth, k);
|
||||||
if (currentDepth < maxDepth) {
|
if (currentDepth < maxDepth) {
|
||||||
@ -137,6 +139,11 @@ function login(k) {
|
|||||||
State.local.get('follows').put({a:null});
|
State.local.get('follows').put({a:null});
|
||||||
Notifications.init();
|
Notifications.init();
|
||||||
State.local.get('loggedIn').put(true);
|
State.local.get('loggedIn').put(true);
|
||||||
|
State.public.get('block').map().on((isBlocked, user) => {
|
||||||
|
blocks[user] = isBlocked;
|
||||||
|
isBlocked && (follows[user] = null);
|
||||||
|
State.local.get('follows').get(user).put(isBlocked);
|
||||||
|
});
|
||||||
getFollowsFn((k, info) => {
|
getFollowsFn((k, info) => {
|
||||||
State.local.get('follows').get(k).put(true);
|
State.local.get('follows').get(k).put(true);
|
||||||
if (!hasFollowers && k === getPubKey() && info.followers.size) {
|
if (!hasFollowers && k === getPubKey() && info.followers.size) {
|
||||||
|
@ -8,21 +8,30 @@ class FollowButton extends Component {
|
|||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
this.eventListeners = {};
|
this.eventListeners = {};
|
||||||
|
this.key = 'follow';
|
||||||
|
this.activeClass = 'following';
|
||||||
|
this.hoverAction = 'unfollow';
|
||||||
}
|
}
|
||||||
|
|
||||||
onClick(e) {
|
onClick(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const follow = !this.state.following;
|
const value = !this.state[this.key];
|
||||||
State.public.user().get('follow').get(this.props.id).put(follow);
|
if (value && this.key === 'follow') {
|
||||||
if (follow) {
|
|
||||||
Session.newChannel(this.props.id);
|
Session.newChannel(this.props.id);
|
||||||
|
State.public.user().get('block').get(this.props.id).put(false);
|
||||||
}
|
}
|
||||||
|
if (value && this.key === 'block') {
|
||||||
|
State.public.user().get('follow').get(this.props.id).put(false);
|
||||||
|
}
|
||||||
|
State.public.user().get(this.key).get(this.props.id).put(value);
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
State.public.user().get('follow').get(this.props.id).on((following, a, b, e) => {
|
State.public.user().get(this.key).get(this.props.id).on((value, a, b, e) => {
|
||||||
this.setState({following});
|
const s = {};
|
||||||
this.eventListeners['follow'] = e;
|
s[this.key] = value;
|
||||||
|
this.setState(s);
|
||||||
|
this.eventListeners[this.key] = e;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -32,9 +41,9 @@ class FollowButton extends Component {
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
return html`
|
return html`
|
||||||
<button class="follow ${this.state.following ? 'following' : ''}" onClick=${e => this.onClick(e)}>
|
<button class="${this.key} ${this.state[this.key] ? this.activeClass : ''}" onClick=${e => this.onClick(e)}>
|
||||||
<span class="nonhover">${this.state.following ? t('following') : t('follow')}</span>
|
<span class="nonhover">${this.state[this.key] ? t(this.activeClass) : t(this.key)}</span>
|
||||||
<span class="hover">${t('unfollow')}</span>
|
<span class="hover">${t(this.hoverAction)}</span>
|
||||||
</button>
|
</button>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
@ -15,7 +15,7 @@ class SearchBox extends Component {
|
|||||||
this.state = {results:[]};
|
this.state = {results:[]};
|
||||||
this.debouncedIndexAndSearch = _.debounce(() => {
|
this.debouncedIndexAndSearch = _.debounce(() => {
|
||||||
const options = {keys: ['name'], includeScore: true, includeMatches: true, threshold: 0.3};
|
const options = {keys: ['name'], includeScore: true, includeMatches: true, threshold: 0.3};
|
||||||
this.fuse = new Fuse(Object.values(Session.getFollows()), options);
|
this.fuse = new Fuse(Object.values(Session.getFollows()), options); // TODO: this gets reinitialized with Header on each view change. slow?
|
||||||
this.search();
|
this.search();
|
||||||
}, 200);
|
}, 200);
|
||||||
}
|
}
|
||||||
|
@ -19,7 +19,7 @@ class About extends View {
|
|||||||
<li><b>Available</b>: It works offline-first and is not dependent on any single centrally managed server. Users can even connect directly to each other.</li>
|
<li><b>Available</b>: It works offline-first and is not dependent on any single centrally managed server. Users can even connect directly to each other.</li>
|
||||||
</ul>
|
</ul>
|
||||||
<p>Released under MIT license. Code: <a href="https://github.com/irislib/iris-messenger">Github</a>.</p>
|
<p>Released under MIT license. Code: <a href="https://github.com/irislib/iris-messenger">Github</a>.</p>
|
||||||
<p><small>Version 1.6.0</small></p>
|
<p><small>Version 1.6.1</small></p>
|
||||||
|
|
||||||
${iris.util.isElectron ? '' : html`
|
${iris.util.isElectron ? '' : html`
|
||||||
<div id="desktop-application-about">
|
<div id="desktop-application-about">
|
||||||
|
@ -52,7 +52,7 @@ class Chat extends View {
|
|||||||
this.unsubscribe();
|
this.unsubscribe();
|
||||||
this.sortedMessages = [];
|
this.sortedMessages = [];
|
||||||
this.participants = {};
|
this.participants = {};
|
||||||
this.setState({sortedMessages: this.sortedMessages, participants: this.participants});
|
this.setState({sortedMessages: this.sortedMessages, participants: this.participants, sidebarOpen: false});
|
||||||
this.iv = null;
|
this.iv = null;
|
||||||
this.chat = null;
|
this.chat = null;
|
||||||
const go = () => {
|
const go = () => {
|
||||||
@ -218,7 +218,7 @@ class Chat extends View {
|
|||||||
<div class="chat-message-form"><${MessageForm} activeChat=${this.props.id} onSubmit=${() => this.scrollDown()}/></div>
|
<div class="chat-message-form"><${MessageForm} activeChat=${this.props.id} onSubmit=${() => this.scrollDown()}/></div>
|
||||||
`: ''}
|
`: ''}
|
||||||
</div>
|
</div>
|
||||||
${this.props.id && this.props.id.length < 40 ? html`
|
${this.props.id && this.props.id !== 'new' && this.props.id.length < 40 ? html`
|
||||||
<div class="participant-list">
|
<div class="participant-list">
|
||||||
${this.state.participants ? Object.keys(this.state.participants).map(k =>
|
${this.state.participants ? Object.keys(this.state.participants).map(k =>
|
||||||
html`
|
html`
|
||||||
|
@ -9,6 +9,7 @@ import { route } from '../lib/preact-router.es.js';
|
|||||||
import SafeImg from '../components/SafeImg.js';
|
import SafeImg from '../components/SafeImg.js';
|
||||||
import CopyButton from '../components/CopyButton.js';
|
import CopyButton from '../components/CopyButton.js';
|
||||||
import FollowButton from '../components/FollowButton.js';
|
import FollowButton from '../components/FollowButton.js';
|
||||||
|
import BlockButton from '../components/BlockButton.js';
|
||||||
import MessageFeed from '../components/MessageFeed.js';
|
import MessageFeed from '../components/MessageFeed.js';
|
||||||
import Identicon from '../components/Identicon.js';
|
import Identicon from '../components/Identicon.js';
|
||||||
import Name from '../components/Name.js';
|
import Name from '../components/Name.js';
|
||||||
@ -240,6 +241,7 @@ class Profile extends View {
|
|||||||
${this.isMyProfile ? '' : html`
|
${this.isMyProfile ? '' : html`
|
||||||
<button class="show-settings" onClick=${() => this.onClickSettings()}>${t('settings')}</button>
|
<button class="show-settings" onClick=${() => this.onClickSettings()}>${t('settings')}</button>
|
||||||
`}
|
`}
|
||||||
|
${followable ? html`<${BlockButton} id=${this.props.id}/>` : ''}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -280,7 +282,6 @@ class Profile extends View {
|
|||||||
<hr/>
|
<hr/>
|
||||||
<p>
|
<p>
|
||||||
<button class="delete-chat" onClick=${() => deleteChat(this.props.id)}>${t('delete_chat')}</button>
|
<button class="delete-chat" onClick=${() => deleteChat(this.props.id)}>${t('delete_chat')}</button>
|
||||||
<!-- <button class="block-user">${t('block_user')}</button> -->
|
|
||||||
</p>
|
</p>
|
||||||
<hr/>
|
<hr/>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user