summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--doc/design_guidelines52
1 files changed, 33 insertions, 19 deletions
diff --git a/doc/design_guidelines b/doc/design_guidelines
index e74fe942..defc626c 100644
--- a/doc/design_guidelines
+++ b/doc/design_guidelines
@@ -1,33 +1,47 @@
Design Guidelines
=================
-Buttons generell rechts wenn möglich.
+Buttons on the right-hand side if possible.
-Reihenfolge von links nach rechts: erst Nebenfunktion (cancel etc) dann Hauptfunktion ganz rechts (save etc)
+Button order from left to right: secondary action (cancel etc), primary action (save etc)
-Einzelne Buttons: normale Größe, glyphicon (außer bei Nebenfunktion), Text
+Single buttons: normal size, glyphicon and text
+Multiple buttons with the same action (e.g. in a table): btn-sm, glyphicon only, no text
-mehrere Buttons mit selber gleicher Funktion (zB. in Tabelle): btn-sm, nur glyphicon ohne Text
-
-Button Farben:
- Aktionen mit irreversiblen Folgen (zB. Delete) = Rot
- Hauptfunktion (zB. Save) = Blau
- Hinzufügen = Grün
- Sonderfunktionen (zB. send test mail) = Gelb
- Nebenfunktion (zB. cancel) = Weiß
+Button colors:
+ Action with irreversible consequences (e.g. delete) = red (btn-danger)
+ Primary action (e.g. save) = blue (btn-primary)
+ Add/Create = green (btn-success)
+ speciel actions (e.g. send test mail) = yellow (btn-warning)
+ Secondary action (e.g. cancel) = white (btn-default)
+
+Prefered glyphicons:
+ add (create) = glyphicon-plus
+ add (assign) = glyphicon-share-alt
+ delete = glyphicon-trash
+ remove = glyphicon-remove
+ save = glyphicon-floppy-disk
+ edit = glyphicon-edit
+ cancel = no glyphicon
+ reset = glyphicon-refresh
+ help = glyphicon-question-sign
+ download = glyphicon-download-alt
+ settings = glyphicon-cog
-Tabellen sortierbar machen mit Stupidtable-Plugin (wenn sinnvoll)
+Tables should be sortable if it makes sense (using the stupidtable-plugin).
+Every column should have a heading.
+
+Bootstrap styled checkboxes and radiobuttons
-Checkboxen und Radio Buttons im Bootstrap Style
+Modals with an action should have a cancel button.
+Info-modals without an action: no buttons in footer. only x-button in the top right corner to close the modal.
-Titel des Moduls immer ganz oben
+Modals instead of confirm()
-Modals mit Aktion haben cancel Button (“cancel | save”)
+Module heading in the top left corner
-Info-Modals ohne Aktion haben keine Buttons unten und stattdessen nur ein x oben rechts
+Subheadings in panels
-Modals statt confirm()
+Saving changes only after using the save button
-Unterüberschriften in Panels für schönere Gliederung
-Speichern erst mit Klick auf Save Button