FediMovies/fedimovies-web
1
1
Fork 0
Code Pull requests Activity

Replace svg imports with static paths

Browse source
This commit is contained in:
silverpill 2023-03-28 17:49:28 +00:00
parent 5cb76f9dbe
commit 4215c11a70
17 changed files with 74 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
CHANGELOG.md
View file

@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
## [Unreleased] ## [Unreleased]
### Changed
- Don't revoke auth token when handling timeline loading error.
## [1.18.0] - 2023-03-21 ## [1.18.0] - 2023-03-21
### Added ### Added

4
src/components/CryptoAddress.vue
View file

@ -2,7 +2,7 @@
<div class="crypto-address"> <div class="crypto-address">
<input :value="address" readonly> <input :value="address" readonly>
<button class="copy-btn" title="Copy address" @click="copyAddress()"> <button class="copy-btn" title="Copy address" @click="copyAddress()">
<img :src="require('@/assets/forkawesome/files-o.svg')"> <img src="@/assets/forkawesome/files-o.svg">
</button> </button>
</div> </div>
</template> </template>
@ -50,6 +50,8 @@ function copyAddress() {
img { img {
filter: $link-colorizer; filter: $link-colorizer;
height: 100%; height: 100%;
object-fit: contain;
width: 100%;
} }
&:hover img { &:hover img {

30
src/components/Post.vue
View file

@ -33,7 +33,7 @@
@mouseleave="highlight(null)" @mouseleave="highlight(null)"
@click.prevent="scrollTo(post.in_reply_to_id)" @click.prevent="scrollTo(post.in_reply_to_id)"
> >
<img :src="require('@/assets/tabler/corner-left-up.svg')"> <img src="@/assets/tabler/corner-left-up.svg">
</a> </a>
<span <span
class="icon icon-small" class="icon icon-small"
@ -102,7 +102,7 @@
title="View replies" title="View replies"
:to="{ name: 'post', params: { postId: post.id }}" :to="{ name: 'post', params: { postId: post.id }}"
> >
<img :src="require('@/assets/forkawesome/comment-o.svg')"> <img src="@/assets/forkawesome/comment-o.svg">
<span>{{ post.replies_count }}</span> <span>{{ post.replies_count }}</span>
</router-link> </router-link>
<button <button
@ -111,11 +111,11 @@
title="Reply" title="Reply"
@click="commentFormVisible = !commentFormVisible" @click="commentFormVisible = !commentFormVisible"
> >
<img :src="require('@/assets/forkawesome/comment-o.svg')"> <img src="@/assets/forkawesome/comment-o.svg">
<span>{{ post.replies_count }}</span> <span>{{ post.replies_count }}</span>
</button> </button>
<span v-else class="icon"> <span v-else class="icon">
<img :src="require('@/assets/forkawesome/comment-o.svg')"> <img src="@/assets/forkawesome/comment-o.svg">
<span>{{ post.replies_count }}</span> <span>{{ post.replies_count }}</span>
</span> </span>
<button <button
@ -125,11 +125,11 @@
title="Repost" title="Repost"
@click="toggleRepost()" @click="toggleRepost()"
> >
<img :src="require('@/assets/feather/repeat.svg')"> <img src="@/assets/feather/repeat.svg">
<span>{{ post.reblogs_count }}</span> <span>{{ post.reblogs_count }}</span>
</button> </button>
<span v-else class="icon"> <span v-else class="icon">
<img :src="require('@/assets/feather/repeat.svg')"> <img src="@/assets/feather/repeat.svg">
<span>{{ post.reblogs_count }}</span> <span>{{ post.reblogs_count }}</span>
</span> </span>
<button <button
@ -139,11 +139,11 @@
title="Like" title="Like"
@click="toggleLike()" @click="toggleLike()"
> >
<img :src="require('@/assets/forkawesome/thumbs-o-up.svg')"> <img src="@/assets/forkawesome/thumbs-o-up.svg">
<span>{{ post.favourites_count }}</span> <span>{{ post.favourites_count }}</span>
</button> </button>
<span v-else class="icon"> <span v-else class="icon">
<img :src="require('@/assets/forkawesome/thumbs-o-up.svg')"> <img src="@/assets/forkawesome/thumbs-o-up.svg">
<span>{{ post.favourites_count }}</span> <span>{{ post.favourites_count }}</span>
</span> </span>
<a <a
@ -154,7 +154,7 @@
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
> >
<img :src="require('@/assets/ipfs.svg')"> <img src="@/assets/ipfs.svg">
</a> </a>
<router-link <router-link
v-if="isTokenized()" v-if="isTokenized()"
@ -162,14 +162,14 @@
title="View token" title="View token"
:to="{ name: 'post-overlay', params: { postId: post.id }}" :to="{ name: 'post-overlay', params: { postId: post.id }}"
> >
<img :src="require('@/assets/forkawesome/diamond.svg')"> <img src="@/assets/forkawesome/diamond.svg">
</router-link> </router-link>
<a <a
v-if="isWaitingForToken" v-if="isWaitingForToken"
class="icon tokenize-progress" class="icon tokenize-progress"
title="Tokenizing..." title="Tokenizing..."
> >
<img :src="require('@/assets/forkawesome/diamond.svg')"> <img src="@/assets/forkawesome/diamond.svg">
</a> </a>
<div <div
class="dropdown-menu-wrapper" class="dropdown-menu-wrapper"
@ -177,7 +177,7 @@
v-click-away="hideMenu" v-click-away="hideMenu"
> >
<button class="icon" title="More" @click="toggleMenu()"> <button class="icon" title="More" @click="toggleMenu()">
<img :src="require('@/assets/feather/more-horizontal.svg')"> <img src="@/assets/feather/more-horizontal.svg">
</button> </button>
<menu v-if="menuVisible" class="dropdown-menu"> <menu v-if="menuVisible" class="dropdown-menu">
<li v-if="canSaveToIpfs()"> <li v-if="canSaveToIpfs()">
@ -186,7 +186,7 @@
title="Save to IPFS" title="Save to IPFS"
@click="hideMenu(); saveToIpfs()" @click="hideMenu(); saveToIpfs()"
> >
<img :src="require('@/assets/ipfs.svg')"> <img src="@/assets/ipfs.svg">
<span>Save to IPFS</span> <span>Save to IPFS</span>
</button> </button>
</li> </li>
@ -196,7 +196,7 @@
title="Mint NFT" title="Mint NFT"
@click="hideMenu(); onMintToken()" @click="hideMenu(); onMintToken()"
> >
<img :src="require('@/assets/forkawesome/diamond.svg')"> <img src="@/assets/forkawesome/diamond.svg">
<span>Mint NFT</span> <span>Mint NFT</span>
</button> </button>
</li> </li>
@ -206,7 +206,7 @@
title="Delete post" title="Delete post"
@click="hideMenu(); onDeletePost()" @click="hideMenu(); onDeletePost()"
> >
<img :src="require('@/assets/feather/trash.svg')"> <img src="@/assets/feather/trash.svg">
<span>Delete post</span> <span>Delete post</span>
</button> </button>
</li> </li>

8
src/components/PostEditor.vue
View file

@ -35,7 +35,7 @@
title="Remove attachment" title="Remove attachment"
@click.prevent="removeAttachment(index)" @click.prevent="removeAttachment(index)"
> >
<img :src="require('@/assets/feather/x.svg')"> <img src="@/assets/feather/x.svg">
</button> </button>
<img v-if="attachment.type === 'image'" :src="attachment.url"> <img v-if="attachment.type === 'image'" :src="attachment.url">
<div v-else class="placeholder">{{ attachment.url }}</div> <div v-else class="placeholder">{{ attachment.url }}</div>
@ -49,7 +49,7 @@
:disabled="!canAttachFile()" :disabled="!canAttachFile()"
@click="selectAttachment()" @click="selectAttachment()"
> >
<img :src="require('@/assets/feather/paperclip.svg')"> <img src="@/assets/feather/paperclip.svg">
<input <input
type="file" type="file"
ref="attachmentUploadInputRef" ref="attachmentUploadInputRef"
@ -95,8 +95,8 @@
title="Toggle preview" title="Toggle preview"
@click="togglePreview()" @click="togglePreview()"
> >
<img v-if="preview === null" :src="require('@/assets/feather/eye.svg')"> <img v-if="preview === null" src="@/assets/feather/eye.svg">
<img v-else :src="require('@/assets/feather/eye-off.svg')"> <img v-else src="@/assets/feather/eye-off.svg">
</button> </button>
<div class="character-counter" title="Characters left"> <div class="character-counter" title="Characters left">
{{ getCharacterCount() }} {{ getCharacterCount() }}

2
src/components/PostOrRepost.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<template v-if="post.reblog"> <template v-if="post.reblog">
<div class="action"> <div class="action">
<img :src="require('@/assets/feather/repeat.svg')"> <img src="@/assets/feather/repeat.svg">
<router-link <router-link
:to="{ name: 'profile-by-acct', params: { acct: post.account.acct }}" :to="{ name: 'profile-by-acct', params: { acct: post.account.acct }}"
:title="getActorAddress(post.account)" :title="getActorAddress(post.account)"

4
src/components/Search.vue
View file

@ -2,10 +2,10 @@
<form class="search" @submit.prevent="search()"> <form class="search" @submit.prevent="search()">
<input type="search" placeholder="Search..." v-model="q"> <input type="search" placeholder="Search..." v-model="q">
<button v-if="q" type="button" @click="clear()"> <button v-if="q" type="button" @click="clear()">
<img :src="require('@/assets/feather/delete.svg')"> <img src="@/assets/feather/delete.svg">
</button> </button>
<button type="submit" :disabled="!q"> <button type="submit" :disabled="!q">
<img :src="require('@/assets/feather/search.svg')"> <img src="@/assets/feather/search.svg">
</button> </button>
</form> </form>
</template> </template>

24
src/components/Sidebar.vue
View file

@ -2,17 +2,17 @@
<div v-if="isUserAuthenticated()" class="sidebar"> <div v-if="isUserAuthenticated()" class="sidebar">
<router-link class="sidebar-link" to="/notifications"> <router-link class="sidebar-link" to="/notifications">
<div class="icon"> <div class="icon">
<img :src="require('@/assets/feather/bell.svg')"> <img src="@/assets/feather/bell.svg">
<div v-if="unreadNotificationCount > 0" class="icon-badge">{{ unreadNotificationCount }}</div> <div v-if="unreadNotificationCount > 0" class="icon-badge">{{ unreadNotificationCount }}</div>
</div> </div>
<span>Notifications</span> <span>Notifications</span>
</router-link> </router-link>
<router-link class="sidebar-link" to="/local"> <router-link class="sidebar-link" to="/local">
<div class="icon"><img :src="require('@/assets/feather/server.svg')"></div> <div class="icon"><img src="@/assets/feather/server.svg"></div>
<span>Local</span> <span>Local</span>
</router-link> </router-link>
<router-link class="sidebar-link" to="/profile-directory"> <router-link class="sidebar-link" to="/profile-directory">
<div class="icon"><img :src="require('@/assets/feather/users.svg')"></div> <div class="icon"><img src="@/assets/feather/users.svg"></div>
<span>Profile directory</span> <span>Profile directory</span>
</router-link> </router-link>
<router-link <router-link
@ -20,19 +20,19 @@
class="sidebar-link" class="sidebar-link"
:to="{ name: 'subscriptions-settings' }" :to="{ name: 'subscriptions-settings' }"
> >
<div class="icon"><img :src="require('@/assets/tabler/coin.svg')"></div> <div class="icon"><img src="@/assets/tabler/coin.svg"></div>
<span>Subscriptions</span> <span>Subscriptions</span>
</router-link> </router-link>
<router-link class="sidebar-link" :to="{ name: 'settings' }"> <router-link class="sidebar-link" :to="{ name: 'settings' }">
<div class="icon"><img :src="require('@/assets/feather/settings.svg')"></div> <div class="icon"><img src="@/assets/feather/settings.svg"></div>
<span>Settings</span> <span>Settings</span>
</router-link> </router-link>
<router-link class="sidebar-link" to="/about"> <router-link class="sidebar-link" to="/about">
<div class="icon"><img :src="require('@/assets/feather/help-circle.svg')"></div> <div class="icon"><img src="@/assets/feather/help-circle.svg"></div>
<span>About</span> <span>About</span>
</router-link> </router-link>
<a class="sidebar-link" @click="logout()"> <a class="sidebar-link" @click="logout()">
<div class="icon"><img :src="require('@/assets/feather/log-out.svg')"></div> <div class="icon"><img src="@/assets/feather/log-out.svg"></div>
<span>Logout</span> <span>Logout</span>
</a> </a>
</div> </div>
@ -92,6 +92,8 @@ async function logout() {
@import "../styles/layout"; @import "../styles/layout";
@import "../styles/theme"; @import "../styles/theme";
$sidebar-icon-size: 20px;
.sidebar { .sidebar {
background-color: $background-color; background-color: $background-color;
box-sizing: border-box; box-sizing: border-box;
@ -112,16 +114,18 @@ async function logout() {
font-size: 18px; font-size: 18px;
.icon { .icon {
height: 20px; /* margin + padding + width ~= avatar-size */
height: $sidebar-icon-size;
margin-left: 8px; margin-left: 8px;
margin-right: 10px; margin-right: 10px;
position: relative; position: relative;
text-align: center; text-align: center;
width: 25px; width: $sidebar-icon-size + 5px;
img { img {
filter: $link-colorizer; filter: $link-colorizer;
height: 100%; height: $sidebar-icon-size;
width: $sidebar-icon-size;
} }
.icon-badge { .icon-badge {

3
src/components/SidebarLayout.vue
View file

@ -7,7 +7,7 @@
:to="{ name: 'home' }" :to="{ name: 'home' }"
@click.prevent="showHomeTimeline()" @click.prevent="showHomeTimeline()"
> >
<img :src="require('@/assets/feather/home.svg')"> <img src="@/assets/feather/home.svg">
<span>Home</span> <span>Home</span>
</router-link> </router-link>
<search /> <search />
@ -112,6 +112,7 @@ header {
filter: $text-colorizer; filter: $text-colorizer;
height: 1.2em; height: 1.2em;
margin-right: 5px; margin-right: 5px;
width: 1.2em;
} }
span { span {

3
src/components/StaticPage.vue
View file

@ -2,7 +2,7 @@
<div class="page"> <div class="page">
<div class="page-content"> <div class="page-content">
<router-link class="back" to="/" title="Back"> <router-link class="back" to="/" title="Back">
<img :src="require('@/assets/feather/arrow-left.svg')"> <img src="@/assets/feather/arrow-left.svg">
</router-link> </router-link>
<h1 class="page-heading"><slot name="heading"></slot></h1> <h1 class="page-heading"><slot name="heading"></slot></h1>
<div class="static-text"><slot name="text"></slot></div> <div class="static-text"><slot name="text"></slot></div>
@ -35,6 +35,7 @@
img { img {
filter: $text-colorizer; filter: $text-colorizer;
height: 40px;
width: 40px; width: 40px;
} }
} }

4
src/components/SubscriptionEthereum.vue
View file

@ -11,7 +11,7 @@
<div class="wallet-address">{{ walletAddress ? walletAddress.toLowerCase() : '?' }}</div> <div class="wallet-address">{{ walletAddress ? walletAddress.toLowerCase() : '?' }}</div>
</component> </component>
<div class="separator"> <div class="separator">
<img :src="require('@/assets/feather/arrow-right.svg')"> <img src="@/assets/feather/arrow-right.svg">
</div> </div>
<router-link <router-link
class="profile-card" class="profile-card"
@ -77,7 +77,7 @@
</output> </output>
<span>{{ subscriptionConfig.tokenSymbol }}</span> <span>{{ subscriptionConfig.tokenSymbol }}</span>
<button @click.prevent="refreshTokenBalance()"> <button @click.prevent="refreshTokenBalance()">
<img :src="require('@/assets/feather/refresh-ccw.svg')"> <img src="@/assets/feather/refresh-ccw.svg">
</button> </button>
</div> </div>
</div> </div>

2
src/components/SubscriptionMonero.vue
View file

@ -10,7 +10,7 @@
<profile-display-name :profile="sender"></profile-display-name> <profile-display-name :profile="sender"></profile-display-name>
</component> </component>
<div class="separator"> <div class="separator">
<img :src="require('@/assets/feather/arrow-right.svg')"> <img src="@/assets/feather/arrow-right.svg">
</div> </div>
<router-link <router-link
class="profile-card" class="profile-card"

8
src/components/VisibilityIcon.vue
View file

@ -1,8 +1,8 @@
<template> <template>
<img v-if="visibility === 'public'" :src="require('@/assets/feather/globe.svg')"> <img v-if="visibility === 'public'" src="@/assets/feather/globe.svg">
<img v-else-if="visibility === 'private'" :src="require('@/assets/tabler/users.svg')"> <img v-else-if="visibility === 'private'" src="@/assets/tabler/users.svg">
<img v-else-if="visibility === 'subscribers'" :src="require('@/assets/tabler/coin.svg')"> <img v-else-if="visibility === 'subscribers'" src="@/assets/tabler/coin.svg">
<img v-else-if="visibility === 'direct'" :src="require('@/assets/forkawesome/envelope-o.svg')"> <img v-else-if="visibility === 'direct'" src="@/assets/forkawesome/envelope-o.svg">
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

3
src/views/LandingPage.vue
View file

@ -65,7 +65,7 @@
> >
</div> </div>
<div class="wallet-required" v-if="loginType === 'eip4361'"> <div class="wallet-required" v-if="loginType === 'eip4361'">
<img :src="require('@/assets/forkawesome/ethereum.svg')"> <img src="@/assets/forkawesome/ethereum.svg">
<router-link :to="{ name: 'ethereum' }">Ethereum Wallet</router-link> is required <router-link :to="{ name: 'ethereum' }">Ethereum Wallet</router-link> is required
</div> </div>
<button <button
@ -456,6 +456,7 @@ $text-color: #fff;
img { img {
filter: $btn-text-colorizer; filter: $btn-text-colorizer;
height: 1em; height: 1em;
width: 1em;
} }
a { a {

14
src/views/NotificationList.vue
View file

@ -7,16 +7,16 @@
:key="notification.id" :key="notification.id"
> >
<div class="action"> <div class="action">
<img v-if="notification.type === 'follow'" :src="require('@/assets/feather/user-plus.svg')"> <img v-if="notification.type === 'follow'" src="@/assets/feather/user-plus.svg">
<img v-else-if="notification.type === 'reply'" :src="require('@/assets/forkawesome/comment-o.svg')"> <img v-else-if="notification.type === 'reply'" src="@/assets/forkawesome/comment-o.svg">
<img v-else-if="notification.type === 'favourite'" :src="require('@/assets/forkawesome/thumbs-o-up.svg')"> <img v-else-if="notification.type === 'favourite'" src="@/assets/forkawesome/thumbs-o-up.svg">
<img v-else-if="notification.type === 'mention'" :src="require('@/assets/forkawesome/comment-o.svg')"> <img v-else-if="notification.type === 'mention'" src="@/assets/forkawesome/comment-o.svg">
<img v-else-if="notification.type === 'reblog'" :src="require('@/assets/feather/repeat.svg')"> <img v-else-if="notification.type === 'reblog'" src="@/assets/feather/repeat.svg">
<img <img
v-else-if="notification.type === 'subscription' || notification.type === 'subscription_expiration'" v-else-if="notification.type === 'subscription' || notification.type === 'subscription_expiration'"
:src="require('@/assets/tabler/coin.svg')" src="@/assets/tabler/coin.svg"
> >
<img v-else-if="notification.type === 'move'" :src="require('@/assets/feather/truck.svg')"> <img v-else-if="notification.type === 'move'" src="@/assets/feather/truck.svg">
<router-link <router-link
:title="getSenderInfo(notification)" :title="getSenderInfo(notification)"
:to="{ name: 'profile-by-acct', params: { acct: notification.account.acct } }" :to="{ name: 'profile-by-acct', params: { acct: notification.account.acct } }"

7
src/views/PostOverlay.vue
View file

@ -2,7 +2,7 @@
<div v-if="post && token" class="post-overlay wide"> <div v-if="post && token" class="post-overlay wide">
<div v-if="canGoBack()" class="back-btn-wrapper"> <div v-if="canGoBack()" class="back-btn-wrapper">
<a class="back-btn" title="Back" @click="goBack()"> <a class="back-btn" title="Back" @click="goBack()">
<img :src="require('@/assets/feather/arrow-left.svg')"> <img src="@/assets/feather/arrow-left.svg">
</a> </a>
</div> </div>
<div class="token"> <div class="token">
@ -28,7 +28,7 @@
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
> >
<img :src="require('@/assets/forkawesome/ethereum.svg')"> <img src="@/assets/forkawesome/ethereum.svg">
<div>0x{{ post.token_tx_id }}</div> <div>0x{{ post.token_tx_id }}</div>
</a> </a>
<a <a
@ -39,7 +39,7 @@
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
> >
<img :src="require('@/assets/ipfs.svg')"> <img src="@/assets/ipfs.svg">
<div>{{ post.ipfs_cid }}</div> <div>{{ post.ipfs_cid }}</div>
</a> </a>
<div class="created-at"> <div class="created-at">
@ -154,6 +154,7 @@ $page-width: $wide-content-width + $content-gap + $wide-sidebar-width;
img { img {
filter: $text-colorizer; filter: $text-colorizer;
height: 40px;
width: 40px; width: 40px;
} }
} }

6
src/views/Profile.vue
View file

@ -34,7 +34,7 @@
v-click-away="hideProfileMenu" v-click-away="hideProfileMenu"
> >
<button title="More" @click="toggleProfileMenu()"> <button title="More" @click="toggleProfileMenu()">
<img :src="require('@/assets/feather/more-vertical.svg')"> <img src="@/assets/feather/more-vertical.svg">
</button> </button>
<menu v-if="profileMenuVisible" class="dropdown-menu"> <menu v-if="profileMenuVisible" class="dropdown-menu">
<li v-if="!isLocalUser()"> <li v-if="!isLocalUser()">
@ -130,7 +130,7 @@
<img <img
v-if="profile.locked" v-if="profile.locked"
title="Manually approves followers" title="Manually approves followers"
:src="require('@/assets/forkawesome/lock.svg')" src="@/assets/forkawesome/lock.svg"
> >
</button> </button>
<button v-if="canUnfollow()" class="unfollow btn" @click="onUnfollow()"> <button v-if="canUnfollow()" class="unfollow btn" @click="onUnfollow()">
@ -171,7 +171,7 @@
<div class="value" v-html="field.value"></div> <div class="value" v-html="field.value"></div>
<div class="verified-icon" v-if="field.verified_at"> <div class="verified-icon" v-if="field.verified_at">
<img <img
:src="require('@/assets/forkawesome/check.svg')" src="@/assets/forkawesome/check.svg"
title="Verified" title="Verified"
> >
</div> </div>

6
src/views/ProfileForm.vue
View file

@ -60,7 +60,7 @@
title="Remove item" title="Remove item"
@click="removeExtraField(index)" @click="removeExtraField(index)"
> >
<img :src="require('@/assets/feather/x-circle.svg')"> <img src="@/assets/feather/x-circle.svg">
</a> </a>
</div> </div>
<button <button
@ -69,7 +69,7 @@
class="add-extra-field" class="add-extra-field"
@click="addExtraField()" @click="addExtraField()"
> >
<img :src="require('@/assets/feather/plus-circle.svg')"> <img src="@/assets/feather/plus-circle.svg">
Add new item Add new item
</button> </button>
</div> </div>
@ -271,6 +271,7 @@ async function save() {
filter: $link-hover-colorizer; filter: $link-hover-colorizer;
height: $icon-size; height: $icon-size;
vertical-align: middle; vertical-align: middle;
width: $icon-size;
} }
} }
@ -292,6 +293,7 @@ async function save() {
height: $icon-size; height: $icon-size;
margin-right: 5px; margin-right: 5px;
vertical-align: middle; vertical-align: middle;
width: $icon-size;
} }
&:hover img { &:hover img {