UI: Refactor form class and fix textarea (#4379)

* UI: Refactor form css class

- Move styles to CSS
- Provide default for form class
- Remove form class from render calls

* Update css

* Condense textarea

Co-authored-by: Lars Hvam <larshp@hotmail.com>

src/ui/zabapgit_css_common.w3mi.data.css

@@ -1043,6 +1043,15 @@ settings_tab tr:first-child td { border-top: 0px; }
   border-radius: 6px;
   text-align: left;
 }
+.dialog-form {
+  margin: 1em 1em 1em 1em; 
+  width: 600px;
+}
+.dialog-form-center {
+  margin: 1em auto 1em; 
+  max-width: 600px;
+  width: 100%;
+}
 .dialog ul {
   padding: 0;
   margin: 0;

src/ui/zcl_abapgit_gui_page_addofflin.clas.abap

@@ -58,7 +58,7 @@ ENDCLASS.
 
 
 
-CLASS ZCL_ABAPGIT_GUI_PAGE_ADDOFFLIN IMPLEMENTATION.
+CLASS zcl_abapgit_gui_page_addofflin IMPLEMENTATION.
 
 
   METHOD constructor.
@@ -222,7 +222,6 @@ CLASS ZCL_ABAPGIT_GUI_PAGE_ADDOFFLIN IMPLEMENTATION.
     CREATE OBJECT ri_html TYPE zcl_abapgit_html.
 
     ri_html->add( mo_form->render(
-      iv_form_class     = 'dialog w600px m-em5-sides margin-v1' " to center add wmax600px and auto-center instead
       io_values         = mo_form_data
       io_validation_log = mo_validation_log ) ).
 

src/ui/zcl_abapgit_gui_page_addonline.clas.abap

@@ -279,7 +279,6 @@ CLASS zcl_abapgit_gui_page_addonline IMPLEMENTATION.
     CREATE OBJECT ri_html TYPE zcl_abapgit_html.
 
     ri_html->add( mo_form->render(
-      iv_form_class     = 'dialog w600px m-em5-sides margin-v1' " to center add wmax600px and auto-center instead
       io_values         = mo_form_data
       io_validation_log = mo_validation_log ) ).
 

src/ui/zcl_abapgit_gui_page_data.clas.abap

@@ -60,7 +60,7 @@ ENDCLASS.
 
 
 
-CLASS ZCL_ABAPGIT_GUI_PAGE_DATA IMPLEMENTATION.
+CLASS zcl_abapgit_gui_page_data IMPLEMENTATION.
 
 
   METHOD constructor.
@@ -142,9 +142,7 @@ CLASS ZCL_ABAPGIT_GUI_PAGE_DATA IMPLEMENTATION.
       iv_label       = 'Add'
       iv_cmd_type    = zif_abapgit_html_form=>c_cmd_type-input_main
       iv_action      = c_event-add ).
-    ri_html->add( lo_form->render(
+    ri_html->add( lo_form->render( lo_form_data ) ).
-      iv_form_class = 'dialog w600px m-em5-sides margin-v1'
-      io_values     = lo_form_data ) ).
 
   ENDMETHOD.
 
@@ -199,9 +197,7 @@ CLASS ZCL_ABAPGIT_GUI_PAGE_DATA IMPLEMENTATION.
         iv_label       = 'Remove'
         iv_cmd_type    = zif_abapgit_html_form=>c_cmd_type-input_main
         iv_action      = c_event-remove ).
-      ri_html->add( lo_form->render(
+      ri_html->add( lo_form->render( lo_form_data ) ).
-        iv_form_class = 'dialog w600px m-em5-sides margin-v1'
-        io_values     = lo_form_data ) ).
     ENDLOOP.
 
   ENDMETHOD.

src/ui/zcl_abapgit_gui_page_sett_glob.clas.abap

@@ -77,7 +77,7 @@ ENDCLASS.
 
 
 
