From b2542b5fcca581f37a9f9ef1794009edefd06e09 Mon Sep 17 00:00:00 2001 From: Cris Date: Thu, 30 Jan 2020 17:09:31 +0100 Subject: [PATCH] Added HELP button and collapsable help-info to TableWidget [ALPHA VERSION] Now this is a standard behaviour of TableWidget. Removed also table related help information from general Hilfe-zu-dieser-Seite help. [ALPHA VERSION]: minor issue to be fixed: button color not toggling correctly when opening help then settings (and way round) --- .../lehre/lehrauftrag/acceptLehrauftrag.php | 22 ----- .../lehre/lehrauftrag/approveLehrauftrag.php | 22 ----- .../lehre/lehrauftrag/orderLehrauftrag.php | 23 ------ public/css/Tabulator.css | 1 - public/js/TableWidget.js | 82 ++++++++++++++++++- 5 files changed, 81 insertions(+), 69 deletions(-) diff --git a/application/views/lehre/lehrauftrag/acceptLehrauftrag.php b/application/views/lehre/lehrauftrag/acceptLehrauftrag.php index 14ebacecb..15de019e5 100644 --- a/application/views/lehre/lehrauftrag/acceptLehrauftrag.php +++ b/application/views/lehre/lehrauftrag/acceptLehrauftrag.php @@ -83,28 +83,6 @@ $this->load->view(
- -

Auswahl

-
- -
-
- -

Ansicht

-
- Spaltenbreite verändern -

- Um die Spaltenbreite zu verändern, fährt man im Spaltenkopf langsam mit dem Mauszeiger auf - den rechten Rand der entprechenden Spalte.
- Sobald sich der Mauszeiger in einen Doppelpfeil verwandelt, wird die Maustaste geklickt und - mit gedrückter Maustaste die Spalte nach rechts erweitert oder nach links verkleinert. -

-
-
diff --git a/application/views/lehre/lehrauftrag/approveLehrauftrag.php b/application/views/lehre/lehrauftrag/approveLehrauftrag.php index f36ae7dc7..ed1852654 100644 --- a/application/views/lehre/lehrauftrag/approveLehrauftrag.php +++ b/application/views/lehre/lehrauftrag/approveLehrauftrag.php @@ -123,28 +123,6 @@ $this->load->view(
-

Auswahl

-
- -
-
- -

Ansicht

-
- Spaltenbreite verändern -

- Um die Spaltenbreite zu verändern, fährt man im Spaltenkopf langsam mit dem Mauszeiger auf - den rechten Rand der entprechenden Spalte.
- Sobald sich der Mauszeiger in einen Doppelpfeil verwandelt, wird die Maustaste geklickt und - mit gedrückter Maustaste die Spalte nach rechts erweitert oder nach links verkleinert. -

-
-
- diff --git a/application/views/lehre/lehrauftrag/orderLehrauftrag.php b/application/views/lehre/lehrauftrag/orderLehrauftrag.php index 27793e8ba..1e79bee0d 100644 --- a/application/views/lehre/lehrauftrag/orderLehrauftrag.php +++ b/application/views/lehre/lehrauftrag/orderLehrauftrag.php @@ -124,29 +124,6 @@ $this->load->view(
- -

Auswahl

-
- -
-
- -

Ansicht

-
- Spaltenbreite verändern -

- Um die Spaltenbreite zu verändern, fährt man im Spaltenkopf langsam mit dem Mauszeiger auf - den rechten Rand der entprechenden Spalte.
- Sobald sich der Mauszeiger in einen Doppelpfeil verwandelt, wird die Maustaste geklickt und - mit gedrückter Maustaste die Spalte nach rechts erweitert oder nach links verkleinert. -

-
-
- diff --git a/public/css/Tabulator.css b/public/css/Tabulator.css index 718295f4e..0545101c9 100644 --- a/public/css/Tabulator.css +++ b/public/css/Tabulator.css @@ -22,7 +22,6 @@ .tabulator { border: 1px solid lightgrey; border-bottom: none; - margin-top: 20px; border-top-left-radius: 0.5em; border-top-right-radius: 0.5em; } diff --git a/public/js/TableWidget.js b/public/js/TableWidget.js index 204d69280..bc49b8c69 100644 --- a/public/js/TableWidget.js +++ b/public/js/TableWidget.js @@ -204,6 +204,32 @@ var FHC_TableWidget = { tableWidgetDiv.find("#tableWidgetTabulator").tabulator("download", "csv", "data.csv", {bom:true}); }) + // Click-Event to collapse help div + tableWidgetDiv.find('#help').on('click', function() + { + + //... auch unteren event für settings hier hinein + $('#tabulatorHelp-' + tableUniqueId).collapse('toggle'); + + $(this).toggleClass('active focus'); + + // De/activate and un/focus on clicked settings button + if(!$(this).hasClass('active focus')) + { + $(this).css({'background-color': 'white', 'border-color' : '#ccc', 'outline': 'none'}); + } + else + { + $(this).css({'background-color': '#e6e6e6'}); + } + + if($('#tabulatorSettings-' + tableUniqueId).hasClass('collapse in')) + { + $('#tabulatorSettings-' + tableUniqueId).removeClass('in'); + // $('#settings').toggleClass('active focus'); + } + }) + // Click-Event to collapse settings div tableWidgetDiv.find('#settings').on('click', function() { @@ -222,6 +248,12 @@ var FHC_TableWidget = { { $(this).css({'background-color': '#e6e6e6'}); } + + if($('#tabulatorHelp-' + tableUniqueId).hasClass('collapse in')) + { + $('#tabulatorHelp-' + tableUniqueId).removeClass('in'); + // $('#help').toggleClass('active focus'); + } }) /** @@ -738,7 +770,8 @@ function _renderTabulatorHeaderHTML(tableWidgetDiv){ tabulatorHeaderHTML += ''; @@ -751,6 +784,8 @@ function _renderTabulatorHeaderCollapseHTML(tableWidgetDiv){ var tableUniqueId = tableWidgetDiv.attr('tableUniqueId'); var tabulatorHeaderCollapseHTML = ''; + + // CollapseHTML 'Settings' tabulatorHeaderCollapseHTML += '
'; tabulatorHeaderCollapseHTML += '
'; tabulatorHeaderCollapseHTML += '
'; @@ -799,6 +834,51 @@ function _renderTabulatorHeaderCollapseHTML(tableWidgetDiv){ tabulatorHeaderCollapseHTML += '
'; // end col tabulatorHeaderCollapseHTML += '
'; // end row + // CollapseHTML 'Help' + tabulatorHeaderCollapseHTML += '
'; + tabulatorHeaderCollapseHTML += '
'; + tabulatorHeaderCollapseHTML += '
'; + tabulatorHeaderCollapseHTML += '
'; + + tabulatorHeaderCollapseHTML += '

Tabelleneinstellungen

'; + tabulatorHeaderCollapseHTML += '
'; + tabulatorHeaderCollapseHTML += 'Spalten ein- und ausblenden'; + tabulatorHeaderCollapseHTML += '

'; + tabulatorHeaderCollapseHTML += '

    '; + tabulatorHeaderCollapseHTML += '
  • Mit einem Klick auf ' + + 'werden die Einstellungen geöffnet.
    • '; + tabulatorHeaderCollapseHTML += '
  • Auf Spalteneinstellungen klicken
    • '; + tabulatorHeaderCollapseHTML += '
  • Durch (wiederholtes) Klicken auf die einzelnen Spaltennamen können ' + + 'diese in der Tabelle beliebig oft aktiviert / deaktiviert werden.
    • '; + tabulatorHeaderCollapseHTML += '
  • Mit einem Klick auf ' + + 'werden die Einstellungen wieder geschlossen.
    • '; + tabulatorHeaderCollapseHTML += '
'; + tabulatorHeaderCollapseHTML += '

'; + tabulatorHeaderCollapseHTML += 'Spaltenbreite verändern'; + tabulatorHeaderCollapseHTML += '

Um die Spaltenbreite zu verändern, fährt man im Spaltenkopf langsam ' + + 'mit dem Mauszeiger auf den rechten Rand der entprechenden Spalte.
' + + 'Sobald sich der Mauszeiger in einen Doppelpfeil verwandelt, wird die Maustaste geklickt und ' + + 'mit gedrückter Maustaste die Spalte nach rechts erweitert oder nach links verkleinert.'; + tabulatorHeaderCollapseHTML += '

'; + tabulatorHeaderCollapseHTML += '
INFO: Alle individuellen Tabelleneinstellungen werden in ' + + 'Ihrem Browser Cache gespeichert. Wenn Sie Ihren Browser Cache löschen, werden Ihre Einstellungen zurückgesetzt und ' + + 'müssen gegebenenfalls neu eingestellt werden.'; + tabulatorHeaderCollapseHTML += '
'; + tabulatorHeaderCollapseHTML += '

'; // end panel-body + + tabulatorHeaderCollapseHTML += '

Zeilen auswählen

'; + tabulatorHeaderCollapseHTML += '
'; + tabulatorHeaderCollapseHTML += '
    '; + tabulatorHeaderCollapseHTML += '
  • Einzeln auswählen: Strg + Klick auf einzelne Zeile(n)
    • '; + tabulatorHeaderCollapseHTML += '
  • Bereich auswählen: Shift + Klick auf Anfangs- und Endzeile
    • '; + tabulatorHeaderCollapseHTML += '
  • Alle auswählen: Button \'Alle auswählen\'
    • '; + tabulatorHeaderCollapseHTML += '
'; + tabulatorHeaderCollapseHTML += '

'; // end panel-body + + tabulatorHeaderCollapseHTML += '
'; // end well + tabulatorHeaderCollapseHTML += '
'; // end col collapse + tabulatorHeaderCollapseHTML += '
'; // end row + return tabulatorHeaderCollapseHTML; }