lasers/FreeTube
1
0
Fork 0
mirror of https://github.com/FreeTubeApp/FreeTube synced 2024-11-23 10:21:59 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1 from FreeTubeApp/master

Browse Source 
branch update
This commit is contained in:
d43m0nhLInt3r 2020-04-10 16:45:34 +02:00 committed by GitHub
commit cc33e5ef15
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 222 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -16,3 +16,4 @@ tmp/
dist
coverage
__coverage__
csak-timelog.json

12
.vscode/tasks.json vendored Normal file
View File

@ -0,0 +1,12 @@
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "dev",
"problemMatcher": []
}
]
}

5
_scripts/webpack.renderer.config.js
View File

@ -60,7 +60,10 @@ const config = {
options: {
// eslint-disable-next-line
implementation: require('sass'),
},
sassOptions: {
indentedSyntax: true
}
}
},
],
},

2
src/main/index.js
View File

@ -51,8 +51,6 @@ function createWindow () {
backgroundColor: '#fff',
width: 960,
height: 540,
minWidth: 960,
minHeight: 540,
// useContentSize: true,
webPreferences: {
nodeIntegration: true,

8
src/renderer/components/ft-input/ft-input.css
View File

@ -14,12 +14,12 @@
margin-bottom: 10px;
font: 16px;
height: 45px;
color: var(--teritary-text-color);
border-bottom: 1px solid var(--teritary-text-color);
color: var(--secondary-text-color);
border-bottom: 1px solid var(--secondary-text-color);
}
.ft-input-component ::-webkit-input-placeholder {
color: var(--teritary-text-color);
color: var(--tertiary-text-color);
}
.search .ft-input {
@ -57,7 +57,7 @@
}
.inputAction:active {
background-color: var(--teritary-text-color);
background-color: var(--tertiary-text-color);
-moz-transition: background 0.2s ease-in;
-o-transition: background 0.2s ease-in;
transition: background 0.2s ease-in;

4
src/renderer/components/ft-list-dropdown/ft-list-dropdown.css
View File

@ -38,7 +38,7 @@
padding-left: 15px;
padding-right: 15px;
cursor: pointer;
color: var(--teritary-text-color);
color: var(--tertiary-text-color);
background-color: var(--secondary-card-bg-color);
}
@ -52,7 +52,7 @@
padding-left: 15px;
padding-right: 15px;
cursor: pointer;
color: var(--teritary-text-color);
color: var(--tertiary-text-color);
background-color: var(--secondary-card-bg-color);
-webkit-transition: background 0.2s ease-out;
-moz-transition: background 0.2s ease-out;

4
src/renderer/components/ft-select/ft-select.css
View File

@ -65,7 +65,7 @@
border-left: 6px solid transparent;
border-right: 6px solid transparent;
pointer-events: none;
color: var(--teritary-text-color);
color: var(--tertiary-text-color);
}
@ -78,7 +78,7 @@
left: 0;
top: 10px;
transition: 0.2s ease all;
color: var(--teritary-text-color);
color: var(--tertiary-text-color);
}
/* active state */

194
src/renderer/components/top-nav/top-nav.css
View File

@ -1,194 +0,0 @@
.topNav {
background-color: var(--card-bg-color);
width: 100%;
height: 60px;
line-height: 60px;
position: fixed;
top: 0;
left: 0;
z-index: 4;
-webkit-box-shadow: 0px 2px 1px 0px var(--primary-shadow-color);
}
.topNavBarColor {
background-color: var(--primary-color);
}
.menuIcon {
position: absolute;
top: 10px;
left: 10px;
}
.navIcon {
font-size: 20px;
padding: 10px;
cursor: pointer;
color: var(--primary-text-color);
border-radius: 200px 200px 200px 200px;
-webkit-border-radius: 200px 200px 200px 200px;
-webkit-transition: background 0.2s ease-out;
-moz-transition: background 0.2s ease-out;
-o-transition: background 0.2s ease-out;
transition: background 0.2s ease-out;
}
.topNavBarColor .navIcon {
color: var(--text-with-main-color);
}
.navIcon:hover {
background-color: var(--side-nav-hover-color);
-moz-transition: background 0.2s ease-in;
-o-transition: background 0.2s ease-in;
transition: background 0.2s ease-in;
}
.topNavBarColor .navIcon:hover {
background-color: var(--primary-color-hover);
}
.navIcon:active {
background-color: var(--teritary-text-color);
-moz-transition: background 0.2s ease-in;
-o-transition: background 0.2s ease-in;
transition: background 0.2s ease-in;
}
.topNavBarColor .menuIcon:active {
background-color: var(--primary-color-active)
}
.navBackIcon {
position: absolute;
top: 10px;
left: 50px;
}
.navForwardIcon {
position: absolute;
top: 10px;
left: 85px;
}
.navSearchIcon {
position: absolute;
top: 10px;
display: none;
}
.logoIcon {
background-image: var(--logo-icon);
background-repeat: no-repeat;
background-position: right top;
background-size: 25px;
position: absolute;
top: 20px;
left: 140px;
width: 25px;
height: 25px;
}
.logoIconBarColor {
background-image: var(--logo-icon-bar-color);
}
.logoText {
background-image: var(--logo-text);
background-repeat: no-repeat;
background-position: right top;
background-size: 100px;
position: absolute;
top: 9px;
left: 175px;
width: 100px;
height: 40px;
}
.logoTextBarColor {
background-image: var(--logo-text-bar-color);
}
.searchContainer {
margin: 0 auto;
width: 500px;
position: relative;
}
.searchInput {
width: 450px;
}
.navFilterIcon {
position: absolute;
top: 10px;
right: 10px;
}
.searchFilters {
margin-left: 270px;
margin-right: 20px;
margin-top: 10px;
margin-bottom: 20px;
transition-property: margin;
transition-duration: 150ms;
transition-timing-function: ease-in-out;
}
.expand {
margin-left: 100px;
}
@media only screen and (max-width: 680px) {
.menuIcon {
display: none;
}
.navBackIcon {
left: 45px;
}
.navForwardIcon {
left: 80px;
}
.navSearchIcon {
display: block;
left: 120px;
}
.logoIcon {
left: 10px;
}
.logoText {
display: none;
}
.searchContainer {
position: fixed;
display: none;
width: 100%;
top: 60px;
background-color: var(--side-nav-color);
}
.topNavBarColor .searchContainer {
background-color: var(--primary-color-hover);
}
.searchInput {
width: 80%;
margin: 0 auto;
}
.navFilterIcon {
right: 0px;
}
.searchFilters {
margin-top: 130px;
margin-left: 10px;
margin-right: 10px;
}
}

