style: moving css to components

CHANGELOG.md

@@ -6,7 +6,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ---
 
-## [1.?.?] - ???
+## [1.6.0] - ???
 
 ### Added
 
@@ -15,10 +15,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ### Changed
 
 - Separate the source by it electron process, main in `src/main` and `src/renderer`.
-
-### Removed
-
-- ?
+- Style: moving css to components.
 
 ---
 

package.json

@@ -36,16 +36,14 @@
   "license": "MIT",
   "homepage": "https://bitbucket.org/brunurd/youtube-client#readme",
   "scripts": {
-    "start": "concurrently \"npm run css:watch\" \"rollup -cw\" \"sleep 3 && npm run debug\"",
+    "start": "concurrently \"rollup -cw\" \"sleep 3 && npm run debug\"",
     "build": "rollup -c",
     "electron": "electron .",
     "debug": "electron . debug",
     "test": "jest",
     "lint": "eslint src/**/*.js",
     "lint:fix": "eslint src/**/*.js --fix",
     "prettier": "prettier --write .",
-    "css": "stylus style/main.styl --out public/style.min.css",
-    "css:watch": "stylus style/main.styl --out public/style.min.css --watch",
     "icons": "png2icons ./public/images/yt_logo_rgb_light.png ./public/images/favicon -all -bc -i",
     "pack": "electron-builder",
     "pack:dir": "electron-builder --dir",

public/index.html

@@ -6,7 +6,7 @@
     <meta http-equiv="Content-Security-Policy" content="script-src 'self';" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Companion</title>
-    <link rel="stylesheet" href="style.min.css" />
+    <link rel="stylesheet" href="reset.css" />
     <link
       rel="stylesheet"
       href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"

style/reset.styl → public/reset.css

@@ -2,22 +2,25 @@
   padding: 0;
   margin: 0;
   box-sizing: border-box;
+  outline: none;
 }
 
 body {
   overflow: hidden;
 }
 
