mirror of
https://github.com/irislib/iris-messenger.git
synced 2024-09-19 17:46: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;
|
||||
}
|
||||
|
||||
.follow {
|
||||
.follow, .block {
|
||||
min-width: 110px;
|
||||
transition: background-color 0.1s ease;
|
||||
padding: 5px 20px;
|
||||
}
|
||||
|
||||
.follow.following {
|
||||
.block.blocked, .follow.following {
|
||||
background-color: var(--notify);
|
||||
color: var(--text-color);
|
||||
border: var(--button-border-size) solid var(--notify);
|
||||
}
|
||||
|
||||
.follow.following:hover {
|
||||
.block.blocked {
|
||||
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;
|
||||
}
|
||||
|
||||
.follow.following:hover .hover {
|
||||
.block.blocked:hover .hover, .follow.following:hover .hover {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.follow.following:hover .nonhover {
|
||||
.block.blocked:hover .nonhover, .follow.following:hover .nonhover {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
@ -12,6 +12,7 @@ let onlineTimeout;
|
||||
let ourActivity;
|
||||
let hasFollowers;
|
||||
const follows = {};
|
||||
const blocks = {};
|
||||
const channels = window.channels = {};
|
||||
|
||||
const DEFAULT_SETTINGS = {
|
||||
@ -50,7 +51,8 @@ function getFollowsFn(callback, k, maxDepth = 2, 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) {
|
||||
addFollow(followedKey, currentDepth, k);
|
||||
if (currentDepth < maxDepth) {
|
||||
@ -137,6 +139,11 @@ function login(k) {
|
||||
State.local.get('follows').put({a:null});
|
||||
Notifications.init();
|
||||
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) => {
|
||||
State.local.get('follows').get(k).put(true);
|
||||
if (!hasFollowers && k === getPubKey() && info.followers.size) {
|
||||
|
@ -8,21 +8,30 @@ class FollowButton extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.eventListeners = {};
|
||||
this.key = 'follow';
|
||||
this.activeClass = 'following';
|
||||
this.hoverAction = 'unfollow';
|
||||
}
|
||||
|
||||
onClick(e) {
|
||||
e.preventDefault();
|
||||
const follow = !this.state.following;
|
||||
State.public.user().get('follow').get(this.props.id).put(follow);
|
||||
if (follow) {
|
||||
const value = !this.state[this.key];
|
||||
if (value && this.key === 'follow') {
|
||||
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() {
|
||||
State.public.user().get('follow').get(this.props.id).on((following, a, b, e) => {
|
||||
this.setState({following});
|
||||
this.eventListeners['follow'] = e;
|
||||
State.public.user().get(this.key).get(this.props.id).on((value, a, b, e) => {
|
||||
const s = {};
|
||||
s[this.key] = value;
|
||||
this.setState(s);
|
||||
this.eventListeners[this.key] = e;
|
||||
});
|
||||
}
|
||||
|
||||
@ -32,9 +41,9 @@ class FollowButton extends Component {
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<button class="follow ${this.state.following ? 'following' : ''}" onClick=${e => this.onClick(e)}>
|
||||
<span class="nonhover">${this.state.following ? t('following') : t('follow')}</span>
|
||||
<span class="hover">${t('unfollow')}</span>
|
||||
<button class="${this.key} ${this.state[this.key] ? this.activeClass : ''}" onClick=${e => this.onClick(e)}>
|
||||
<span class="nonhover">${this.state[this.key] ? t(this.activeClass) : t(this.key)}</span>
|
||||
<span class="hover">${t(this.hoverAction)}</span>
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
|
@ -15,7 +15,7 @@ class SearchBox extends Component {
|
||||
this.state = {results:[]};
|
||||
this.debouncedIndexAndSearch = _.debounce(() => {
|
||||
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();
|
||||
}, 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>
|
||||
</ul>
|
||||
<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`
|
||||
<div id="desktop-application-about">
|
||||
|
@ -52,7 +52,7 @@ class Chat extends View {
|
||||
this.unsubscribe();
|
||||
this.sortedMessages = [];
|
||||
this.participants = {};
|
||||
this.setState({sortedMessages: this.sortedMessages, participants: this.participants});
|
||||
this.setState({sortedMessages: this.sortedMessages, participants: this.participants, sidebarOpen: false});
|
||||
this.iv = null;
|
||||
this.chat = null;
|
||||
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>
|
||||
${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">
|
||||
${this.state.participants ? Object.keys(this.state.participants).map(k =>
|
||||
html`
|
||||
|
@ -9,6 +9,7 @@ import { route } from '../lib/preact-router.es.js';
|
||||
import SafeImg from '../components/SafeImg.js';
|
||||
import CopyButton from '../components/CopyButton.js';
|
||||
import FollowButton from '../components/FollowButton.js';
|
||||
import BlockButton from '../components/BlockButton.js';
|
||||
import MessageFeed from '../components/MessageFeed.js';
|
||||
import Identicon from '../components/Identicon.js';
|
||||
import Name from '../components/Name.js';
|
||||
@ -240,6 +241,7 @@ class Profile extends View {
|
||||
${this.isMyProfile ? '' : html`
|
||||
<button class="show-settings" onClick=${() => this.onClickSettings()}>${t('settings')}</button>
|
||||
`}
|
||||
${followable ? html`<${BlockButton} id=${this.props.id}/>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -280,7 +282,6 @@ class Profile extends View {
|
||||
<hr/>
|
||||
<p>
|
||||
<button class="delete-chat" onClick=${() => deleteChat(this.props.id)}>${t('delete_chat')}</button>
|
||||
<!-- <button class="block-user">${t('block_user')}</button> -->
|
||||
</p>
|
||||
<hr/>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user