Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use cross icon for unfollow button

Browse Source
This commit is contained in:
James Lyne 2021-08-27 02:26:04 +01:00
parent a2b1bd148f
commit 116c9efa0d
3 changed files with 25 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/icons/cross.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="304.76" height="304.6" version="1.0" viewBox="0 0 228.57 228.45" xmlns="http://www.w3.org/2000/svg">
<path d="M16.682 0C12.719 0 8.756 1.52 5.719 4.556L4.554 5.72a15.47 15.47 0 0 0 0 21.924l86.578 86.578L4.554 200.8a15.47 15.47 0 0 0 0 21.924l1.165 1.165c3.037 3.036 7 4.556 10.963 4.556a15.45 15.45 0 0 0 10.96-4.556l86.646-86.644 86.643 86.644a15.468 15.468 0 0 0 21.923 0l1.165-1.165a15.47 15.47 0 0 0 0-21.924l-86.578-86.578 86.578-86.578a15.47 15.47 0 0 0 0-21.924l-1.165-1.164a15.468 15.468 0 0 0-21.923 0L114.288 91.2 27.642 4.556A15.45 15.45 0 0 0 16.682 0z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 592 B

23
src/components/sidebar/FollowTarget.vue
View File

@ -25,7 +25,9 @@
<span class="target__status" v-show="target.hidden">{{ messageHidden }}</span>
</span>
<button class="target__unfollow" type="button" :title="messageUnfollowTitle"
@click.prevent="unfollow">{{ messageUnfollow }}</button>
@click.prevent="unfollow" :aria-label="messageUnfollow">
<SvgIcon name="cross"></SvgIcon>
</button>
</div>
</section>
</template>
@ -37,9 +39,12 @@ import {computed, defineComponent, onMounted, ref, watch} from "@vue/runtime-cor
import {getMinecraftHead} from '@/util';
import defaultImage from '@/assets/images/player_face.png';
import {LiveAtlasPlayer} from "@/index";
import SvgIcon from "@/components/SvgIcon.vue";
import "@/assets/icons/cross.svg";
export default defineComponent({
name: 'FollowTarget',
components: {SvgIcon},
props: {
target: {
type: Object as () => LiveAtlasPlayer,
@ -97,8 +102,20 @@ export default defineComponent({
.target__unfollow {
position: absolute;
top: 2rem;
right: 1.5rem;
top: 1.5rem;
right: 1rem;
width: 2.5rem;
height: 2.5rem;
&:before {
content: '';
position: absolute;
display: block;
top: -1rem;
right: -1rem;
bottom: -1rem;
left: -1rem;
}
}
.target__info {

2
src/scss/_mixins.scss
View File

@ -51,6 +51,8 @@
position: absolute;
width: calc(100% - 1.6rem);
height: calc(100% - 1.6rem);
min-width: 1.5rem;
min-height: 1.5rem;
top: 0;
right: 0;
bottom: 0;