-body, html {
+body,
+html {
   height: 100%;
-  background-color: white;
 }
 
-a, a * {
+a,
+a * {
   color: inherit;
   text-decoration: none;
+}
 
-  &:hover, &:hover * {
-    text-decoration: none;
-  }
+a:hover,
+a:hover * {
+  text-decoration: none;
 }

src/renderer/components/App.svelte

@@ -1,46 +1,48 @@
 <script>
-  import { onDestroy } from 'svelte';
-  import AppBar from './AppBar.svelte';
-  import WebView from './WebView.svelte';
 
-  let appBarIsShowing = true;
+import { onDestroy } from 'svelte';
+import AppBar from './AppBar.svelte';
+import WebView from './WebView.svelte';
 
-  const companion = window.__COMPANION__;
-  const showAppBarInterval = setInterval(showAppBar, 1000);
-  const hideAppBarInterval = setInterval(hideAppBar, 3000);
+let appBarIsShowing = true;
 
-  onDestroy(() => {
-    clearInterval(showAppBarInterval);
-    clearInterval(hideAppBarInterval);
-  });
+const companion = window.__COMPANION__;
+const showAppBarInterval = setInterval(showAppBar, 1000);
+const hideAppBarInterval = setInterval(hideAppBar, 3000);
 
-  function hideAppBar() {
-    const mouseIsInsideWindow = companion.insideWindow();
-    const isFullscreen = companion.isFullscreen();
+onDestroy(() => {
+  clearInterval(showAppBarInterval);
+  clearInterval(hideAppBarInterval);
+});
 
-    if ((!mouseIsInsideWindow && appBarIsShowing) || isFullscreen) {
-      appBarIsShowing = false;
-    }
+function hideAppBar() {
+  const mouseIsInsideWindow = companion.insideWindow();
+  const isFullscreen = companion.isFullscreen();
+
+  if ((!mouseIsInsideWindow && appBarIsShowing) || isFullscreen) {
+    appBarIsShowing = false;
   }
+}
 
-  function showAppBar() {
-    const mouseIsInsideWindow = companion.insideWindow();
-    const mouseIsIdle = companion.mouseIsIdle();
-    const isFullscreen = companion.isFullscreen();
+function showAppBar() {
+  const mouseIsInsideWindow = companion.insideWindow();
+  const mouseIsIdle = companion.mouseIsIdle();
+  const isFullscreen = companion.isFullscreen();
 
-    if ((mouseIsInsideWindow && !appBarIsShowing && !mouseIsIdle) && !isFullscreen) {
-      appBarIsShowing = true;
-    }
+  if ((mouseIsInsideWindow && !appBarIsShowing && !mouseIsIdle) && !isFullscreen) {
+    appBarIsShowing = true;
   }
+}
+
 </script>
 
-<main>
+<main class="app">
   <AppBar show={appBarIsShowing} />
   <WebView expand={!appBarIsShowing} />
 </main>
 
 <style>
-  main {
-    height: 100%;
-  }
-</style>
+.app {
+  height: 100%;
+}
+</style>

src/renderer/components/AppBar.svelte

@@ -1,11 +1,25 @@
 <script>
-  import ClientBar from './ClientBar.svelte';
-  import SearchBar from './SearchBar.svelte';
 
-  export let show;
+import ClientBar from './ClientBar.svelte';
+import SearchBar from './SearchBar.svelte';
+
+export let show;
+
 </script>
 
-<div class={ show ? 'app-bar' : 'app-bar app-bar--hidden' }>
+<div class="app-bar { show ? '' : 'hide' }">
   <ClientBar />
   <SearchBar />
 </div>
+
+<style>
+.app-bar {
+  height: 65px;
+  transition: margin 0.5s ease;
+  margin-top: 0;
+}
+
+.hide {
+  margin-top: -65px;
+}
+</style>

src/renderer/components/ClientBar.svelte

@@ -1,37 +1,57 @@
 <script>
-    const companion = window.__COMPANION__;
 
-    let pinned = companion.isAlwaysOnTop();
-    let maximized = companion.isMaximized();
+import IconButton from "./IconButton.svelte";
 
-    function pinToggle() {
-      companion.setAlwaysOnTop();
-      pinned = companion.isAlwaysOnTop();
-    }
+const companion = window.__COMPANION__;
+
+let pinned = companion.isAlwaysOnTop();
+let maximized = companion.isMaximized();
+
+function pinToggle() {
+  companion.setAlwaysOnTop();
+  pinned = companion.isAlwaysOnTop();
+}
+
+function maximizeToggle() {
+  companion.maximizeToggle();
+  maximized = companion.isMaximized();
+}
 
-    function maximizeToggle() {
-      companion.maximizeToggle();
-      maximized = companion.isMaximized();
-    }
 </script>
 
 <div class="client-bar">
-  <nav class="client-m drag">
-    <div class="client-m__btns--left">
-      <span class="client-m__btn click" on:click={pinToggle}>
-        <i class="fa {pinned ? 'fa-lock' : 'fa-unlock'}"></i>
-      </span>
+  <nav>
+    <div class="buttons-list">
+      <IconButton onClick={pinToggle} icons={pinned ? 'fa-lock' : 'fa-unlock'} />
     </div>
-    <div class="client-m__btns--right">
-      <span class="client-m__btn click" on:click={companion.minimize}>
-        <i class="fa fa-window-minimize"></i>
-      </span>
-      <span class="client-m__btn click" on:click={maximizeToggle}>
-        <i class="fa {maximized ? 'fa-window-restore' : 'fa-window-maximize'}"></i>
-      </span>
-      <span class="client-m__btn click" on:click={companion.close}>
-        <i class="fa fa-times"></i>
-      </span>
+    <div class="buttons-list">
+      <IconButton onClick={companion.minimize} icons="fa-window-minimize" />
+      <IconButton onClick={maximizeToggle} icons={maximized ? 'fa-window-restore' : 'fa-window-maximize'} />
+      <IconButton onClick={companion.close} icons="fa-times" />
     </div>
   </nav>
-</div>
+</div>
+
+<style>
+.client-bar {
+  height: 30px;
+  padding: 5px;
+  background-color: rgb(40, 40, 40);
+  transition: height 0.5s ease 0s;
+  transition: padding 0.25s ease 0s;
+}
+
+.buttons-list {
+  display: flex;
+  -webkit-app-region: no-drag;
+}
+
+nav {
+  width: 100%;
+  height: 17px;
+  padding: 0 5px;
+  -webkit-app-region: drag;
+  display: flex;
+  justify-content: space-between;
+}
+</style>

src/renderer/components/IconButton.svelte

@@ -0,0 +1,33 @@
+<script>
+
+export let icons;
+export let onClick;
+export let inactive = false;
+
+</script>
+
+<div class="icon-button {inactive ? 'inactive' : ''}" on:click={onClick}>
+  <i class="fa {icons}" />
+</div>
+
+<style>
+.icon-button {
+  cursor: pointer;
+  margin-left: 10px;
+  color: rgba(245, 245, 245, 0.3);
+}
+
+.icon-button:first-child {
+  margin-left: 0;
+}
+
+.icon-button:hover {
+  color: rgba(247, 247, 247, 0.6);
+}
+
+.inactive {
+  opacity: 0.2;
+  cursor: default;
+  pointer-events: none;
+}
+</style>