Trying to make the SSB client webapp tolerable. Middling success. Let me set some 'about' information. Tweak what information is shown where as I experiment. Mess with the feed logic.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@3714 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
2021-12-28 20:21:23 +00:00
parent 12ab2f4b85
commit 0f7472fa22
5 changed files with 63 additions and 30 deletions

View File

@@ -1,5 +1,11 @@
Vue.component('tf-user', {
data: function() { return {users: g_data.users, show_user_dialog: false, show_follow_dialog: false} },
data: function() { return {
users: g_data.users,
show_user_dialog: false,
show_follow_dialog: false,
edit_profile_name: null,
edit_profile_description: null,
} },
props: ['id'],
mounted: function() {
window.parent.postMessage({user: this.id}, '*');
@@ -22,29 +28,54 @@ Vue.component('tf-user', {
}
},
},
whoami: { get: function() { return g_data.whoami; } },
},
methods: {
save_profile: function() {
var message = {appendMessage: {
type: 'about',
about: this.id,
name: this.edit_profile_name,
description: this.edit_profile_description,
}};
window.parent.postMessage(message, '*');
},
},
template: `<span @click="show_user_dialog = true">
{{users[id] && users[id].name ? users[id].name : id}}
<md-tooltip v-if="users[id] && users[id].name">{{id}}</md-tooltip>
<md-dialog :md-active.sync="show_user_dialog">
<md-dialog-title>{{users[id] && users[id].name ? users[id].name : id}}</md-dialog-title>
<md-dialog-content v-if="users[id]">
<div v-if="users[id].image"><img :src="'/' + users[id].image + '/view'"></div>
<div v-if="users[id].name">{{id}}</div>
<div>{{users[id].description}}</div>
<div><md-switch v-model="following">Following</md-switch></div>
<md-list>
<md-subheader>Followers</md-subheader>
<md-list-item v-for="follower in (users[id] || []).followers" v-bind:key="'follower-' + follower">
<tf-user :id="follower"></tf-user>
</md-list-item>
<md-subheader>Following</md-subheader>
<md-list-item v-for="user in (users[id] || []).following" v-bind:key="'following-' + user">
<tf-user :id="user"></tf-user>
</md-list-item>
</md-list>
<md-dialog-content>
<div v-if="id == whoami">
<md-field>
<label>Name</label>
<md-input v-model="edit_profile_name"></md-input>
</md-field>
<md-field>
<label>Description</label>
<md-textarea v-model="edit_profile_description"></md-textarea>
</md-field>
</div>
<template v-if="users[id]">
<div v-if="users[id].image"><img :src="'/' + users[id].image + '/view'"></div>
<div v-if="users[id].name">{{id}}</div>
<div>{{users[id].description}}</div>
<div><md-switch v-model="following">Following</md-switch></div>
<md-list>
<md-subheader>Followers</md-subheader>
<md-list-item v-for="follower in (users[id] || []).followers" v-bind:key="'follower-' + follower">
<tf-user :id="follower"></tf-user>
</md-list-item>
<md-subheader>Following</md-subheader>
<md-list-item v-for="user in (users[id] || []).following" v-bind:key="'following-' + user">
<tf-user :id="user"></tf-user>
</md-list-item>
</md-list>
</template>
</md-dialog-content>
<md-dialog-actions>
<md-button @click="save_profile">Save Profile</md-button>
<md-button @click="show_user_dialog = false">Close</md-button>
</md-dialog-actions>
</md-dialog>