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>
<head>
<style>
pear-ctrl {
margin-top: 9px;
margin-left: 9px;
position: absolute;
}
pear-ctrl[data-platform="darwin"] { float: left; margin-top: 4px; }
pear-ctrl[data-platform="darwin"] { margin-top: 12px; margin-left: 10px; }
pear-ctrl:after {
content: '';
display: block;
height: 1.8rem;
#titlebar {
-webkit-app-region: drag;
height: 30px;
width: 100%;
position: fixed;
z-index: -1;
left: 0;
top: 0;
width: 100%;
background-color: #B0D94413;
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>
</head>
<body>
<div id="titlebar">
<pear-ctrl></pear-ctrl>
</div>
<main>
<div id="setup">
<div>
@@ -159,6 +154,12 @@ Start by defining the app's layout in `index.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
![Layout of the app](../assets/chat-app-3.png)