css/design40/manual/farben.html

   1 <!DOCTYPE html>
   2 <html lang="de">
   3 <head>
   4   <meta charset="utf-8" />
   5   <link href="../style.css" rel="stylesheet">
   6   <title>Kommunikation mit Farben in Kivitendo</title>
   7
   8   <script type="text/javascript" src="../../js/jquery.js"></script>
   9   <script type="text/javascript" src="../../js/common.js"></script>
  10   <script type="text/javascript" src="../../js/namespace.js"></script>
  11   <script type="text/javascript" src="../../js/kivi.js"></script>
  12   <script type="text/javascript" src="../../js/locale/de.js"></script>
  13   <script type="text/javascript" src="../../js/jquery-ui.js"></script>
  14   <script type="text/javascript" src="../../js/kivi.QuickSearch.js"></script>
  15   <script type="text/javascript" src="../../js/kivi.ActionBar.js"></script>
  16   <script type="text/javascript" src="../../js/kivi.Draft.js"></script>
  17   <script type="text/javascript" src="../../js/kivi.File.js"></script>
  18   <script type="text/javascript" src="../../js/kivi.SalesPurchase.js"></script>
  19   <script type="text/javascript" src="../../js/kivi.Part.js"></script>
  20   <script type="text/javascript" src="../../js/ckeditor/ckeditor.js"></script>
  21   <script type="text/javascript" src="../../js/ckeditor/adapters/jquery.js"></script>
  22   <script type="text/javascript" src="../../js/kivi.io.js"></script>
  23   <script type="text/javascript" src="../../js/autocomplete_customer.js"></script>
  24   <script type="text/javascript" src="../../js/client_js.js"></script>
  25   <script type="text/javascript" src="../../js/jquery.cookie.js"></script>
  26   <script type="text/javascript" src="../../js/jquery.checkall.js"></script>
  27   <script type="text/javascript" src="../../js/jquery.download.js"></script>
  28   <script type="text/javascript" src="../../js/jquery/jquery.form.js"></script>
  29   <script type="text/javascript" src="../../js/jquery/fixes.js"></script>
  30   <script type="text/javascript" src="../../js/jquery/jquery.tooltipster.min.js"></script>
  31   <script type="text/javascript" src="../../js/jquery/ui/i18n/jquery.ui.datepicker-de.js"></script>
  32
  33 </head>
  34 <body class="developing">
  35 <header>
  36   <h1>Bedeutung &amp; Anwendung von Farben in Kivitendo</h1>
  37   <nav><a href="index.html" title="Zur Übersicht bzw. Inhaltsverzeichnis">Zum Index</a></nav>
  38 </header>
  39 <div class="wrapper">
  40 <h2>Buttons</h2>
  41 <form action="#">
  42 <h3>Formular absenden (Datenmanipulation, unwiderrufbar)</h3>
  43 <p>Diese Buttons starten den Versand der Formulardaten an den Server (Submit). Aus diesem Grunde sind diese entsprechend prominent eingefärbt.</p>
  44 <div class="buttons">
  45 <table>
  46   <tbody>
  47     <tr>
  48       <td>normal</td>
  49       <td>hover</td>
  50       <td>active</td>
  51       <td></td>
  52     </tr>
  53     <tr>
  54       <td><input type="submit" value="Absenden" class="wi-small"></td>
  55       <td><input type="submit" value="Absenden" class="hover wi-small"></td>
  56       <td><input type="submit" value="Absenden" class="active wi-small"></td>
  57       <td>(INPUT[type=submit])</td>
  58     </tr>
  59     <tr>
  60       <td><input type="button" value="Absenden" class="wi-small"></td>
  61       <td><input type="button" value="Absenden" class="hover wi-small"></td>
  62       <td><input type="button" value="Absenden" class="active wi-small"></td>
  63       <td>(INPUT[type=button])</td>
  64     </tr>
  65     <tr>
  66       <td><button type="button" class=" wi-small">Speichern</button></td>
  67       <td><button type="button" class="hover wi-small">Speichern</button></td>
  68       <td><button type="button" class="active wi-small">Speichern</button></td>
  69       <td>(BUTTON)</td>
  70     </tr>
  71     <tr>
  72       <td><a href="#" class="button wi-small">Absenden</a></td>
  73       <td><a href="#" class="button hover wi-small">Absenden</a></td>
  74       <td><a href="#" class="button active wi-small">Absenden</a></td>
  75       <td>(A.button-Tag)</td>
  76     </tr>
  77   </tbody>
  78 </table>
  79
  80
  81
  82
  83 </div><!-- ./buttons -->
  84
  85 <h3>Navigation &amp; User Interface</h3>
  86 <p>Diese Buttons dienen zur Bedienung der grafischen Benutzer-Schnittstelle im Client und verursachen KEINE unwiderrufliche Datenmanipulationen auf Seiten des Servers.<br>Aus diesem Grunde wird die Klasse <b>«.neutral»</b> bereitgestellt.</p>
  87 <div class="buttons">
  88 <table>
  89   <tbody>
  90     <tr>
  91       <td>normal</td>
  92       <td>hover</td>
  93       <td>active</td>
  94       <td></td>
  95     </tr>
  96     <tr>
  97       <td><input type="reset" value="Zurücksetzen" class="neutral wi-normal"></td>
  98       <td><input type="reset" value="Zurücksetzen" class="neutral-hover wi-normal"></td>
  99       <td><input type="reset" value="Zurücksetzen" class="neutral-active wi-normal"></td>
 100       <td>(INPUT[submit].neutral-Tag)</td>
 101     </tr>
 102     <tr>
 103       <td><button class="neutral wi-normal">Details anzeigen</button></td>
 104       <td><button class="neutral neutral-hover wi-normal">Details anzeigen</button></td>
 105       <td><button class="neutral neutral-active wi-normal">Details anzeigen</button></td>
 106       <td>(BUTTON.neutral-Tag)</td>
 107     </tr>
 108     <tr>
 109       <td><a href="#" class="button neutral wi-normal">Filter anzeigen</a></td>
 110       <td><a href="#" class="button neutral neutral-hover wi-normal">Filter anzeigen</a></td>
 111       <td><a href="#" class="button neutral neutral-active wi-normal">Filter anzeigen</a></td>
 112       <td>(A.button.neutral-Tag)</td>
 113     </tr>
 114   </tbody>
 115 </table>
 116 </div><!-- ./buttons -->
 117 </form>
 118
 119 <h2>Nachrichten (Messages)</h2>
 120 <p>Es gibt zwei ggf. sogar drei Message-<b>Container-Varianten</b> in Kivitendo:</p>
 121 <ul>
 122   <li>Flash_Messages</li>
 123   <li>Old_Style</li>
 124 </ul>
 125 <p>Dann gibt es mind. 4 <b>Message-Arten</b>:</p>
 126 <ul>
 127   <li>Error</li>
 128   <li>Warning</li>
 129   <li>Info oder Hint</li>
 130   <li>OK</li>
 131 </ul>
 132 <p>Nachfolgend werden jeweils zuerst die komplexen Flash-Messages, dann die einfachen Old Style-Messages in P- & DIV-Containern aufgeführt.</p>
 133
 134
 135 <h3>Error</h3>
 136
 137 <p>Fehlermeldung, die ein Grund zur Sorge sein sollten. Diese Nachrichten-Art nur in schwerwiegenden Fällen einsetzen, damit der Benutzer sofort erkennt, dass was schiefgelaufen ist.</p>
 138 <div id="flash_error" class="flash_message flash_message_error">
 139 <div class="button-container">
 140   <a href="#flash_error" style="float:right" class="icon-close button wi-tiny">✕</a>
 141   <span id="flash_error_disp" class="display" style="float:left;">
 142     <a href="#flash_error" style="float:left;" onclick="$('#flash_detail_error').toggle();" class="button wi-tiny">Details</a>
 143   </span>
 144 </div>
 145 <div class="message-container">
 146   <span class="flash_title" style="float:left;">Fehler:</span>
 147   <div class="flash_notification" style="float:left;">
 148     <span id="flash_error_content" class="content">Es ist ein schwerwiegender Fehler aufgetreten!</span>
 149     <div id="flash_detail_error" class="detail" style="display:none;">
 150       <span id="flash_error_detail">Details zum aufgetretenen, schwerwiegenden Fehler. Hierbei handelt es sich aber nicht um einen Rechtschreibefehler.</span>
 151       <a href="#flash_error" style="float:left" onclick="$('#flash_detail_error').hide()" class="icon-close button wi-tiny">✕</a>
 152     </div>
 153   </div>
 154 </div>
 155 </div>
 156 <p class="message message_error">Es ist ein Fehler aufgetreten! (P.message_error)</p>
 157 <div class="message message_error">Es ist ein Fehler aufgetreten! (DIV.message_error)</div>
 158
 159
 160 <h3>Warning</h3>
 161
 162 <p>Wichtige Mitteilung, die aber kein Grund zur Sorge geben sollte. Diese Nachricht unterstützt den Benutzer bei kritischen Prozessen, sollte ihn aber bei täglichem Einsatz nicht von der Arbeit abhalten.</p>
 163 <div id="flash_warning" class="flash_message flash_message_warning">
 164 <div class="button-container">
 165   <a href="#flash_warning" style="float:right" class="icon-close button wi-tiny">✕</a>
 166   <span id="flash_warning_disp" class="display" style="float:left;">
 167     <a href="#flash_warning" style="float:left;" onclick="$('#flash_detail_warning').toggle();" class="button wi-tiny">Details</a>
 168   </span>
 169 </div>
 170 <div class="message-container">
 171   <span class="flash_title" style="float:left;">Warnung:</span>
 172   <div class="flash_notification" style="float:left;">
 173     <span id="flash_warning_content" class="content">Diesen Hinweis sollten Sie ernst nehmen, aber es besteht beim Lesen noch kein Grund zur Beunruhigung.</span>
 174     <div id="flash_detail_warning" class="detail" style="display:none;">
 175       <span id="flash_warning_detail">Sie sollten diesen Hinweis ernst nehmen, und vielleicht kommt er Ihnen auch hinlänglich bekannt vor, sodass Sie wissen, wie Sie damit umzugehen haben. Sie sollten sich darüber im Klaren sein, was diese Warnung bedeutet.</span>
 176       <a href="#flash_warning" style="float:left" onclick="$('#flash_detail_warning').hide()" class="icon-close button wi-tiny">✕</a>
 177     </div>
 178   </div>
 179 </div>
 180 </div>
 181 <p class="message message_warning">Achtung, wichtiger Hinweis! (P.message_warning)</p>
 182 <div class="message message_warning">Achtung, wichtiger Hinweis! (DIV.message_warning)</div>
 183
 184
 185 <h3>Info / Hint</h3>
 186
 187 <p>Hier handelt es sich eher um neutrale, ggf. zu ignorierende Routine-Nachrichten, die den Benutzer auch eine gewisse Sicherheit geben sollten. Nicht im Übermass einsetzen, da die Benutzer das Kivitendo-System u.U. täglich bedienen müssen.</p>
 188 <div id="flash_info" class="flash_message flash_message_info">
 189 <div class="button-container">
 190   <a href="#flash_info" style="float:right" class="icon-close button wi-tiny">✕</a>
 191   <span id="flash_info_disp" class="display" style="float:left;">
 192     <a href="#flash_info" style="float:left;" onclick="$('#flash_detail_info').toggle();" class="button wi-tiny"> Details </a>
 193   </span>
 194 </div>
 195 <div class="message-container">
 196   <span class="flash_title" style="float:left;">Information:</span>
 197   <div class="flash_notification" style="float:left;">
 198     <span id="flash_info_content" class="content">Absolut kein Grund zur Beunruhigung, aber lesen sollten Sie die Nachricht vielleicht einmal in Ihrem Leben.</span>
 199     <div id="flash_detail_info" class="detail" style="display:none;">
 200       <span id="flash_info_detail">Manchmal ist es einfacher, solche Nachrichten zu lesen als gleich das Manual durchrackern zu müssen, was sowieso nur wenige Prozent der Kivitendo-Nutzer machen, ausser eben die karrierebewussten Anwender oder die innerbetrieblich Verantwortlichen.</span>
 201       <a href="#flash_info" style="float:left" onclick="$('#flash_detail_info').hide()" class="icon-close button wi-tiny">✕</a>
 202     </div>
 203   </div>
 204 </div>
 205 </div>
 206 <p class="message message_hint">Es wurden keine Dokumente gefunden, was durchaus korrekt sein kann! (P.message_<b>hint</b>)</p>
 207 <div class="message message_hint">Die Buchungen sind noch nicht abgespeichert worden! (DIV.message_<b>hint</b>)</div>
 208
 209
 210 <h3>OK</h3>
 211
 212 <p>Reine Info, die man getrost ignorieren könnte oder dürfte, aber dem Benutzer die Gewissheit gibt, dass der ausgeführte Prozess erfolgreich abgelaufen ist.</p>
 213 <div id="flash_ok" class="flash_message flash_message_ok">
 214 <div class="button-container">
 215   <a href="#flash_ok" style="float:right" class="icon-close button wi-tiny">✕</a>
 216   <span id="flash_ok_disp" class="display" style="float:left;">
 217     <a href="#flash_ok" style="float:left;" onclick="$('#flash_detail_ok').toggle();" class="button wi-tiny">Details</a>
 218   </span>
 219 </div>
 220 <div class="message-container">
 221   <span class="flash_title" style="float:left;">OK:</span>
 222   <div class="flash_notification" style="float:left;">
 223     <span id="flash_ok_content" class="content">Sie haben erfolgreich einen Prozess ausführen lassen, gratuliere.</span>
 224     <div id="flash_detail_ok" class="detail" style="display:none;">
 225       <span id="flash_ok_detail">Das ist aber noch kein Grund zur Freude. Lesen Sie doch bitte hier, was es im weiteren zu beachten gibt.</span>
 226       <a href="#flash_ok" style="float:left" onclick="$('#flash_detail_ok').hide()" class="icon-close button wi-tiny">✕</a>
 227     </div>
 228   </div>
 229 </div>
 230 </div>
 231 <p class="message message_ok">Achtung, wichtiger Hinweis! (P.message_ok)</p>
 232 <div class="message message_ok">Achtung, wichtiger Hinweis! (DIV.message_ok)</div>
 233
 234
 235 </div>
 236 </body>
 237 </html>