Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

change header bar for adapt it with the current environnement #43

Merged
merged 4 commits into from
Jun 10, 2020
Merged

change header bar for adapt it with the current environnement #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bc8c32c
feature(Header): change header bar for adapt it with the current envi…
Debaerdm Jun 9, 2020
e2b863d
feature(Header): change header bar for adapt it with the current envi…
Debaerdm Jun 9, 2020
2b7a320
fix(scss): put the color constant in variable
Debaerdm Jun 10, 2020
a4d1d97
fix(build): fix windows version
Debaerdm Jun 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 12 additions & 11 deletions .github/workflows/build.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ jobs:
# Platforms to build on/for
strategy:
matrix:
os: [macos-latest, windows-latest]
os: [windows-latest]
#os: [macos-latest, windows-latest]

steps:
- name: Check out Git repository
Expand All @@ -23,12 +24,12 @@ jobs:
with:
node-version: 12

- name: Prepare for app notarization (macOS)
if: startsWith(matrix.os, 'macos')
# Import Apple API key for app notarization on macOS
run: |
mkdir -p ~/private_keys/
echo '${{ secrets.api_key }}' > ~/private_keys/AuthKey_${{ secrets.api_key_id }}.p8
#- name: Prepare for app notarization (macOS)
# if: startsWith(matrix.os, 'macos')
# Import Apple API key for app notarization on macOS
# run: |
# mkdir -p ~/private_keys/
# echo '${{ secrets.api_key }}' > ~/private_keys/AuthKey_${{ secrets.api_key_id }}.p8
- name: Build/release Skizzle
uses: samuelmeuli/action-electron-builder@v1
with:
Expand All @@ -37,13 +38,13 @@ jobs:
github_token: ${{ secrets.github_token }}

# macOS code signing certificate
mac_certs: ${{ secrets.mac_certs }}
mac_certs_password: ${{ secrets.mac_certs_password }}
# mac_certs: ${{ secrets.mac_certs }}
# mac_certs_password: ${{ secrets.mac_certs_password }}

# If the commit is tagged with a version (e.g. "v1.0.0"),
# release the app after building
release: ${{ startsWith(github.ref, 'refs/tags/v') }}
env:
# macOS notarization API key
API_KEY_ID: ${{ secrets.api_key_id }}
API_KEY_ISSUER_ID: ${{ secrets.api_key_issuer_id }}
# API_KEY_ID: ${{ secrets.api_key_id }}
# API_KEY_ISSUER_ID: ${{ secrets.api_key_issuer_id }}
8 changes: 8 additions & 0 deletions public/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,10 @@ input:disabled {
background: #ccc;
}

::-webkit-scrollbar-corner {
background-color: #fff;
Debaerdm marked this conversation as resolved.
Show resolved Hide resolved
}