-CLASS ZCL_ABAPGIT_GUI_PAGE_SETT_GLOB IMPLEMENTATION.
+CLASS zcl_abapgit_gui_page_sett_glob IMPLEMENTATION.
 
 
   METHOD constructor.
@@ -360,7 +360,6 @@ CLASS ZCL_ABAPGIT_GUI_PAGE_SETT_GLOB IMPLEMENTATION.
     CREATE OBJECT ri_html TYPE zcl_abapgit_html.
 
     ri_html->add( mo_form->render(
-      iv_form_class     = 'dialog w600px m-em5-sides margin-v1'
       io_values         = mo_form_data
       io_validation_log = mo_validation_log ) ).
 

src/ui/zcl_abapgit_gui_page_sett_pers.clas.abap

@@ -73,7 +73,7 @@ ENDCLASS.
 
 
 
-CLASS ZCL_ABAPGIT_GUI_PAGE_SETT_PERS IMPLEMENTATION.
+CLASS zcl_abapgit_gui_page_sett_pers IMPLEMENTATION.
 
 
   METHOD constructor.
@@ -321,7 +321,6 @@ CLASS ZCL_ABAPGIT_GUI_PAGE_SETT_PERS IMPLEMENTATION.
     CREATE OBJECT ri_html TYPE zcl_abapgit_html.
 
     ri_html->add( mo_form->render(
-      iv_form_class     = 'dialog w600px m-em5-sides margin-v1'
       io_values         = mo_form_data
       io_validation_log = mo_validation_log ) ).
 

src/ui/zcl_abapgit_html_form.clas.abap

@@ -15,7 +15,7 @@ CLASS zcl_abapgit_html_form DEFINITION
         VALUE(ro_form) TYPE REF TO zcl_abapgit_html_form .
     METHODS render
       IMPORTING
-        !iv_form_class     TYPE csequence
+        !iv_form_class     TYPE csequence DEFAULT 'dialog-form'
         !io_values         TYPE REF TO zcl_abapgit_string_map
         !io_validation_log TYPE REF TO zcl_abapgit_string_map OPTIONAL
       RETURNING
@@ -345,7 +345,7 @@ CLASS zcl_abapgit_html_form IMPLEMENTATION.
 
     CREATE OBJECT ri_html TYPE zcl_abapgit_html.
 
-    ri_html->add( |<div class="{ iv_form_class }">| ).
+    ri_html->add( |<div class="dialog { iv_form_class }">| ). " to center use 'dialog-form-center'
     ri_html->add( |<form method="post"{ ls_form_id }>| ).
 
     " Add hidden button that triggers main command when pressing enter
@@ -731,6 +731,7 @@ CLASS zcl_abapgit_html_form IMPLEMENTATION.
   METHOD render_field_textarea.
 
     DATA lv_rows TYPE i.
+    DATA lv_html TYPE string.
 
     ii_html->add( |<label for="{ is_field-name }"{ is_attr-hint }>{
                   is_field-label }{ is_attr-required }</label>| ).
@@ -741,11 +742,13 @@ CLASS zcl_abapgit_html_form IMPLEMENTATION.
 
     lv_rows = lines( zcl_abapgit_convert=>split_string( is_attr-value ) ).
 
-    ii_html->add( |<textarea name="{ is_field-name }" id="{
+    " Avoid adding line-breaks inside textarea tag (except for the actual value)
-                  is_field-name }" rows="{ lv_rows }"{ is_attr-readonly }>| ).
+    lv_html = |<textarea name="{ is_field-name }" id="{ is_field-name }" rows="{ lv_rows }"{ is_attr-readonly }>|.
-    ii_html->add( escape( val    = is_attr-value
+    lv_html = lv_html && escape( val    = is_attr-value
-                          format = cl_abap_format=>e_html_attr ) ).
+                                 format = cl_abap_format=>e_html_attr ).
-    ii_html->add( |</textarea>| ).
+    lv_html = lv_html && |</textarea>|.
+
+    ii_html->add( lv_html ).
 
   ENDMETHOD.