aljaz/pear-docs
1
0
Fork 0
mirror of https://github.com/aljazceru/pear-docs.git synced 2025-12-17 14:34:19 +01:00
Code Issues Packages Projects Releases Wiki Activity

add draggable title bar info in guide (#140)

Browse Source 
* update guide

* wrap pear-ctrl in titlebar

* adjusted mac pear-ctrl margin

---------

Co-authored-by: rafapaezbas <rafaelpaezbastida@gmail.com>
This commit is contained in:
Vivek Singh
2024-09-17 21:41:30 +05:30
committed by GitHub
parent ccb62402a8
commit 200a55150e
1 changed files with 14 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
guide/making-a-pear-desktop-app.md
View File

@@ -22,22 +22,15 @@ Start by defining the app's layout in `index.html`:
<html> <html>
<head> <head>
<style> <style>
pear-ctrl { pear-ctrl[data-platform="darwin"] { margin-top: 12px; margin-left: 10px; }
margin-top: 9px;
margin-left: 9px;
position: absolute;
}
pear-ctrl[data-platform="darwin"] { float: left; margin-top: 4px; }
pear-ctrl:after { #titlebar {
content: ''; -webkit-app-region: drag;
display: block; height: 30px;
height: 1.8rem; width: 100%;
position: fixed; position: fixed;
z-index: -1;
left: 0; left: 0;
top: 0; top: 0;
width: 100%;
background-color: #B0D94413; background-color: #B0D94413;
filter: drop-shadow(2px 10px 6px #888); filter: drop-shadow(2px 10px 6px #888);
} }
@@ -122,7 +115,9 @@ Start by defining the app's layout in `index.html`:
<script type='module' src='./app.js'></script> <script type='module' src='./app.js'></script>
</head> </head>
<body> <body>
<div id="titlebar">
<pear-ctrl></pear-ctrl> <pear-ctrl></pear-ctrl>
</div>
<main> <main>
<div id="setup"> <div id="setup">
<div> <div>
@@ -159,6 +154,12 @@ Start by defining the app's layout in `index.html`:
</html> </html>
``` ```
**Note**: To make the `<pear-ctrl>` element draggable in Pear applications, wrap it in another element that uses the following CSS property:
```css
-webkit-app-region : drag;
```
This non-standard CSS property tells the application that this element should act as a draggable region for the entire window.
Running `pear run --dev .` should show Running `pear run --dev .` should show
![Layout of the app](../assets/chat-app-3.png) ![Layout of the app](../assets/chat-app-3.png)