@media (prefers-color-scheme: dark) {
body {
background-color: #222;
Expand All @@ -66,6 +70,10 @@ input:disabled {
::-webkit-scrollbar-thumb {
background: #666;
}

::-webkit-scrollbar-corner {
background-color: #444;
}
}

button.link {
Expand Down
102 changes: 4 additions & 98 deletions src/components/Header/Header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,106 +9,12 @@
width: 100%;
height: 100%;
-webkit-app-region: drag;
}

.window-controls {
display: grid;
grid-template-columns: repeat(3, 32px);
position: absolute;
top: 0;
right: 0;
height: 100%;
font-size: 10px;
-webkit-app-region: no-drag;
}

.window-controls .button {
position: relative;
grid-row: 1 / span 1;
user-select: none;
cursor: default;
vertical-align: middle;
border: 0;
background-color: transparent;
}

.window-controls .button:before {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: rgba(33, 33, 33, 0.8);
transform: translateX(-50%) translateY(-50%);
}

.window-controls .button:after {
content: attr(data-icon);
opacity: 0;
position: absolute;
left: 50%;
top: 50%;
width: 16px;
height: 16px;
line-height: 16px;
font-family: sans-serif;
font-size: 0.6rem;
transform: translateX(-50%) translateY(-50%);
}

.window-controls .button:hover:after {
opacity: 1;
}

.window-controls .min-button {
grid-column: 1;
}

.window-controls .max-button,
.window-controls .restore-button {
grid-column: 2;
}

.window-controls .close-button {
grid-column: 3;
}

.window-controls .close-button:before {
background-color: #fe6057;
}

.window-controls .min-button:before {
background-color: #ffbf2b;
}

.window-controls .restore-button:before,
.window-controls .max-button:before {
background-color: #28cd41;
}

.window-controls .restore-button {
display: none;
}

.window-title {
grid-column: 1;
display: flex;
align-items: center;
font-size: 0.8rem;
line-height: 1;
color: #333;
font-family: sans-serif;
padding-left: 0.5rem;
overflow-x: hidden;
}
flex-direction: row;

.window-title .titlebar-title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-left: 0.5rem;
&--windows {
justify-content: flex-end;
}
}

@media (prefers-color-scheme: dark) {
Expand Down
75 changes: 14 additions & 61 deletions src/components/Header/Header.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,70 +1,23 @@
<script>
import { onMount } from 'svelte';
const { remote } = require('electron');
const { getCurrentWindow } = require('electron').remote;
import WindowsBar from './WindowsBar.svelte';
import MacosBar from './MacosBar.svelte';
let currentPlatform = 'Others';
onMount(() => {
init();
if (navigator.platform === 'Win32') {
currentPlatform = 'Windows';
} else {
currentPlatform = 'Others';
}
});
const init = () => {
let window = remote.getCurrentWindow();
const minButton = document.getElementById('minimize');
const maxButton = document.getElementById('maximize');
const restoreButton = document.getElementById('restore');
const closeButton = document.getElementById('close');
minButton.addEventListener('click', event => {
window = remote.getCurrentWindow();
window.minimize();
});
maxButton.addEventListener('click', event => {
window = remote.getCurrentWindow();
window.maximize();
toggleMaxRestoreButtons();
});
restoreButton.addEventListener('click', event => {
window = remote.getCurrentWindow();
window.unmaximize();
toggleMaxRestoreButtons();
});
const toggleMaxRestoreButtons = () => {
window = remote.getCurrentWindow();
if (window.isMaximized()) {
maxButton.style.display = 'none';
restoreButton.style.display = 'flex';
} else {
restoreButton.style.display = 'none';
maxButton.style.display = 'flex';
}
};
toggleMaxRestoreButtons();
window.on('maximize', toggleMaxRestoreButtons);
window.on('unmaximize', toggleMaxRestoreButtons);
closeButton.addEventListener('click', event => {
window = remote.getCurrentWindow();
window.hide();
});
};
let currentPlatform = navigator.platform === 'Win32' ? 'windows' : 'others';
let isMaximized = getCurrentWindow().isMaximized();
getCurrentWindow().on('maximize', () => isMaximized = true);
getCurrentWindow().on('unmaximize', () => isMaximized = false);
</script>

<style src="./Header.scss"></style>

<header class="titlebar">
<div class="drag-region">
<div class="window-controls">
<button id="minimize" class="button min-button" data-icon="—"></button>
<button id="maximize" class="button max-button" data-icon="➕"></button>
<button
id="restore"
class="button restore-button"
data-icon="➕"></button>
<button id="close" class="button close-button" data-icon="❌"></button>
</div>
<div class="drag-region {currentPlatform ? `drag-region--${currentPlatform}` : ''}">
{#if currentPlatform === 'others'}
<MacosBar bind:isMaximized />
{:else}
<WindowsBar bind:isMaximized />
{/if}
</div>
</header>
62 changes: 62 additions & 0 deletions src/components/Header/MacosBar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
$close-color: #fe6057;
$close-color-active: #e9574f;
$min-color: #ffbf2b;
$min-color-active: #d8a225;
$max-color: #28cd41;
$max-color-active: #22aa36;

.window-controls {
align-items: center;
display: flex;
-webkit-app-region: no-drag;
justify-content: space-evenly;
padding-left: 0.75rem;
}

.window-controls .button {
position: relative;
width: 16px;
height: 16px;
border-radius: 50%;
margin: 0 0.25rem;
transition: 200ms;

& svg {
transition: 200ms;
transition-timing-function: ease-in-out;
display: none;
}
}

.window-controls:hover svg {
display: flex;
}

.close-button {
background-color: $close-color;

&:active {
background-color: $close-color-active;
}
}

.min-button {
background-color: $min-color;

&:active {
background-color: $min-color-active;
}
}

.restore-button,
.max-button {
background-color: $max-color;

&:active {
background-color: $max-color-active;
}

& svg {
transform: rotate(-45deg);
}
}
25 changes: 25 additions & 0 deletions src/components/Header/MacosBar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<script>
const { getCurrentWindow } = require('electron').remote;

export let isMaximized;
</script>

<style src="./MacosBar.scss"></style>

<div class="window-controls">
<button on:click={() => getCurrentWindow().hide()} class="button close-button">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" fill="#000"/></svg>
</button>
<button on:click={() => getCurrentWindow().minimize()} class="button min-button">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 13H5v-2h14v2z" fill="#000"/></svg>
</button>
{#if !isMaximized}
<button on:click={() => getCurrentWindow().maximize()} class="button max-button">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.17 12L15 8.83l1.41-1.42L21 12l-4.59 4.58L15 15.17 18.17 12M5.83 12L9 15.17l-1.41 1.42L3 12l4.59-4.58L9 8.83 5.83 12z" fill="#000"/></svg>
</button>
{:else}
<button on:click={() => getCurrentWindow().unmaximize()} class="button restore-button">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.41 7.41L10 12l-4.59 4.59L4 15.17 7.17 12 4 8.83l1.41-1.42m13.18 9.18L14 12l4.59-4.58L20 8.83 16.83 12 20 15.17l-1.41 1.42z" fill="#000"/></svg>
</button>
{/if}
</div>
Loading