Redesign share button
This commit is contained in:
Cadence Ember
parent
6cb99b2d2e
commit
00269fbce1
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="129.158" height="129.158" viewBox="0 0 34.173 34.173"><g transform="translate(26.909 -78.793)" paint-order="fill markers stroke"><circle cx="-9.822" cy="95.88" r="16.557" fill="none" stroke="#ddd" stroke-width="1.058" stroke-linecap="round" stroke-linejoin="round"/><path style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1" d="M-10.713 89.306l-.743 2.64 6.893 13.75h2.034zm-.743 2.64l-3.976 13.423.508.15 4.49-15.177zm-4.933 13.228v.53h2.813v-.53z" color="#000" font-weight="400" font-family="sans-serif" overflow="visible" fill="#ddd"/><circle cx="-10.763" cy="87.186" r="1.105" fill="#00b6f0"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="129.158" height="129.158" viewBox="0 0 34.173 34.173"><g transform="translate(26.909 -78.793)" paint-order="fill markers stroke"><circle cx="-9.822" cy="95.88" r="16.557" fill="none" stroke="#212121" stroke-width="1.058" stroke-linecap="round" stroke-linejoin="round"/><path style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1" d="M-10.713 89.306l-.743 2.64 6.893 13.75h2.034zm-.743 2.64l-3.976 13.423.508.15 4.49-15.177zm-4.933 13.228v.53h2.813v-.53z" color="#000" font-weight="400" font-family="sans-serif" overflow="visible" fill="#212121"/><circle cx="-10.763" cy="87.186" r="1.105" fill="#00b6f0"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
|
|
@ -8,7 +8,9 @@
|
|||
}"
|
||||
@click="$emit('click')"
|
||||
>
|
||||
{{ label }}
|
||||
<slot>
|
||||
{{ label }}
|
||||
</slot>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -23,16 +23,6 @@
|
|||
top: dropdownPositionY === 'top'
|
||||
}"
|
||||
>
|
||||
<ul class="list">
|
||||
<li
|
||||
v-for="(label, index) in dropdownNames"
|
||||
class="listItem"
|
||||
:key="index"
|
||||
@click="handleDropdownClick(index)"
|
||||
>
|
||||
{{ label }}
|
||||
</li>
|
||||
</ul>
|
||||
<slot>
|
||||
<ul
|
||||
class="list"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
import Vue from 'vue'
|
||||
|
||||
import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
|
||||
import FtButton from '../ft-button/ft-button.vue'
|
||||
|
||||
export default Vue.extend({
|
||||
name: 'FtShareButton',
|
||||
components: {
|
||||
'ft-icon-button': FtIconButton,
|
||||
'ft-button': FtButton
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
.shareLinks
|
||||
display: grid
|
||||
grid-template-rows: auto auto auto
|
||||
grid-auto-flow: column
|
||||
padding: 12px
|
||||
width: max-content
|
||||
|
||||
.header
|
||||
font-size: 18px
|
||||
font-weight: bold
|
||||
margin: 4px 0px 8px
|
||||
color: var(--primary-text-color)
|
||||
|
||||
.action
|
||||
padding: 6px
|
||||
|
||||
.divider
|
||||
grid-row: span 3
|
||||
margin: 0px 12px
|
||||
width: 1px
|
||||
background: var(--tertiary-text-color)
|
||||
|
||||
.youtubeLogo
|
||||
height: 18px
|
||||
width: auto
|
||||
|
||||
@at-root
|
||||
.dark &
|
||||
filter: brightness(0.868)
|
||||
|
||||
.light &
|
||||
filter: invert(0.87)
|
||||
|
||||
.invidious
|
||||
display: flex
|
||||
justify-content: center
|
||||
letter-spacing: -0.4px
|
||||
|
||||
.invidiousLogo
|
||||
display: inline-block
|
||||
width: 20px
|
||||
height: 20px
|
||||
background-size: cover
|
||||
margin-right: 2px
|
||||
|
||||
@at-root
|
||||
.dark &
|
||||
background-image: url(~../../assets/img/invidious-logo-dark.svg)
|
||||
|
||||
.light &
|
||||
background-image: url(~../../assets/img/invidious-logo-light.svg)
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<template>
|
||||
<ft-icon-button
|
||||
title="Share Video"
|
||||
theme="secondary"
|
||||
icon="share-alt"
|
||||
:forceDropdown="true"
|
||||
>
|
||||
<div class="shareLinks">
|
||||
<div class="header">
|
||||
<img class="youtubeLogo" src="~../../assets/img/yt_logo_mono_dark.png" alt="YouTube" width="794" height="178">
|
||||
</div>
|
||||
|
||||
<ft-button class="action">
|
||||
<font-awesome-icon icon="copy"></font-awesome-icon>
|
||||
Copy link
|
||||
</ft-button>
|
||||
<ft-button class="action">
|
||||
<font-awesome-icon icon="globe"></font-awesome-icon>
|
||||
Open link
|
||||
</ft-button>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="header invidious"><span class="invidiousLogo"></span>Invidious</div>
|
||||
|
||||
<ft-button class="action">
|
||||
<font-awesome-icon icon="copy"></font-awesome-icon>
|
||||
Copy link
|
||||
</ft-button>
|
||||
<ft-button class="action">
|
||||
<font-awesome-icon icon="globe"></font-awesome-icon>
|
||||
Open link
|
||||
</ft-button>
|
||||
</div>
|
||||
</ft-icon-button>
|
||||
</template>
|
||||
|
||||
<script src="./ft-share-button.js" />
|
||||
<style scoped lang="sass" src="./ft-share-button.sass" />
|
||||
|
|
@ -4,6 +4,7 @@ import FtButton from '../ft-button/ft-button.vue'
|
|||
import FtListDropdown from '../ft-list-dropdown/ft-list-dropdown.vue'
|
||||
import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
|
||||
import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
|
||||
import FtShareButton from '../ft-share-button/ft-share-button.vue'
|
||||
// import { shell } from 'electron'
|
||||
|
||||
export default Vue.extend({
|
||||
|
|
@ -13,7 +14,8 @@ export default Vue.extend({
|
|||
'ft-button': FtButton,
|
||||
'ft-list-dropdown': FtListDropdown,
|
||||
'ft-flex-box': FtFlexBox,
|
||||
'ft-icon-button': FtIconButton
|
||||
'ft-icon-button': FtIconButton,
|
||||
'ft-share-button': FtShareButton
|
||||
},
|
||||
props: {
|
||||
id: {
|
||||
|
|
|
|||
|
|
@ -71,15 +71,7 @@
|
|||
:dropdown-values="formatTypeValues"
|
||||
@click="handleFormatChange"
|
||||
/>
|
||||
<ft-icon-button
|
||||
title="Share Video"
|
||||
class="option"
|
||||
theme="secondary"
|
||||
icon="share-alt"
|
||||
:dropdown-names="shareNames"
|
||||
:dropdown-values="shareValues"
|
||||
@click="handleShare"
|
||||
/>
|
||||
<ft-share-button class="option"></ft-share-button>
|
||||
</div>
|
||||
</div>
|
||||
</ft-card>
|
||||
|
|
|
|||
Loading…
Reference in New Issue