diff --git a/source/_static/css/breeze.css b/source/_static/css/breeze.css new file mode 100644 index 0000000..db52815 --- /dev/null +++ b/source/_static/css/breeze.css @@ -0,0 +1,24 @@ +/* color definitions */ +.iconred { + color: #da4453; +} +.plasmablue { + color: #3daee9; +} +.noblefir { + color: #27ae60; +} + + +.flex { + display: flex; + flex-wrap: wrap; + align-items: flex-start; +} + .flex > * { + margin-right: 18px; + } + + .flex > *:last-child { + margin-right: 0; + } diff --git a/source/conf.py b/source/conf.py index b2ed646..3323430 100644 --- a/source/conf.py +++ b/source/conf.py @@ -1,178 +1,192 @@ #!/usr/bin/env python3 # -*- coding: utf-8 -*- # # KDE HIG documentation build configuration file, created by # sphinx-quickstart on Tue Feb 6 13:29:47 2018. # # This file is execfile()d with the current directory set to its # containing dir. # # Note that not all possible configuration values are present in this # autogenerated file. # # All configuration values have a default; values that are commented out # serve to show the default. # If extensions (or modules to document with autodoc) are in another directory, # add these directories to sys.path here. If the directory is relative to the # documentation root, use os.path.abspath to make it absolute, like shown here. # # import os # import sys # sys.path.insert(0, os.path.abspath('.')) # -- General configuration ------------------------------------------------ # If your documentation needs a minimal Sphinx version, state it here. # # needs_sphinx = '1.0' # Add any Sphinx extension module names here, as strings. They can be # extensions coming with Sphinx (named 'sphinx.ext.*') or your custom # ones. extensions = ['sphinx.ext.todo'] # Add any paths that contain templates here, relative to this directory. templates_path = ['_templates'] # The suffix(es) of source filenames. # You can specify multiple suffix as a list of string: # # source_suffix = ['.rst', '.md'] source_suffix = '.rst' # The master toctree document. master_doc = 'index' # General information about the project. project = 'KDE HIG' copyright = '2018, Fabian' author = 'Fabian' # The version info for the project you're documenting, acts as replacement for # |version| and |release|, also used in various other places throughout the # built documents. # # The short X.Y version. version = '2.0' # The full version, including alpha/beta/rc tags. release = '2.0' # The language for content autogenerated by Sphinx. Refer to documentation # for a list of supported languages. # # This is also used if you do content translation via gettext catalogs. # Usually you set "language" from the command line for these cases. language = None # List of patterns, relative to source directory, that match files and # directories to ignore when looking for source files. # This patterns also effect to html_static_path and html_extra_path exclude_patterns = [] # The name of the Pygments (syntax highlighting) style to use. pygments_style = 'sphinx' # If true, `todo` and `todoList` produce output, else they produce nothing. todo_include_todos = True # -- Options for HTML output ---------------------------------------------- # The theme to use for HTML and HTML Help pages. See the documentation for # a list of builtin themes. # html_theme = 'sphinx_rtd_theme' # Theme options are theme-specific and customize the look and feel of a theme # further. For a list of options available for each theme, see the # documentation. # # html_theme_options = {} # Add any paths that contain custom static files (such as style sheets) here, # relative to this directory. They are copied after the builtin static files, # so a file named "default.css" will overwrite the builtin "default.css". html_static_path = ['_static'] # Custom sidebar templates, must be a dictionary that maps document names # to template names. # # This is required for the alabaster theme # refs: http://alabaster.readthedocs.io/en/latest/installation.html#sidebars html_sidebars = { '**': [ 'relations.html', # needs 'show_related': True theme option to display 'searchbox.html', ] } # -- Options for HTMLHelp output ------------------------------------------ # Output file base name for HTML help builder. htmlhelp_basename = 'KDEHIGdoc' # -- Options for LaTeX output --------------------------------------------- latex_elements = { # The paper size ('letterpaper' or 'a4paper'). # # 'papersize': 'letterpaper', # The font size ('10pt', '11pt' or '12pt'). # # 'pointsize': '10pt', # Additional stuff for the LaTeX preamble. # # 'preamble': '', # Latex figure (float) alignment # # 'figure_align': 'htbp', } # Grouping the document tree into LaTeX files. List of tuples # (source start file, target name, title, # author, documentclass [howto, manual, or own class]). latex_documents = [ (master_doc, 'KDEHIG.tex', 'KDE HIG Documentation', 'Fabian', 'manual'), ] # -- Options for manual page output --------------------------------------- # One entry per manual page. List of tuples # (source start file, name, description, authors, manual section). man_pages = [ (master_doc, 'kdehig', 'KDE HIG Documentation', [author], 1) ] # -- Options for Texinfo output ------------------------------------------- # Grouping the document tree into Texinfo files. List of tuples # (source start file, target name, title, author, # dir menu entry, description, category) texinfo_documents = [ (master_doc, 'KDEHIG', 'KDE HIG Documentation', author, 'KDEHIG', 'One line description of project.', 'Miscellaneous'), ] # Adding global substitutions rst_epilog = """ .. |devicon| image:: /img/DevIcon.svg :width: 32px :height: 32px .. |designicon| image:: /img/DesignerIcon.svg :width: 32px :height: 32px + +.. |br| raw:: html + +
+ +""" + +rst_prolog = """ +.. role:: iconred +.. role:: plasmablue +.. role:: noblefir """ +# add css file +def setup(app): + app.add_stylesheet('css/breeze.css') diff --git a/source/layout/alignment.rst b/source/layout/alignment.rst index b16a156..c8c3040 100644 --- a/source/layout/alignment.rst +++ b/source/layout/alignment.rst @@ -1,116 +1,123 @@ Alignment ========= Purpose ------- One of the most important aspects of presentation is *alignment* and *placement* of controls. Its theoretical foundation is based on Gestalt psychology. Human perception tends to order experience in a manner that is regular, orderly, symmetric, and simple. Visual impression is generated to an emergent whole based on several principles, called Gestalt laws. Two basic laws are: - Law of proximity: an assortment of objects that are close to each other are formed into a group - Law of similarity: objects will be perceptually grouped together if they are similar to each other Placement of controls should be carefully done according to Gestalt theory. Guidelines ---------- Labels ~~~~~~ - Align labels to the right and connected widgets to the left, making a group of form widgets appear to be center aligned. In Qt5, using a QFormLayout handles this correctly for you. .. container:: flex .. container:: .. figure:: /img/Form_Align_KDE3.qml.png + :scale: 80% - *BAD* + :iconred:`BAD` |br| KDE3 form alignment .. container:: .. figure:: /img/Form_Align_KDE5.qml.png + :scale: 80% - *GOOD* + :noblefir:`GOOD` |br| Plasma 5 form alignment Controls ~~~~~~~~ - Align groups of items vertically rather than horizontally, as this makes them easier to scan visually. Use horizontal or rectangular alignments only if they greatly improve the layout of the window. - Align a group of widgets to the left. This makes use of space more efficiently. .. container:: flex .. container:: .. figure:: /img/Form_Align_OSX.qml.png + :scale: 80% - *BAD* + :iconred:`BAD` |br| OSX form alignment .. container:: .. figure:: /img/Form_Align_KDE5.qml.png + :scale: 80% - *GOOD* + :noblefir:`GOOD` |br| Plasma 5 form alignment - Left align controls over multiple groups (in case of right-to-left languages mirror the alignment). The visual anchor facilitates scanning of content, and left-hand alignment fits as well forms that have been oversized individually. .. container:: flex .. container:: .. figure:: /img/Form_Align_NO.qml.png + :scale: 80% - *BAD* + :iconred:`BAD` |br| no alignment over controls .. container:: .. figure:: /img/Form_Align_YES.qml.png + :scale: 80% - *GOOD* + :noblefir:`GOOD` |br| left aligned controls - Keep track on label size; avoid big differences in text length (even after translation), that could result in much white space for multiple aligned controls. .. figure:: /img/Form_Align_Long.qml.png + :scale: 80% - *BAD* + :iconred:`BAD` |br| Avoid very long captions - In some cases it may be useful to visually separate groups of related options within one group box to facilitate scanning of the dialog. In that case, put a vertical, fixed-size spacer of 16px height between the options. .. figure:: /img/Form_Align_Space.qml.png :alt: Separating groups of related options with a vertical spacer. Separating groups of related options with a vertical spacer. Check boxes and Radio buttons ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ For more details on alignment of :doc:`radio buttons ` and :doc:`checkboxes ` see the detailed HIG pages.