Fix Actions padding and focus outline. (SEA-1426 and SEA-1427)

src/privatim/forms/agenda_item_form.py

@@ -5,6 +5,7 @@
 from wtforms.validators import ValidationError
 
 from privatim.forms.core import Form
+from privatim.forms.fields.fields import ConstantTextAreaField
 from privatim.i18n import _
 from privatim.models import Meeting
 
@@ -34,7 +35,7 @@ def __init__(
             meta={'context': context, 'request': request},
         )
 
-    title = TextAreaField(
+    title = ConstantTextAreaField(
         label=_('Title'), validators=[validators.DataRequired()],
         render_kw={'rows': 3}
     )

src/privatim/forms/consultation_form.py

@@ -7,10 +7,9 @@
 from wtforms.validators import DataRequired
 from wtforms import validators
 
-from privatim.forms.fields.fields import (
-    UploadMultipleFilesWithORMSupport,
-    SearchableSelectField,
-)
+from privatim.forms.fields.fields import (UploadMultipleFilesWithORMSupport,
+                                          SearchableSelectField,
+                                          ConstantTextAreaField, )
 from privatim.i18n import _, translate
 
 from privatim.models import Tag, GeneralFile
@@ -53,7 +52,7 @@ def __init__(
         ]
         self.status.choices = translated_choices
 
-    title = TextAreaField(
+    title = ConstantTextAreaField(
         _('Title'),
         validators=[DataRequired()],
     )

src/privatim/forms/fields/__init__.py

@@ -1,10 +1,11 @@
+# flake8: noqa
 from .fields import (
     TomSelectWidget,
     DateTimeLocalField,
     TimezoneDateTimeField,
     UploadField,
     UploadMultipleField,
-    # UploadOrSelectExistingMultipleFilesField,
+    ConstantTextAreaField
 )
 from .transparent_form_field import TransparentFormField
 
@@ -23,10 +24,12 @@ def FieldList(**fields: 'Field') -> 'TransparentFormField[Any]':
 
 __all__ = (
     'FieldList',
-    'TransparentFormField', "TomSelectWidget",
-    "DateTimeLocalField",
-    "TimezoneDateTimeField",
-    "UploadField",
-    "UploadMultipleField",
+    'TransparentFormField',
+    'TomSelectWidget',
+    'ConstantTextAreaField'
+    'DateTimeLocalField',
+    'TimezoneDateTimeField',
+    'UploadField',
+    'UploadMultipleField',
     # "UploadOrSelectExistingMultipleFilesField"
 )

src/privatim/forms/fields/fields.py

@@ -10,7 +10,7 @@
 from wtforms.validators import InputRequired
 from wtforms.fields import FieldList
 from wtforms.fields.choices import SelectMultipleField
-from wtforms.fields.simple import FileField
+from wtforms.fields.simple import FileField, TextAreaField
 from wtforms.widgets.core import Select
 from werkzeug.datastructures import MultiDict
 from privatim.forms.widgets.widgets import UploadWidget, UploadMultipleWidget
@@ -119,6 +119,11 @@ def process_formdata(self, valuelist: list['RawFormValue']) -> None:
         super(DateTimeLocalField, self).process_formdata(valuelist)
 
 
+class ConstantTextAreaField(TextAreaField):
+    """ TextAreaField that remains and will not be replaced by editor."""
+    pass
+
+
 class TomSelectWidget(Select):
 
     def __init__(

src/privatim/forms/meeting_form.py

@@ -9,7 +9,8 @@
 from privatim.forms.core import Form
 
 from privatim.forms.fields import TimezoneDateTimeField
-from privatim.forms.fields.fields import SearchableSelectField
+from privatim.forms.fields.fields import SearchableSelectField, \
+    ConstantTextAreaField
 from privatim.models import User, Meeting
 from privatim.models import WorkingGroup
 from privatim.i18n import _
@@ -78,7 +79,7 @@ def __init__(
         users = session.execute(query).scalars().all()
         self.attendees.choices = [(str(u.id), u.fullname) for u in users]
 
-    name: StringField = StringField(
+    name: ConstantTextAreaField = ConstantTextAreaField(
         label=_('Name'), validators=[InputRequired()]
     )
 

src/privatim/static/css/custom.css

@@ -98,6 +98,7 @@ body {
     --dimmed-white-background: hsl(60, 6.7%, 97.1%);
     --border-radius: 16px;
     /* ======== Overwrite bootstrap global variables ======= */
+    /* This is very useful in order to make global changes. */
     /* See also https://www.getbootstrap.cn/docs/5.3/customize/css-variables/ */
     --bs-border-radius: 16px;
     --bs-body-font-family: "DM Sans", sans-serif;
@@ -449,10 +450,34 @@ mark {
     border-color: var(--primary-color); /* Matches the checkbox color */
 }
 
-
 .form-check-input:focus {
     box-shadow: none;
+
 }
+/* https://stackoverflow.com/a/48484022/ */
+.form-control:focus,
+.form-select:focus,
+textarea:focus,
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="datetime"]:focus,
+input[type="datetime-local"]:focus,
+input[type="date"]:focus,
+input[type="month"]:focus,
+input[type="time"]:focus,
+input[type="week"]:focus,
+input[type="number"]:focus,
+input[type="email"]:focus,
+input[type="url"]:focus,
+input[type="search"]:focus,
+input[type="tel"]:focus,
+input[type="color"]:focus,
+.uneditable-input:focus {
+    border-color: rgba(255, 84, 95, 0.8);
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 84, 95, 0.6);;
+    outline: 0 none;
+}
+
 
 .consultations-content-width {
     width: 75%;