lasers/FreeTube
1
0
Fork 0
mirror of https://github.com/FreeTubeApp/FreeTube synced 2024-12-13 04:59:33 +01:00
Code Issues Projects Releases Wiki Activity

Redesign share button

Browse Source
This commit is contained in:
Cadence Ember 2020-06-18 00:15:36 +12:00
parent 6cb99b2d2e
commit 00269fbce1
No known key found for this signature in database
GPG Key ID: 128B99B1B74A6412
10 changed files with 111 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/renderer/assets/img/invidious-logo-dark.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

1
src/renderer/assets/img/invidious-logo-light.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
src/renderer/assets/img/yt_logo_mono_dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

4
src/renderer/components/ft-button/ft-button.vue
View File

@ -8,7 +8,9 @@
}"
@click="$emit('click')"
>
{{ label }}
<slot>
{{ label }}
</slot>
</button>
</template>

10
src/renderer/components/ft-icon-button/ft-icon-button.vue
View File

@ -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"

12
src/renderer/components/ft-share-button/ft-share-button.js Normal file
View File

@ -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
}
})

51
src/renderer/components/ft-share-button/ft-share-button.sass Normal file
View File

@ -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)

39
src/renderer/components/ft-share-button/ft-share-button.vue Normal file
View File

@ -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
src/renderer/components/watch-video-info/watch-video-info.js
View File

@ -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: {

10
src/renderer/components/watch-video-info/watch-video-info.vue
View File

@ -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>