WIP PWA for Grain
feat: add settings icon to own profile header
+39
-1
+39
-1
src/components/organisms/grain-profile-header.js
+39
-1
src/components/organisms/grain-profile-header.js
···
1
1
import { LitElement, html, css } from 'lit';
2
+
import { router } from '../../router.js';
3
+
import { auth } from '../../services/auth.js';
2
4
import '../atoms/grain-avatar.js';
5
+
import '../atoms/grain-icon.js';
3
6
import '../molecules/grain-profile-stats.js';
4
7
5
8
export class GrainProfileHeader extends LitElement {
6
9
static properties = {
7
10
profile: { type: Object },
8
-
_showFullscreen: { state: true }
11
+
_showFullscreen: { state: true },
12
+
_user: { state: true }
9
13
};
10
14
11
15
static styles = css`
···
74
78
border-radius: 50%;
75
79
object-fit: cover;
76
80
}
81
+
.settings-button {
82
+
background: none;
83
+
border: none;
84
+
padding: 0;
85
+
cursor: pointer;
86
+
color: var(--color-text-secondary);
87
+
margin-left: auto;
88
+
}
77
89
`;
78
90
79
91
constructor() {
80
92
super();
81
93
this._showFullscreen = false;
94
+
this._user = auth.user;
95
+
}
96
+
97
+
connectedCallback() {
98
+
super.connectedCallback();
99
+
this._unsubscribe = auth.subscribe(user => {
100
+
this._user = user;
101
+
});
102
+
}
103
+
104
+
disconnectedCallback() {
105
+
super.disconnectedCallback();
106
+
this._unsubscribe?.();
107
+
}
108
+
109
+
get #isOwnProfile() {
110
+
return this._user?.handle && this._user.handle === this.profile?.handle;
111
+
}
112
+
113
+
#goToSettings() {
114
+
router.push('/settings');
82
115
}
83
116
84
117
#openFullscreen() {
···
114
147
followerCount=${followerCount || 0}
115
148
followingCount=${followingCount || 0}
116
149
></grain-profile-stats>
150
+
${this.#isOwnProfile ? html`
151
+
<button class="settings-button" @click=${this.#goToSettings}>
152
+
<grain-icon name="gear" size="20"></grain-icon>
153
+
</button>
154
+
` : ''}
117
155
</div>
118
156
<div class="info">
119
157
<div class="handle">@${handle}</div>