From f705e32a4747719e91388ea13b4bb74e12aaf790 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Maur=C3=ADcio=20Meneghini=20Fauth?= <mauricio@fauth.dev>
Date: Fri, 20 Mar 2020 21:22:57 -0300
Subject: [PATCH] Replace fieldset with cards for db operations page
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>
---
 .../Controllers/Database/OperationsController.php  |   3 -
 templates/database/operations/index.twig           | 430 +++++++++++----------
 themes/metro/scss/_common.scss                     |   5 -
 3 files changed, 233 insertions(+), 205 deletions(-)
 rewrite templates/database/operations/index.twig (74%)

diff --git a/libraries/classes/Controllers/Database/OperationsController.php b/libraries/classes/Controllers/Database/OperationsController.php
index cb35de73a5..11e84b3dc7 100644
--- a/libraries/classes/Controllers/Database/OperationsController.php
+++ b/libraries/classes/Controllers/Database/OperationsController.php
@@ -302,8 +302,6 @@ class OperationsController extends AbstractController
             $databaseComment = $this->relation->getDbComment($db);
         }
 
-        $createTable = CreateTable::getHtml($db);
-
         $hasAdjustPrivileges = $GLOBALS['db_priv'] && $GLOBALS['table_priv']
             && $GLOBALS['col_priv'] && $GLOBALS['proc_priv'] && $GLOBALS['is_reload_priv'];
 
@@ -337,7 +335,6 @@ class OperationsController extends AbstractController
             'db' => $db,
             'has_comment' => $cfgRelation['commwork'],
             'db_comment' => $databaseComment,
-            'create_table' => $createTable,
             'db_collation' => $db_collation,
             'has_adjust_privileges' => $hasAdjustPrivileges,
             'is_drop_database_allowed' => $isDropDatabaseAllowed,