6
src/renderer/components/top-nav/top-nav.js
View File

@ -35,7 +35,7 @@ export default Vue.extend({
const searchContainer = $('.searchContainer').get(0)
if (width > 680) {
searchContainer.style.display = 'block'
searchContainer.style.display = ''
} else {
searchContainer.style.display = 'none'
}
@ -68,8 +68,8 @@ export default Vue.extend({
toggleSearchContainer: function () {
const searchContainer = $('.searchContainer').get(0)
if (searchContainer.style.display === 'none' || searchContainer.style.display === '') {
searchContainer.style.display = 'block'
if (searchContainer.style.display === 'none') {
searchContainer.style.display = ''
} else {
searchContainer.style.display = 'none'
}

134
src/renderer/components/top-nav/top-nav.sass Normal file
View File

@ -0,0 +1,134 @@
@mixin top-nav-is-colored
@at-root
.topNavBarColor &, .topNavBarColor#{&}
@content
.topNav
position: fixed
z-index: 4
left: 0
right: 0
top: 0
height: 60px
line-height: 60px
background-color: var(--card-bg-color)
-webkit-box-shadow: 0px 2px 1px 0px var(--primary-shadow-color)
display: flex
align-items: center
align-content: center
@media only screen and (min-width: 961px)
display: grid
grid-template-columns: 1fr 440px 1fr
@include top-nav-is-colored
background-color: var(--primary-color)
.menuIcon // the hamburger button
@media only screen and (max-width: 680px)
display: none
.navIcon // all icons in the top navigation
font-size: 20px
padding: 10px
cursor: pointer
color: var(--primary-text-color)
border-radius: 50%
transition: background 0.2s ease-out
width: 1em
height: 1em
@include top-nav-is-colored
color: var(--text-with-main-color)
&:hover
background-color: var(--primary-color-hover)
&:hover
background-color: var(--side-nav-hover-color)
transition: background 0.2s ease-in
&:active
background-color: var(--tertiary-text-color)
transition: background 0.2s ease-in
@include top-nav-is-colored
background-color: var(--primary-color-active)
.side // parts of the top nav either side of the search bar
display: flex
align-items: center
.navSearchIcon
@media only screen and (min-width: 681px)
display: none
.logo // parts that make up the logo
display: flex
align-items: center
padding: 0px 25px 0px 10px
.logoIcon
background-image: var(--logo-icon)
background-repeat: no-repeat
background-position: right top
background-size: 25px
width: 25px
height: 25px
@include top-nav-is-colored
background-image: var(--logo-icon-bar-color)
.logoText
margin-left: 5px
position: relative
top: -3px
background-image: var(--logo-text)
background-repeat: no-repeat
background-position: right top
background-size: 100px
width: 100px
height: 40px
@media only screen and (max-width: 680px)
display: none
@include top-nav-is-colored
background-image: var(--logo-text-bar-color)
.middle // the middle part of the top nav which contains the search bar
max-width: 440px
flex: 1
.searchContainer
display: flex
align-items: center
@media only screen and (max-width: 680px)
position: fixed
left: 0
right: 0
top: 60px
background-color: var(--side-nav-color)
@include top-nav-is-colored
background-color: var(--primary-color-hover)
.searchInput
flex: 1
.searchFilters
position: absolute
left: 0
right: 0
margin: 10px 20px 20px 220px
transition: margin 150ms ease-in-out
@media only screen and (max-width: 680px)
left: 0
right: 0
margin: 95px 10px 0px
@media only screen and (min-width: 681px)
&.expand
margin-left: 100px

91
src/renderer/components/top-nav/top-nav.vue
View File

@ -3,54 +3,59 @@
class="topNav"
:class="{ topNavBarColor: barColor }"
>
<font-awesome-icon
class=" menuIcon navIcon"
icon="bars"
@click="toggleSideNav"
/>
<font-awesome-icon
class="navBackIcon navIcon"
icon="arrow-left"
@click="historyBack"
/>
<font-awesome-icon
class="navForwardIcon navIcon"
icon="arrow-right"
@click="historyForward"
/>
<font-awesome-icon
class="navSearchIcon navIcon"
icon="search"
@click="toggleSearchContainer"
/>
<div
class="logoIcon"
:class="{ logoIconBarColor: barColor }"
/>
<div
class="logoText"
:class="{ logoTextBarColor: barColor }"
/>
<div class="searchContainer">
<ft-input
placeholder="Search / Go to URL"
class="searchInput"
:is-search="true"
@click="goToSearch"
<div class="side">
<font-awesome-icon
class="menuIcon navIcon"
icon="bars"
@click="toggleSideNav"
/>
<font-awesome-icon
class="navFilterIcon navIcon"
icon="filter"
@click="showFilters = !showFilters"
class="navBackIcon navIcon"
icon="arrow-left"
@click="historyBack"
/>
<font-awesome-icon
class="navForwardIcon navIcon"
icon="arrow-right"
@click="historyForward"
/>
<font-awesome-icon
class="navSearchIcon navIcon"
icon="search"
@click="toggleSearchContainer"
/>
<div class="logo">
<div
class="logoIcon"
/>
<div
class="logoText"
/>
</div>
</div>
<div class="middle">
<div class="searchContainer">
<ft-input
placeholder="Search / Go to URL"
class="searchInput"
:is-search="true"
@click="goToSearch"
/>
<font-awesome-icon
class="navFilterIcon navIcon"
icon="filter"
@click="showFilters = !showFilters"
/>
</div>
<ft-search-filters
v-show="showFilters"
class="searchFilters"
:class="{ expand: !isSideNavOpen }"
/>
</div>
<ft-search-filters
v-show="showFilters"
class="searchFilters"
:class="{ expand: !isSideNavOpen }"
/>
<div class="side" />
</div>
</template>
<script src="./top-nav.js" />
<style scoped src="./top-nav.css" />
<style scoped lang="sass" src="./top-nav.sass" />

2
src/renderer/components/watch-video-info/watch-video-info.css
View File

@ -82,7 +82,7 @@
right: 15px;
bottom: 0px;
font-size: 12px;
color: var(--teritary-text-color);
color: var(--tertiary-text-color);
}
.videoOptions {

4
src/renderer/store/modules/settings.js
View File

@ -1,5 +1,7 @@
import electron from 'electron'
import Datastore from 'nedb'
const localDataStorage = '/db'
// TODO: Add logic for database when electron is not in use
const localDataStorage = electron.remote.app.getPath('userData')
const settingsDb = new Datastore({
filename: localDataStorage + '/settings.db',

4
src/renderer/store/modules/subscriptions.js
View File

@ -1,5 +1,7 @@
import electron from 'electron'
import Datastore from 'nedb'
const localDataStorage = '/db'
// TODO: Add logic for database when electron is not in use
const localDataStorage = electron.remote.app.getPath('userData')
const subDb = new Datastore({
filename: localDataStorage + '/subscriptions.db',

8
src/renderer/themes.css
View File

@ -1,7 +1,7 @@
.light {
--primary-text-color: #212121;
--secondary-text-color: #424242;
--teritary-text-color: #757575;
--tertiary-text-color: #757575;
--primary-input-color: rgba(0, 0, 0, 0.50);
--primary-shadow-color: rgba(232, 232, 232, 1);
--title-color: #3f7ac6;
@ -19,8 +19,8 @@
.dark {
--primary-text-color: #EEEEEE;
--secondary-text-color: #E0E0E0;
--teritary-text-color: #F5F5F5;
--secondary-text-color: #ddd;
--tertiary-text-color: #888;
--primary-input-color: rgba(0, 0, 0, 0.50);
--primary-shadow-color: rgba(0, 0, 0, 0.75);
--title-color: #EEEEEE;
@ -39,7 +39,7 @@
.gray {
--primary-text-color: #EEEEEE;
--secondary-text-color: #E0E0E0;
--teritary-text-color: #F5F5F5;
--tertiary-text-color: #F5F5F5;
--primary-input-color: rgba(0, 0, 0, 0.50);
--primary-shadow-color: rgba(0, 0, 0, 0.75);
--title-color: #EEEEEE;

2
src/renderer/views/Channel/Channel.css
View File

@ -47,7 +47,7 @@
.channelSubCount {
position: absolute;
color: var(--teritary-text-color);
color: var(--tertiary-text-color);
top: 50px;
left: 120px;
}