313 lines
19 KiB
HTML
313 lines
19 KiB
HTML
<!doctype html>
|
|
<html class="no-js">
|
|
<head><meta charset="utf-8"/>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1"/>
|
|
<meta name="color-scheme" content="light dark"><meta name="generator" content="Docutils 0.17.1: http://docutils.sourceforge.net/" />
|
|
<link rel="index" title="Index" href="../../genindex.html" /><link rel="search" title="Search" href="../../search.html" /><link rel="next" title="Header Bars" href="header-bars.html" /><link rel="prev" title="Containers" href="../containers.html" />
|
|
|
|
<meta name="generator" content="sphinx-4.3.0, furo 2021.07.05.beta38"/>
|
|
<title>Windows - GNOME Human Interface Guidelines documentation</title>
|
|
<link rel="stylesheet" type="text/css" href="../../_static/pygments.css" />
|
|
<link rel="stylesheet" type="text/css" href="../../_static/styles/furo.css" />
|
|
<link rel="stylesheet" type="text/css" href="../../_static/styles/furo-extensions.css" />
|
|
<link rel="stylesheet" type="text/css" href="../../_static/gnome.css" />
|
|
|
|
|
|
|
|
<style>
|
|
:root {
|
|
--color-code-background: #f8f8f8;
|
|
--color-code-foreground: black;
|
|
--color-brand-primary: #4a86cf;
|
|
--color-brand-content: #4a86cf;
|
|
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--color-code-background: #202020;
|
|
--color-code-foreground: #d0d0d0;
|
|
|
|
}
|
|
}
|
|
|
|
/* For allowing end-user-specific overrides */
|
|
.override-light {
|
|
--color-code-background: #f8f8f8;
|
|
--color-code-foreground: black;
|
|
--color-brand-primary: #4a86cf;
|
|
--color-brand-content: #4a86cf;
|
|
|
|
}
|
|
.override-dark {
|
|
--color-code-background: #202020;
|
|
--color-code-foreground: #d0d0d0;
|
|
|
|
}
|
|
</style><link media="(prefers-color-scheme: dark)" rel="stylesheet" href="../../_static/pygments_dark.css"></head>
|
|
<body dir="">
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
|
<symbol id="svg-toc" viewBox="0 0 24 24">
|
|
<title>Contents</title>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke-width="1.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
|
<path stroke="none" d="M0 0h24v24H0z"/>
|
|
<line x1="4" y1="6" x2="20" y2="6" />
|
|
<line x1="10" y1="12" x2="20" y2="12" />
|
|
<line x1="6" y1="18" x2="20" y2="18" />
|
|
</svg>
|
|
</symbol>
|
|
<symbol id="svg-menu" viewBox="0 0 24 24">
|
|
<title>Menu</title>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|
class="feather feather-menu">
|
|
<line x1="3" y1="12" x2="21" y2="12"></line>
|
|
<line x1="3" y1="6" x2="21" y2="6"></line>
|
|
<line x1="3" y1="18" x2="21" y2="18"></line>
|
|
</svg>
|
|
</symbol>
|
|
<symbol id="svg-arrow-right" viewBox="0 0 24 24">
|
|
<title>Expand</title>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|
class="feather feather-chevron-right">
|
|
<polyline points="9 18 15 12 9 6"></polyline>
|
|
</svg>
|
|
</symbol>
|
|
</svg>
|
|
|
|
<input type="checkbox" class="sidebar-toggle" name="__navigation" id="__navigation">
|
|
<input type="checkbox" class="sidebar-toggle" name="__toc" id="__toc">
|
|
<label class="overlay sidebar-overlay" for="__navigation"></label>
|
|
<label class="overlay toc-overlay" for="__toc"></label>
|
|
|
|
|
|
|
|
<div class="page">
|
|
<header class="mobile-header">
|
|
<div class="header-left">
|
|
<label class="nav-overlay-icon" for="__navigation">
|
|
<i class="icon"><svg><use href="#svg-menu"></use></svg></i>
|
|
</label>
|
|
</div>
|
|
<div class="header-center">
|
|
<a href="../../index.html"><div class="brand">GNOME Human Interface Guidelines</div></a>
|
|
</div>
|
|
<div class="header-right">
|
|
<label class="toc-overlay-icon toc-header-icon" for="__toc">
|
|
<i class="icon"><svg><use href="#svg-toc"></use></svg></i>
|
|
</label>
|
|
</div>
|
|
</header>
|
|
<aside class="sidebar-drawer">
|
|
<div class="sidebar-container">
|
|
|
|
<div class="sidebar-sticky"><a class="sidebar-brand centered" href="../../index.html">
|
|
|
|
<div class="sidebar-logo-container">
|
|
<img class="sidebar-logo" src="../../_static/logo.svg" alt="Logo"/>
|
|
</div>
|
|
|
|
<span class="sidebar-brand-text">GNOME Human Interface Guidelines</span>
|
|
|
|
</a><form class="sidebar-search-container" method="get" action="../../search.html">
|
|
<input class="sidebar-search" placeholder=Search name="q">
|
|
<input type="hidden" name="check_keywords" value="yes">
|
|
<input type="hidden" name="area" value="default">
|
|
</form><div class="sidebar-scroll"><div class="sidebar-tree">
|
|
<ul class="current">
|
|
<li class="toctree-l1"><a class="reference internal" href="../../principles.html">Design Principles</a></li>
|
|
<li class="toctree-l1"><a class="reference internal" href="../../resources.html">Tools & Resources</a></li>
|
|
<li class="toctree-l1 has-children"><a class="reference internal" href="../../guidelines.html">Guidelines</a><input class="toctree-checkbox" id="toctree-checkbox-1" name="toctree-checkbox-1" type="checkbox"/><label for="toctree-checkbox-1"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/app-naming.html">App Naming</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/app-icons.html">App Icons</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/pointer-touch.html">Pointer & Touch</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/keyboard.html">Keyboard</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/ui-icons.html">UI Icons</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/ui-styling.html">UI Styling</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/writing-style.html">Writing Style</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/typography.html">Typography</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/navigation.html">Navigation</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/adaptive.html">Scaling & Adaptiveness</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/accessibility.html">Accessibility</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="toctree-l1 current has-children"><a class="reference internal" href="../../patterns.html">Patterns</a><input checked="" class="toctree-checkbox" id="toctree-checkbox-2" name="toctree-checkbox-2" type="checkbox"/><label for="toctree-checkbox-2"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul class="current">
|
|
<li class="toctree-l2 current has-children"><a class="reference internal" href="../containers.html">Containers</a><input checked="" class="toctree-checkbox" id="toctree-checkbox-3" name="toctree-checkbox-3" type="checkbox"/><label for="toctree-checkbox-3"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul class="current">
|
|
<li class="toctree-l3 current current-page"><a class="current reference internal" href="#">Windows</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="header-bars.html">Header Bars</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="popovers.html">Popovers</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="utility-panes.html">Utility Panes</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="boxed-lists.html">Boxed Lists</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="grid-views.html">Grid Views</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="list-column-views.html">List & Column Views</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="selection-mode.html">Selection & Edit Modes</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="toctree-l2 has-children"><a class="reference internal" href="../nav.html">Navigation</a><input class="toctree-checkbox" id="toctree-checkbox-4" name="toctree-checkbox-4" type="checkbox"/><label for="toctree-checkbox-4"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
|
<li class="toctree-l3"><a class="reference internal" href="../nav/browsing.html">Browsing</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../nav/view-switchers.html">View Switchers</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../nav/tabs.html">Tabs</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../nav/sidebars.html">Sidebars</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../nav/search.html">Search</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="toctree-l2 has-children"><a class="reference internal" href="../controls.html">Controls</a><input class="toctree-checkbox" id="toctree-checkbox-5" name="toctree-checkbox-5" type="checkbox"/><label for="toctree-checkbox-5"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/buttons.html">Buttons</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/menus.html">Menus</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/switches.html">Switches</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/text-fields.html">Text Fields</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/checkboxes.html">Checkboxes</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/radio-buttons.html">Radio Buttons</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/drop-downs.html">Drop-Down Lists</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/sliders.html">Sliders</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/spin-buttons.html">Spin Buttons</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/overlaid.html">Overlaid Controls</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="toctree-l2 has-children"><a class="reference internal" href="../feedback.html">Feedback</a><input class="toctree-checkbox" id="toctree-checkbox-6" name="toctree-checkbox-6" type="checkbox"/><label for="toctree-checkbox-6"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
|
<li class="toctree-l3"><a class="reference internal" href="../feedback/notifications.html">Notifications</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../feedback/toasts.html">Toasts</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../feedback/info-bars.html">Info Bars</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../feedback/progress-bars.html">Progress Bars</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../feedback/spinners.html">Spinners</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../feedback/dialogs.html">Dialogs</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../feedback/placeholders.html">Placeholder Pages</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../feedback/tooltips.html">Tooltips</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="toctree-l1 has-children"><a class="reference internal" href="../../reference.html">Reference</a><input class="toctree-checkbox" id="toctree-checkbox-7" name="toctree-checkbox-7" type="checkbox"/><label for="toctree-checkbox-7"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
|
<li class="toctree-l2"><a class="reference internal" href="../../reference/keyboard.html">Standard Keyboard Shortcuts</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="../../reference/palette.html">Palette</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="../../reference/backgrounds.html">Backgrounds</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</aside>
|
|
<main class="main">
|
|
<div class="content">
|
|
<article role="main">
|
|
<label class="toc-overlay-icon toc-content-icon" for="__toc">
|
|
<i class="icon"><svg><use href="#svg-toc"></use></svg></i>
|
|
</label>
|
|
<section id="windows">
|
|
<h1>Windows<a class="headerlink" href="#windows" title="Permalink to this headline">¶</a></h1>
|
|
<img alt="../../_images/application-window.png" class="light" src="../../_images/application-window.png"/>
|
|
<img alt="../../_images/application-window-dark.png" class="dark" src="../../_images/application-window-dark.png"/>
|
|
<p>Windows are the main containers for application user interfaces.</p>
|
|
<section id="primary-windows">
|
|
<h2>Primary Windows<a class="headerlink" href="#primary-windows" title="Permalink to this headline">¶</a></h2>
|
|
<p>Primary windows host the main functionality of your application, and are what is displayed when your application is launched.</p>
|
|
<ul class="simple">
|
|
<li><p>Primary windows should always be independent — closing one primary window should not result in other primary windows being closed.</p></li>
|
|
<li><p>Apps can be restricted to a single primary window, or can make it possible to have multiple primary windows open at the same time (the latter being common in viewer and editor apps).</p></li>
|
|
<li><p>All primary windows should be resizable.</p></li>
|
|
<li><p>The default size of primary windows should be appropriate to their content. Windows that display large content like documents or videos should be big enough to support viewing and editing without the need to increase the window size. On the other hand, windows with a limited amount of UI can and should default to a smaller size, in order to avoid large amounts of blank space.</p></li>
|
|
</ul>
|
|
</section>
|
|
<section id="secondary-windows">
|
|
<h2>Secondary Windows<a class="headerlink" href="#secondary-windows" title="Permalink to this headline">¶</a></h2>
|
|
<p>Secondary windows are used to contain supplemental controls or information. <strong>About Windows</strong> and <strong>Preferences Windows</strong> are both types of secondary window.</p>
|
|
<ul class="simple">
|
|
<li><p>Secondary windows should always belong on a primary window, so that closing the primary also closes the secondary.</p></li>
|
|
<li><p>Secondary windows can contain information and preferences that are relevant to the entire application, or they can contain information and options for a single content item, such as a document <strong>Properties Window</strong>.</p></li>
|
|
<li><p>Typically, secondary windows are modal to their parent primary window. This ensures that windows are grouped together. However, in some unusual cases, secondary windows can be non-modal to their parent window. This is typically when they provide equivalent functionality to the primary window, such as an email app that allows individual emails to be popped out into their own windows.</p></li>
|
|
<li><p>Avoid stacking secondary windows on top of one another.</p></li>
|
|
<li><p>In general, secondary windows should not be bigger than their parent windows, and should have limited, simple content.</p></li>
|
|
</ul>
|
|
</section>
|
|
<section id="general-guidelines">
|
|
<h2>General Guidelines<a class="headerlink" href="#general-guidelines" title="Permalink to this headline">¶</a></h2>
|
|
<ul class="simple">
|
|
<li><p>Windows should follow the standard Ctrl+W keyboard shortcut to close. Additionally, modal windows should close on Esc.</p></li>
|
|
<li><p>Applications which restore a particular view or content item when they are restarted should also restore their previous window size.</p></li>
|
|
</ul>
|
|
<p>Additional guidance on window sizing can be found in the <a class="reference internal" href="../../guidelines/adaptive.html"><span class="doc">scaling and adaptiveness guidelines</span></a>.</p>
|
|
</section>
|
|
<section id="api-reference">
|
|
<h2>API Reference<a class="headerlink" href="#api-reference" title="Permalink to this headline">¶</a></h2>
|
|
<ul class="simple">
|
|
<li><p><a class="reference external" href="https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ApplicationWindow.html">Adwaita: AdwApplicationWindow</a></p></li>
|
|
<li><p><a class="reference external" href="https://docs.gtk.org/gtk4/class.ApplicationWindow.html">GTK 4: GtkApplicationWindow</a></p></li>
|
|
<li><p><a class="reference external" href="https://docs.gtk.org/gtk4/class.AboutDialog.html">GTK 4: GtkAboutDialog</a></p></li>
|
|
<li><p><a class="reference external" href="https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PreferencesWindow.html">Adwaita: AdwPreferencesWindow</a></p></li>
|
|
<li><p><a class="reference external" href="https://gnome.pages.gitlab.gnome.org/libhandy/doc/1-latest/class.ApplicationWindow.html">Handy: HdyApplicationWindow</a></p></li>
|
|
<li><p><a class="reference external" href="https://docs.gtk.org/gtk3/class.ApplicationWindow.html">GTK 3: GtkApplicationWindow</a></p></li>
|
|
<li><p><a class="reference external" href="https://docs.gtk.org/gtk3/class.AboutDialog.html">GTK 3: GtkAboutDialog</a></p></li>
|
|
<li><p><a class="reference external" href="https://gnome.pages.gitlab.gnome.org/libhandy/doc/1-latest/class.PreferencesWindow.html">Handy: HdyPreferencesWindow</a></p></li>
|
|
</ul>
|
|
</section>
|
|
</section>
|
|
|
|
</article>
|
|
<footer>
|
|
|
|
<div class="related-pages">
|
|
<a class="next-page" href="header-bars.html">
|
|
<div class="page-info">
|
|
<div class="context">
|
|
<span>Next</span>
|
|
</div>
|
|
<div class="title">Header Bars</div>
|
|
</div>
|
|
<svg><use href="#svg-arrow-right"></use></svg>
|
|
</a>
|
|
<a class="prev-page" href="../containers.html">
|
|
<svg><use href="#svg-arrow-right"></use></svg>
|
|
<div class="page-info">
|
|
<div class="context">
|
|
<span>Previous</span>
|
|
</div>
|
|
|
|
<div class="title">Containers</div>
|
|
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
</footer>
|
|
</div>
|
|
<aside class="toc-drawer">
|
|
|
|
|
|
<div class="toc-sticky toc-scroll">
|
|
<div class="toc-title-container">
|
|
<span class="toc-title">
|
|
Contents
|
|
</span>
|
|
</div>
|
|
<div class="toc-tree-container">
|
|
<div class="toc-tree">
|
|
<ul>
|
|
<li><a class="reference internal" href="#">Windows</a><ul>
|
|
<li><a class="reference internal" href="#primary-windows">Primary Windows</a></li>
|
|
<li><a class="reference internal" href="#secondary-windows">Secondary Windows</a></li>
|
|
<li><a class="reference internal" href="#general-guidelines">General Guidelines</a></li>
|
|
<li><a class="reference internal" href="#api-reference">API Reference</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</aside>
|
|
</main>
|
|
</div><script data-url_root="../../" id="documentation_options" src="../../_static/documentation_options.js"></script>
|
|
<script src="../../_static/jquery.js"></script>
|
|
<script src="../../_static/underscore.js"></script>
|
|
<script src="../../_static/doctools.js"></script>
|
|
<script src="../../_static/scripts/main.js"></script>
|
|
</body>
|
|
</html> |