diff --git a/templates/database/operations/index.twig b/templates/database/operations/index.twig
dissimilarity index 74%
index 6da3958854..cb7cb320c8 100644
--- a/templates/database/operations/index.twig
+++ b/templates/database/operations/index.twig
@@ -1,197 +1,233 @@
-{{ message|raw }}
-
-{% if has_comment %}
-  <div>
-    <form method="post" action="{{ url('/database/operations') }}" id="formDatabaseComment">
-      {{ get_hidden_inputs(db) }}
-
-      <fieldset>
-        <legend>
-          {{ get_icon('b_comment', 'Database comment'|trans) }}
-        </legend>
-        <input type="text" name="comment" class="textfield" value="{{ db_comment }}">
-      </fieldset>
-
-      <fieldset class="tblFooters">
-        <input class="btn btn-primary" type="submit" value="{% trans 'Go' %}">
-      </fieldset>
-    </form>
-  </div>
-{% endif %}
-
-<div>
-  {{ create_table|raw }}
-</div>
-
-{% if db != 'mysql' %}
-  <div>
-    <form id="rename_db_form" class="ajax" method="post" action="{{ url('/database/operations') }}">
-      {{ get_hidden_inputs(db) }}
-      <input type="hidden" name="what" value="data">
-      <input type="hidden" name="db_rename" value="true">
-
-      {% if db_collation is not empty %}
-        <input type="hidden" name="db_collation" value="{{ db_collation }}">
-      {% endif %}
-
-      <fieldset>
-        <legend>
-          {{ get_icon('b_edit', 'Rename database to'|trans) }}
-        </legend>
-        <input id="new_db_name" type="text" name="newname" maxlength="64" class="textfield" required>
-        <br>
-
-        {% if has_adjust_privileges %}
-          <input type="checkbox" name="adjust_privileges" value="1" id="checkbox_adjust_privileges" checked>
-        {% else %}
-          <input type="checkbox" name="adjust_privileges" value="1" id="checkbox_adjust_privileges" title="
-            {%- trans 'You don\'t have sufficient privileges to perform this operation; Please refer to the documentation for more details.' %}" disabled>
-        {% endif %}
-
-        <label for="checkbox_adjust_privileges">
-          {% trans 'Adjust privileges' %}
-          {{ show_docu('faq', 'faq6-39') }}
-        </label>
-        <br>
-      </fieldset>
-
-      <fieldset class="tblFooters">
-        <input id="rename_db_input" class="btn btn-primary" type="submit" value="{% trans 'Go' %}">
-      </fieldset>
-    </form>
-  </div>
-{% endif %}
-
-{% if is_drop_database_allowed %}
-  <div>
-    <fieldset class="caution">
-      <legend>
-        {{ get_icon('b_deltbl', 'Remove database'|trans) }}
-      </legend>
-      <ul>
-        <li>
-          {{ link_or_button(
-            url('/sql', {
-              'sql_query': 'DROP DATABASE ' ~ backquote(db),
-              'back': url('/database/operations'),
-              'goto': url('/'),
-              'reload': true,
-              'purge': true,
-              'message_to_show': 'Database %s has been dropped.'|trans|format(backquote(db))|e,
-              'db': null
-            }),
-            'Drop the database (DROP)'|trans,
-            {
-              'id': 'drop_db_anchor',
-              'class': 'ajax'
-            }
-          ) }}
-          {{ show_mysql_docu('DROP_DATABASE') }}
-        </li>
-      </ul>
-    </fieldset>
-  </div>
-{% endif %}
-
-<div>
-  <form id="copy_db_form" class="ajax" method="post" action="{{ url('/database/operations') }}">
-    {{ get_hidden_inputs(db) }}
-    <input type="hidden" name="db_copy" value="true">
-
-    {% if db_collation is not empty %}
-      <input type="hidden" name="db_collation" value="{{ db_collation }}">
-    {% endif %}
-
-    <fieldset>
-      <legend>
-        {{ get_icon('b_edit', 'Copy database to'|trans) }}
-      </legend>
-
-      <input type="text" maxlength="64" name="newname" class="textfield" required>
-      <br>
-      {{ get_radio_fields('what', {
-        'structure': 'Structure only'|trans,
-        'data': 'Structure and data'|trans,
-        'dataonly': 'Data only'|trans
-      }, 'data', true) }}
-      <br>
-
-      <input type="checkbox" name="create_database_before_copying" value="1" id="checkbox_create_database_before_copying" checked>
-      <label for="checkbox_create_database_before_copying">{% trans 'CREATE DATABASE before copying' %}</label>
-      <br>
-
-      <input type="checkbox" name="drop_if_exists" value="true" id="checkbox_drop">
-      <label for="checkbox_drop">{{ 'Add %s'|trans|format('DROP TABLE / DROP VIEW') }}</label>
-      <br>
-
-      <input type="checkbox" name="sql_auto_increment" value="1" id="checkbox_auto_increment" checked>
-      <label for="checkbox_auto_increment">{% trans 'Add AUTO_INCREMENT value' %}</label>
-      <br>
-
-      <input type="checkbox" name="add_constraints" value="1" id="checkbox_constraints" checked>
-      <label for="checkbox_constraints">{% trans 'Add constraints' %}</label>
-      <br>
-
-      {% if has_adjust_privileges %}
-        <input type="checkbox" name="adjust_privileges" value="1" id="checkbox_privileges" checked>
-      {% else %}
-        <input type="checkbox" name="adjust_privileges" value="1" id="checkbox_privileges" title="
-            {%- trans 'You don\'t have sufficient privileges to perform this operation; Please refer to the documentation for more details.' %}" disabled>
-      {% endif %}
-
-      <label for="checkbox_privileges">
-        {% trans 'Adjust privileges' %}
-        {{ show_docu('faq', 'faq6-39') }}
-      </label>
-      <br>
-
-      <input type="checkbox" name="switch_to_new" value="true" id="checkbox_switch"{{ switch_to_new ? ' checked' }}>
-      <label for="checkbox_switch">{% trans 'Switch to copied database' %}</label>
-    </fieldset>
-
-    <fieldset class="tblFooters">
-      <input class="btn btn-primary" type="submit" name="submit_copy" value="{% trans 'Go' %}">
-    </fieldset>
-  </form>
-</div>
-
-<div>
-  <form id="change_db_charset_form" class="ajax" method="post" action="{{ url('/database/operations') }}">
-    {{ get_hidden_inputs(db) }}
-
-    <fieldset>
-      <legend>
-        <label for="select_db_collation">
-          {{ get_icon('s_asci', 'Collation'|trans) }}
-        </label>
-      </legend>
-
-      <select lang="en" dir="ltr" name="db_collation" id="select_db_collation">
-        <option value=""></option>
-        {% for charset in charsets %}
-          <optgroup label="{{ charset.getName() }}" title="{{ charset.getDescription() }}">
-            {% for collation in collations[charset.getName()] %}
-              <option value="{{ collation.getName() }}" title="{{ collation.getDescription() }}"{{ db_collation == collation.getName() ? ' selected' }}>
-                {{ collation.getName() }}
-              </option>
-            {% endfor %}
-          </optgroup>
-        {% endfor %}
-      </select>
-      <br>
-
-      <input type="checkbox" name="change_all_tables_collations" id="checkbox_change_all_tables_collations">
-      <label for="checkbox_change_all_tables_collations">{% trans 'Change all tables collations' %}</label>
-      <br>
-
-      <span id="span_change_all_tables_columns_collations">
-        <input type="checkbox" name="change_all_tables_columns_collations" id="checkbox_change_all_tables_columns_collations">
-        <label for="checkbox_change_all_tables_columns_collations">{% trans 'Change all tables columns collations' %}</label>
-      </span>
-    </fieldset>
-
-    <fieldset class="tblFooters">
-      <input class="btn btn-primary" type="submit" name="submitcollation" value="{% trans 'Go' %}">
-    </fieldset>
-  </form>
-</div>
+<div class="container-fluid">
+
+  {{ message|raw }}
+
+  {% if has_comment %}
+    <form method="post" action="{{ url('/database/operations') }}" id="formDatabaseComment">
+      {{ get_hidden_inputs(db) }}
+      <div class="card mb-2">
+        <div class="card-header">{{ get_icon('b_comment', 'Database comment'|trans) }}</div>
+        <div class="card-body">
+          <div class="form-row">
+            <div class="col-auto">
+              <label class="sr-only" for="databaseCommentInput">{% trans 'Database comment' %}</label>
+              <input class="form-control textfield" id="databaseCommentInput" type="text" name="comment" value="{{ db_comment }}">
+            </div>
+          </div>
+        </div>
+        <div class="card-footer text-right">
+          <input class="btn btn-primary" type="submit" value="{% trans 'Go' %}">
+        </div>
+      </div>
+    </form>
+  {% endif %}
+
+  <form id="create_table_form_minimal" method="post" action="{{ url('/table/create') }}" class="lock-page">
+    {{ get_hidden_inputs(db) }}
+
+    <div class="card mb-2">
+      <div class="card-header">{{ get_icon('b_table_add', 'Create table'|trans) }}</div>
+      <div class="card-body">
+        <div class="form-row">
+          <div class="col-auto">
+            <label for="exampleInputEmail1">{% trans 'Name' %}</label>
+            <input class="form-control" type="text" id="exampleInputEmail1" name="table" required>
+          </div>
+          <div class="col-auto">
+            <label for="exampleInputEmail1">{% trans 'Number of columns' %}</label>
+            <input class="form-control" type="number" id="exampleInputEmail1" name="num_fields" min="1" value="4" required>
+          </div>
+        </div>
+      </div>
+
+      <div class="card-footer text-right">
+        <input class="btn btn-primary" type="submit" value="{% trans "Go" %}">
+      </div>
+    </div>
+  </form>
+
+  {% if db != 'mysql' %}
+    <form id="rename_db_form" class="ajax" method="post" action="{{ url('/database/operations') }}">
+      {{ get_hidden_inputs(db) }}
+      <input type="hidden" name="what" value="data">
+      <input type="hidden" name="db_rename" value="true">
+
+      {% if db_collation is not empty %}
+        <input type="hidden" name="db_collation" value="{{ db_collation }}">
+      {% endif %}
+
+      <div class="card mb-2">
+        <div class="card-header">{{ get_icon('b_edit', 'Rename database to'|trans) }}</div>
+        <div class="card-body">
+          <div class="form-row">
+            <div class="col-auto">
+              <label class="sr-only" for="new_db_name">{% trans 'New database name' %}</label>
+              <input class="form-control textfield" id="new_db_name" type="text" name="newname" maxlength="64" required>
+            </div>
+          </div>
+
+          <div class="form-check">
+            <input class="form-check-input" type="checkbox" name="adjust_privileges" value="1" id="checkbox_adjust_privileges"
+              {%- if has_adjust_privileges %} checked{% else %} title="
+              {%- trans 'You don\'t have sufficient privileges to perform this operation; Please refer to the documentation for more details.' %}" disabled{% endif %}>
+            <label class="form-check-label" for="checkbox_adjust_privileges">
+              {% trans 'Adjust privileges' %}
+              {{ show_docu('faq', 'faq6-39') }}
+            </label>
+          </div>
+        </div>
+
+        <div class="card-footer text-right">
+          <input class="btn btn-primary" type="submit" value="{% trans 'Go' %}">
+        </div>
+      </div>
+    </form>
+  {% endif %}
+
+  {% if is_drop_database_allowed %}
+    <div class="card mb-2">
+      <div class="card-header">{{ get_icon('b_deltbl', 'Remove database'|trans) }}</div>
+      <div class="card-body">
+        <div class="card-text">
+          {{ link_or_button(
+            url('/sql', {
+              'sql_query': 'DROP DATABASE ' ~ backquote(db),
+              'back': url('/database/operations'),
+              'goto': url('/'),
+              'reload': true,
+              'purge': true,
+              'message_to_show': 'Database %s has been dropped.'|trans|format(backquote(db))|e,
+              'db': null
+            }),
+            'Drop the database (DROP)'|trans,
+            {
+              'id': 'drop_db_anchor',
+              'class': 'ajax text-danger'
+            }
+          ) }}
+          {{ show_mysql_docu('DROP_DATABASE') }}
+        </div>
+      </div>
+    </div>
+  {% endif %}
+
+  <form id="copy_db_form" class="ajax" method="post" action="{{ url('/database/operations') }}">
+    {{ get_hidden_inputs(db) }}
+    <input type="hidden" name="db_copy" value="true">
+
+    {% if db_collation is not empty %}
+      <input type="hidden" name="db_collation" value="{{ db_collation }}">
+    {% endif %}
+
+    <div class="card mb-2">
+      <div class="card-header">{{ get_icon('b_edit', 'Copy database to'|trans) }}</div>
+      <div class="card-body">
+        <div class="form-row">
+          <div class="col-auto">
+            <label class="sr-only" for="renameDbNameInput">{% trans 'Database name' %}</label>
+            <input class="form-control textfield" id="renameDbNameInput" type="text" maxlength="64" name="newname" required>
+          </div>
+        </div>
+
+        <div class="form-check mt-2">
+          <input class="form-check-input" type="radio" name="what" id="whatRadio1" value="structure">
+          <label class="form-check-label" for="whatRadio1">
+            {% trans 'Structure only' %}
+          </label>
+        </div>
+        <div class="form-check">
+          <input class="form-check-input" type="radio" name="what" id="whatRadio2" value="data" checked>
+          <label class="form-check-label" for="whatRadio2">
+            {% trans 'Structure and data' %}
+          </label>
+        </div>
+        <div class="form-check">
+          <input class="form-check-input" type="radio" name="what" id="whatRadio3" value="dataonly">
+          <label class="form-check-label" for="whatRadio3">
+            {% trans 'Data only' %}
+          </label>
+        </div>
+
+        <div class="form-check mt-2">
+          <input class="form-check-input" type="checkbox" name="create_database_before_copying" value="1" id="checkbox_create_database_before_copying" checked>
+          <label class="form-check-label" for="checkbox_create_database_before_copying">{% trans 'CREATE DATABASE before copying' %}</label>
+        </div>
+
+        <div class="form-check">
+          <input class="form-check-input" type="checkbox" name="drop_if_exists" value="true" id="checkbox_drop">
+          <label class="form-check-label" for="checkbox_drop">{{ 'Add %s'|trans|format('DROP TABLE / DROP VIEW') }}</label>
+        </div>
+
+        <div class="form-check">
+          <input class="form-check-input" type="checkbox" name="sql_auto_increment" value="1" id="checkbox_auto_increment" checked>
+          <label class="form-check-label" for="checkbox_auto_increment">{% trans 'Add AUTO_INCREMENT value' %}</label>
+        </div>
+
+        <div class="form-check">
+          <input class="form-check-input" type="checkbox" name="add_constraints" value="1" id="checkbox_constraints" checked>
+          <label class="form-check-label" for="checkbox_constraints">{% trans 'Add constraints' %}</label>
+        </div>
+
+        <div class="form-check">
+          <input class="form-check-input" type="checkbox" name="adjust_privileges" value="1" id="checkbox_privileges"
+            {%- if has_adjust_privileges %} checked{% else %} title="
+            {%- trans 'You don\'t have sufficient privileges to perform this operation; Please refer to the documentation for more details.' %}" disabled{% endif %}>
+          <label class="form-check-label" for="checkbox_privileges">
+            {% trans 'Adjust privileges' %}
+            {{ show_docu('faq', 'faq6-39') }}
+          </label>
+        </div>
+
+        <div class="form-check">
+          <input class="form-check-input" type="checkbox" name="switch_to_new" value="true" id="checkbox_switch"{{ switch_to_new ? ' checked' }}>
+          <label class="form-check-label" for="checkbox_switch">{% trans 'Switch to copied database' %}</label>
+        </div>
+      </div>
+
+      <div class="card-footer text-right">
+        <input class="btn btn-primary" type="submit" name="submit_copy" value="{% trans 'Go' %}">
+      </div>
+    </div>
+  </form>
+
+  <form id="change_db_charset_form" class="ajax" method="post" action="{{ url('/database/operations') }}">
+    {{ get_hidden_inputs(db) }}
+
+    <div class="card mb-2">
+      <div class="card-header">{{ get_icon('s_asci', 'Collation'|trans) }}</div>
+      <div class="card-body">
+        <div class="form-row">
+          <div class="col-auto">
+            <label class="sr-only" for="select_db_collation">{% trans 'Collation' %}</label>
+            <select class="form-control" lang="en" dir="ltr" name="db_collation" id="select_db_collation">
+              <option value=""></option>
+              {% for charset in charsets %}
+                <optgroup label="{{ charset.getName() }}" title="{{ charset.getDescription() }}">
+                  {% for collation in collations[charset.getName()] %}
+                    <option value="{{ collation.getName() }}" title="{{ collation.getDescription() }}"{{ db_collation == collation.getName() ? ' selected' }}>
+                      {{ collation.getName() }}
+                    </option>
+                  {% endfor %}
+                </optgroup>
+              {% endfor %}
+            </select>
+          </div>
+        </div>
+
+        <div class="form-check">
+          <input class="form-check-input" type="checkbox" name="change_all_tables_collations" id="checkbox_change_all_tables_collations">
+          <label class="form-check-label" for="checkbox_change_all_tables_collations">{% trans 'Change all tables collations' %}</label>
+        </div>
+        <div class="form-check" id="span_change_all_tables_columns_collations">
+          <input class="form-check-input" type="checkbox" name="change_all_tables_columns_collations" id="checkbox_change_all_tables_columns_collations">
+          <label class="form-check-label" for="checkbox_change_all_tables_columns_collations">{% trans 'Change all tables columns collations' %}</label>
+        </div>
+      </div>
+
+      <div class="card-footer text-right">
+        <input class="btn btn-primary" type="submit" name="submitcollation" value="{% trans 'Go' %}">
+      </div>
+    </div>
+  </form>
+
+</div>
diff --git a/themes/metro/scss/_common.scss b/themes/metro/scss/_common.scss
index 778361fac3..09ef44ad46 100644
--- a/themes/metro/scss/_common.scss
+++ b/themes/metro/scss/_common.scss
@@ -2285,11 +2285,6 @@ form {
     }
   }
 
-  &#formDatabaseComment .tblFooters,
-  &#create_table_form_minimal .tblFooters,
-  &#rename_db_form .tblFooters,
-  &#copy_db_form .tblFooters,
-  &#change_db_charset_form .tblFooters,
   &#alterTableOrderby .tblFooters,
   &#moveTableForm .tblFooters,
   &#copyTable .tblFooters,
-- 
2.11.4.GIT