|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Layouts - DWN Documentation</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
<button class="mobile-menu-btn">Menu</button>
|
|
|
|
<div class="layout">
|
|
<aside class="sidebar">
|
|
<div class="sidebar-header">
|
|
<h1>DWN</h1>
|
|
<span class="version">v1.0.0</span>
|
|
</div>
|
|
|
|
<div class="search-box">
|
|
<input type="text" class="search-input" placeholder="Search docs...">
|
|
</div>
|
|
|
|
<nav class="sidebar-nav">
|
|
<div class="nav-section">
|
|
<div class="nav-section-title">Getting Started</div>
|
|
<a href="index.html" class="nav-link">Introduction</a>
|
|
<a href="installation.html" class="nav-link">Installation</a>
|
|
<a href="quickstart.html" class="nav-link">Quick Start</a>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<div class="nav-section-title">User Guide</div>
|
|
<a href="features.html" class="nav-link">Features</a>
|
|
<a href="shortcuts.html" class="nav-link">Keyboard Shortcuts</a>
|
|
<a href="configuration.html" class="nav-link">Configuration</a>
|
|
<a href="layouts.html" class="nav-link active">Layouts</a>
|
|
<a href="ai-features.html" class="nav-link">AI Integration</a>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<div class="nav-section-title">API Reference</div>
|
|
<a href="api-overview.html" class="nav-link">API Overview</a>
|
|
<a href="api-reference.html" class="nav-link">API Reference</a>
|
|
<a href="api-examples.html" class="nav-link">API Examples</a>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<div class="nav-section-title">Advanced</div>
|
|
<a href="architecture.html" class="nav-link">Architecture</a>
|
|
<a href="building.html" class="nav-link">Building from Source</a>
|
|
</div>
|
|
</nav>
|
|
</aside>
|
|
|
|
<main class="main-content">
|
|
<div class="content">
|
|
<div class="page-header">
|
|
<h1>Layouts</h1>
|
|
<p class="lead">Understanding DWN's window layout system</p>
|
|
</div>
|
|
|
|
<div class="toc">
|
|
<div class="toc-title">On this page</div>
|
|
<ul class="toc-list">
|
|
<li><a href="#overview">Overview</a></li>
|
|
<li><a href="#tiling">Tiling Layout</a></li>
|
|
<li><a href="#floating">Floating Layout</a></li>
|
|
<li><a href="#monocle">Monocle Layout</a></li>
|
|
<li><a href="#per-workspace">Per-Workspace Settings</a></li>
|
|
<li><a href="#shortcuts">Layout Shortcuts</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h2 id="overview">Overview</h2>
|
|
<p>DWN provides three layout modes that determine how windows are arranged on screen. Each workspace maintains its own layout settings independently.</p>
|
|
|
|
<p>Press <code>Super+Space</code> to cycle through layouts: Tiling → Floating → Monocle → Tiling</p>
|
|
|
|
<div class="alert alert-info">
|
|
<strong>Tip:</strong> The current layout is shown in the panel with a symbol: <code>[]=</code> for tiling, <code>><></code> for floating, <code>[M]</code> for monocle.
|
|
</div>
|
|
|
|
<h2 id="tiling">Tiling Layout</h2>
|
|
<p>The default layout. Windows automatically arrange themselves in a master-stack pattern.</p>
|
|
|
|
<h3>How It Works</h3>
|
|
<div class="code-block">
|
|
<pre><code>+------------------+----------+
|
|
| | Window |
|
|
| Master | 2 |
|
|
| Window +----------+
|
|
| 1 | Window |
|
|
| | 3 |
|
|
+------------------+----------+</code></pre>
|
|
</div>
|
|
|
|
<ul>
|
|
<li>The <strong>master area</strong> (left) contains the primary window(s)</li>
|
|
<li>The <strong>stack area</strong> (right) contains secondary windows</li>
|
|
<li>Windows are automatically sized to fill the screen</li>
|
|
<li>No manual positioning required</li>
|
|
</ul>
|
|
|
|
<h3>Master Ratio</h3>
|
|
<p>Controls the width of the master area relative to the screen.</p>
|
|
<ul>
|
|
<li><code>Super+H</code> - Decrease master ratio (shrink master area)</li>
|
|
<li><code>Super+L</code> - Increase master ratio (expand master area)</li>
|
|
<li>Range: 10% to 90%</li>
|
|
<li>Default: 55%</li>
|
|
</ul>
|
|
|
|
<h3>Master Count</h3>
|
|
<p>Controls how many windows occupy the master area.</p>
|
|
<ul>
|
|
<li><code>Super+I</code> - Increase master count</li>
|
|
<li><code>Super+D</code> - Decrease master count</li>
|
|
<li>Range: 1 to 10</li>
|
|
<li>Default: 1</li>
|
|
</ul>
|
|
|
|
<p>With master count of 2:</p>
|
|
<div class="code-block">
|
|
<pre><code>+--------+---------+----------+
|
|
| Master | Master | Stack |
|
|
| 1 | 2 | 3 |
|
|
| | +----------+
|
|
| | | Stack |
|
|
| | | 4 |
|
|
+--------+---------+----------+</code></pre>
|
|
</div>
|
|
|
|
<h3>Floating Windows in Tiling</h3>
|
|
<p>Press <code>Super+F9</code> to toggle floating mode for a window. Floating windows:</p>
|
|
<ul>
|
|
<li>Are exempt from automatic tiling</li>
|
|
<li>Can be freely moved and resized</li>
|
|
<li>Float above tiled windows</li>
|
|
<li>Useful for dialogs, small utilities, reference windows</li>
|
|
</ul>
|
|
|
|
<h2 id="floating">Floating Layout</h2>
|
|
<p>Traditional overlapping window management like most desktop environments.</p>
|
|
|
|
<h3>Characteristics</h3>
|
|
<ul>
|
|
<li>Windows maintain their own position and size</li>
|
|
<li>No automatic arrangement</li>
|
|
<li>Drag title bars to move windows</li>
|
|
<li>Drag window edges to resize</li>
|
|
<li>Click to raise windows</li>
|
|
</ul>
|
|
|
|
<h3>Window Controls</h3>
|
|
<p>In floating mode, windows have full manual control:</p>
|
|
<ul>
|
|
<li><strong>Move</strong>: Drag the title bar</li>
|
|
<li><strong>Resize</strong>: Drag the window border</li>
|
|
<li><strong>Maximize</strong>: <code>Alt+F10</code> or click maximize button</li>
|
|
<li><strong>Minimize</strong>: <code>Alt+F9</code> or click minimize button</li>
|
|
</ul>
|
|
|
|
<h2 id="monocle">Monocle Layout</h2>
|
|
<p>Each window takes the full screen. Only one window visible at a time.</p>
|
|
|
|
<h3>Use Cases</h3>
|
|
<ul>
|
|
<li>Focused work on a single application</li>
|
|
<li>Small screens or high window count</li>
|
|
<li>Reading or writing documents</li>
|
|
<li>Video or media playback</li>
|
|
</ul>
|
|
|
|
<h3>Navigation</h3>
|
|
<ul>
|
|
<li><code>Alt+Tab</code> - Switch to next window</li>
|
|
<li><code>Alt+Shift+Tab</code> - Switch to previous window</li>
|
|
<li>Taskbar click - Switch to specific window</li>
|
|
</ul>
|
|
|
|
<div class="alert alert-info">
|
|
<strong>Note:</strong> Windows maintain decorations in monocle mode unless fullscreen (<code>Alt+F11</code>).
|
|
</div>
|
|
|
|
<h2 id="per-workspace">Per-Workspace Settings</h2>
|
|
<p>Each workspace maintains independent layout settings:</p>
|
|
|
|
<div class="table-container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Setting</th>
|
|
<th>Scope</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Layout Mode</td>
|
|
<td>Per-workspace</td>
|
|
<td>Tiling, floating, or monocle</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Master Ratio</td>
|
|
<td>Per-workspace</td>
|
|
<td>Width of master area</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Master Count</td>
|
|
<td>Per-workspace</td>
|
|
<td>Windows in master area</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Window Floating State</td>
|
|
<td>Per-window</td>
|
|
<td>Individual floating toggle</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<p>Example workflow:</p>
|
|
<ul>
|
|
<li>Workspace 1: Tiling layout for coding (editor + terminal)</li>
|
|
<li>Workspace 2: Floating layout for design work</li>
|
|
<li>Workspace 3: Monocle layout for focused writing</li>
|
|
<li>Workspace 4: Tiling with master count 2 for comparison</li>
|
|
</ul>
|
|
|
|
<h2 id="shortcuts">Layout Shortcuts</h2>
|
|
<div class="table-container">
|
|
<table class="shortcut-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Shortcut</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><code>Super+Space</code></td>
|
|
<td>Cycle layout mode</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>Super+H</code></td>
|
|
<td>Shrink master area</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>Super+L</code></td>
|
|
<td>Expand master area</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>Super+I</code></td>
|
|
<td>Increase master count</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>Super+D</code></td>
|
|
<td>Decrease master count</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>Super+F9</code></td>
|
|
<td>Toggle window floating</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>Alt+F10</code></td>
|
|
<td>Toggle maximize</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>Alt+F11</code></td>
|
|
<td>Toggle fullscreen</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h2>Configuration</h2>
|
|
<p>Set default layout behavior in <code>~/.config/dwn/config</code>:</p>
|
|
|
|
<div class="code-block">
|
|
<pre><code>[layout]
|
|
default = tiling # Default layout for new workspaces
|
|
master_ratio = 0.55 # Default master area ratio (0.1-0.9)
|
|
master_count = 1 # Default master window count (1-10)
|
|
|
|
[appearance]
|
|
gap = 5 # Gap between tiled windows (0-100)</code></pre>
|
|
</div>
|
|
|
|
<footer>
|
|
<p>DWN Window Manager - retoor <retoor@molodetz.nl></p>
|
|
</footer>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html>
|