Commit 65bba059de67096d23a74b9e419174aa97fa4977
Merge pull request #96 from ticktackim/frameless
minimal frameless setupmix irving authored on 2/11/2018, 1:47:14 AM
GitHub committed on 2/11/2018, 1:47:14 AM
Parent: 9a9177d891de3415bfefa1a639dd2ca57dcf7cce
Parent: ab6039706a099a9c4a6c9e4ff04749ba3ed998d6
Files changed
app/html/header.js | changed |
app/html/header.mcss | changed |
index.js | changed |
app/html/header.js | ||
---|---|---|
@@ -1,8 +1,9 @@ | ||
1 | 1 | const nest = require('depnest') |
2 | 2 | const { h, computed, when } = require('mutant') |
3 | 3 | const get = require('lodash/get') |
4 | 4 | const path = require('path') |
5 | +const remote = require('electron').remote | |
5 | 6 | |
6 | 7 | exports.gives = nest('app.html.header') |
7 | 8 | |
8 | 9 | exports.needs = nest('keys.sync.id', 'first') |
@@ -23,23 +24,45 @@ | ||
23 | 24 | }) |
24 | 25 | |
25 | 26 | if (loc().page === 'splash') return |
26 | 27 | |
28 | + const window = remote.getCurrentWindow() | |
29 | + const minimize = () => window.minimize() | |
30 | + const maximize = () => { | |
31 | + if (!window.isMaximized()) window.maximize() | |
32 | + else window.unmaximize() | |
33 | + } | |
34 | + const close = () => window.close() | |
35 | + | |
27 | 36 | const isSettings = computed(loc, loc => SETTINGS_PAGES.includes(loc.page)) |
28 | 37 | const isAddressBook = computed(loc, loc => loc.page === 'addressBook') |
29 | 38 | const isFeed = computed([isAddressBook, isSettings], (p, s) => !p && !s) |
30 | 39 | |
31 | 40 | return h('Header', [ |
41 | + h('div.window-controls', [ | |
42 | + h('img.min', { | |
43 | + src: assetPath('minimize.png'), | |
44 | + 'ev-click': minimize | |
45 | + }), | |
46 | + h('img.max', { | |
47 | + src: assetPath('maximize.png'), | |
48 | + 'ev-click': maximize | |
49 | + }), | |
50 | + h('img.close', { | |
51 | + src: assetPath('close.png'), | |
52 | + 'ev-click': close | |
53 | + }) | |
54 | + ]), | |
32 | 55 | h('nav', [ |
33 | - h('img.feed', { | |
56 | + h('img.feed', { | |
34 | 57 | src: when(isFeed, assetPath('feed_on.png'), assetPath('feed.png')), |
35 | 58 | 'ev-click': () => push({page: 'blogIndex'}), |
36 | 59 | }), |
37 | - h('img.addressBook', { | |
60 | + h('img.addressBook', { | |
38 | 61 | src: when(isAddressBook, assetPath('address_bk_on.png'), assetPath('address_bk.png')), |
39 | 62 | 'ev-click': () => push({page: 'addressBook'}) |
40 | 63 | }), |
41 | - h('img.settings', { | |
64 | + h('img.settings', { | |
42 | 65 | src: when(isSettings, assetPath('settings_on.png'), assetPath('settings.png')), |
43 | 66 | 'ev-click': () => push({page: 'settings'}) |
44 | 67 | }), |
45 | 68 | ]), |
@@ -49,5 +72,4 @@ | ||
49 | 72 | |
50 | 73 | function assetPath (name) { |
51 | 74 | return path.join(__dirname, '../../assets', name) |
52 | 75 | } |
53 | - |
app/html/header.mcss | ||
---|---|---|
@@ -1,8 +1,23 @@ | ||
1 | 1 | Header { |
2 | + div.window-controls { | |
3 | + position: fixed | |
4 | + right: 0 | |
5 | + z-index: 100 | |
6 | + | |
7 | + display: flex | |
8 | + | |
9 | + img { | |
10 | + padding: .5rem | |
11 | + cursor: pointer | |
12 | + :hover { | |
13 | + filter: drop-shadow(rgba(255, 255, 255, .5) 0 0 2px) | |
14 | + } | |
15 | + } | |
16 | + } | |
17 | + | |
2 | 18 | nav { |
3 | 19 | $colorPrimary |
4 | - $navFA | |
5 | 20 | padding: 1rem 0 |
6 | 21 | |
7 | 22 | width: 100% |
8 | 23 | height: 1.5rem |
@@ -29,5 +44,4 @@ | ||
29 | 44 | text-decoration: underline |
30 | 45 | } |
31 | 46 | } |
32 | 47 | } |
33 | - |
index.js | ||
---|---|---|
@@ -85,8 +85,10 @@ | ||
85 | 85 | width: windowState.width, |
86 | 86 | height: windowState.height, |
87 | 87 | autoHideMenuBar: true, |
88 | 88 | title: 'Ticktack', |
89 | + frame: false, | |
90 | + titleBarStyle: 'hidden', | |
89 | 91 | show: true, |
90 | 92 | backgroundColor: '#EEE', |
91 | 93 | icon: './assets/icon.png' |
92 | 94 | }) |
@@ -132,5 +134,4 @@ | ||
132 | 134 | |
133 | 135 | window.loadURL('file://' + Path.join(__dirname, 'assets', 'base.html')) |
134 | 136 | return window |
135 | 137 | } |
136 | - |
Built with git-ssb-web