From 2cc6955bc34f050b29100a2d902be9cc040837b3 Mon Sep 17 00:00:00 2001 From: dgtlmoon Date: Sat, 9 Apr 2022 12:15:34 +0200 Subject: [PATCH] Miscellaneous settings form visual improvements (#535) --- changedetectionio/forms.py | 28 +++++++++---------- changedetectionio/static/styles/styles.css | 7 ++++- changedetectionio/static/styles/styles.scss | 11 +++++++- .../templates/_common_fields.jinja | 4 +-- changedetectionio/templates/_helpers.jinja | 27 ++++++++++++++++++ changedetectionio/templates/edit.html | 7 ++--- changedetectionio/templates/settings.html | 12 ++++---- 7 files changed, 67 insertions(+), 29 deletions(-) diff --git a/changedetectionio/forms.py b/changedetectionio/forms.py index 2f28a62d..9eaa89a1 100644 --- a/changedetectionio/forms.py +++ b/changedetectionio/forms.py @@ -302,11 +302,11 @@ class quickWatchForm(Form): class commonSettingsForm(Form): - notification_urls = StringListField('Notification URL List', validators=[validators.Optional(), ValidateNotificationBodyAndTitleWhenURLisSet(), ValidateAppRiseServers()]) - notification_title = StringField('Notification Title', default=default_notification_title, validators=[validators.Optional(), ValidateTokensList()]) - notification_body = TextAreaField('Notification Body', default=default_notification_body, validators=[validators.Optional(), ValidateTokensList()]) - notification_format = SelectField('Notification Format', choices=valid_notification_formats.keys(), default=default_notification_format) - fetch_backend = RadioField(u'Fetch Method', choices=content_fetcher.available_fetchers(), validators=[ValidateContentFetcherIsReady()]) + notification_urls = StringListField('Notification URL list', validators=[validators.Optional(), ValidateNotificationBodyAndTitleWhenURLisSet(), ValidateAppRiseServers()]) + notification_title = StringField('Notification title', default=default_notification_title, validators=[validators.Optional(), ValidateTokensList()]) + notification_body = TextAreaField('Notification body', default=default_notification_body, validators=[validators.Optional(), ValidateTokensList()]) + notification_format = SelectField('Notification format', choices=valid_notification_formats.keys(), default=default_notification_format) + fetch_backend = RadioField(u'Fetch method', choices=content_fetcher.available_fetchers(), validators=[ValidateContentFetcherIsReady()]) extract_title_as_title = BooleanField('Extract from document and use as watch title', default=False) class watchForm(commonSettingsForm): @@ -316,15 +316,15 @@ class watchForm(commonSettingsForm): minutes_between_check = html5.IntegerField('Maximum time in minutes until recheck', [validators.Optional(), validators.NumberRange(min=1)]) - css_filter = StringField('CSS/JSON/XPATH Filter', [ValidateCSSJSONXPATHInput()]) + css_filter = StringField('CSS/JSON/XPATH filter', [ValidateCSSJSONXPATHInput()]) subtractive_selectors = StringListField('Remove elements', [ValidateCSSJSONXPATHInput(allow_xpath=False, allow_json=False)]) title = StringField('Title') - ignore_text = StringListField('Ignore Text', [ValidateListRegex()]) - headers = StringDictKeyValue('Request Headers') - body = TextAreaField('Request Body', [validators.Optional()]) - method = SelectField('Request Method', choices=valid_method, default=default_method) - ignore_status_codes = BooleanField('Ignore Status Codes (process non-2xx status codes as normal)', default=False) + ignore_text = StringListField('Ignore text', [ValidateListRegex()]) + headers = StringDictKeyValue('Request headers') + body = TextAreaField('Request body', [validators.Optional()]) + method = SelectField('Request method', choices=valid_method, default=default_method) + ignore_status_codes = BooleanField('Ignore status codes (process non-2xx status codes as normal)', default=False) trigger_text = StringListField('Trigger/wait for text', [validators.Optional(), ValidateListRegex()]) save_button = SubmitField('Save', render_kw={"class": "pure-button pure-button-primary"}) @@ -350,12 +350,12 @@ class globalSettingsForm(commonSettingsForm): extract_title_as_title = BooleanField('Extract <title> from document and use as watch title') base_url = StringField('Base URL', validators=[validators.Optional()]) global_subtractive_selectors = StringListField('Remove elements', [ValidateCSSJSONXPATHInput(allow_xpath=False, allow_json=False)]) - global_ignore_text = StringListField('Ignore Text', [ValidateListRegex()]) + global_ignore_text = StringListField('Ignore text', [ValidateListRegex()]) ignore_whitespace = BooleanField('Ignore whitespace') - render_anchor_tag_content = BooleanField('Render Anchor Tag Content', + render_anchor_tag_content = BooleanField('Render anchor tag content', default=False) save_button = SubmitField('Save', render_kw={"class": "pure-button pure-button-primary"}) - real_browser_save_screenshot = BooleanField('Save last screenshot when using Chrome?') + real_browser_save_screenshot = BooleanField('Save last screenshot when using Chrome') removepassword_button = SubmitField('Remove password', render_kw={"class": "pure-button pure-button-primary"}) diff --git a/changedetectionio/static/styles/styles.css b/changedetectionio/static/styles/styles.css index 4cba122a..c5fb4004 100644 --- a/changedetectionio/static/styles/styles.css +++ b/changedetectionio/static/styles/styles.css @@ -182,7 +182,7 @@ body:after, body:before { #notification-customisation { border: 1px solid #ccc; - padding: 1rem; + padding: 0.5rem; border-radius: 5px; } #notification-error-log { @@ -285,6 +285,11 @@ footer { padding-bottom: 1em; } .pure-form .pure-control-group div, .pure-form .pure-group div, .pure-form .pure-controls div { margin: 0px; } + .pure-form .pure-control-group .checkbox > *, .pure-form .pure-group .checkbox > *, .pure-form .pure-controls .checkbox > * { + display: inline; + vertical-align: middle; } + .pure-form .pure-control-group .checkbox > label, .pure-form .pure-group .checkbox > label, .pure-form .pure-controls .checkbox > label { + padding-left: 5px; } .pure-form .error input { background-color: #ffebeb; } .pure-form ul.errors { diff --git a/changedetectionio/static/styles/styles.scss b/changedetectionio/static/styles/styles.scss index e8ed32e2..43974c11 100644 --- a/changedetectionio/static/styles/styles.scss +++ b/changedetectionio/static/styles/styles.scss @@ -241,7 +241,7 @@ body:after, body:before { #notification-customisation { border: 1px solid #ccc; - padding: 1rem; + padding: 0.5rem; border-radius: 5px; } @@ -375,6 +375,15 @@ footer { div { margin: 0px; } + .checkbox { + > * { + display: inline; + vertical-align: middle; + } + > label { + padding-left: 5px; + } + } } /* The input fields with errors */ .error { diff --git a/changedetectionio/templates/_common_fields.jinja b/changedetectionio/templates/_common_fields.jinja index 514db394..a2f6cb46 100644 --- a/changedetectionio/templates/_common_fields.jinja +++ b/changedetectionio/templates/_common_fields.jinja @@ -15,7 +15,7 @@ <li>Use <a target=_new href="https://github.com/caronc/apprise">AppRise URLs</a> for notification to just about any service! <i><a target=_new href="https://github.com/dgtlmoon/changedetection.io/wiki/Notification-configuration-notes">Please read the notification services wiki here for important configuration notes</a></i>.</li> <li><code>discord://</code> notifications are cut at 2,000 characters in length.</li> <li><code>tgram://</code> bots cant send messages to other bots, so you should specify chat ID of non-bot user.</li> - <li>Go here for <a href="{{url_for('notification_logs')}}">Notification debug logs</a></li> + <li>Go here for <a href="{{url_for('notification_logs')}}">notification debug logs</a></li> </ul> </div> <br/> @@ -25,7 +25,7 @@ {% endif %} </div> - <div id="notification-customisation"> + <div id="notification-customisation" class="pure-control-group"> <div class="pure-control-group"> {{ render_field(form.notification_title, class="m-d") }} <span class="pure-form-message-inline">Title for all notifications</span> diff --git a/changedetectionio/templates/_helpers.jinja b/changedetectionio/templates/_helpers.jinja index 72187307..2b0d2829 100644 --- a/changedetectionio/templates/_helpers.jinja +++ b/changedetectionio/templates/_helpers.jinja @@ -1,3 +1,30 @@ +{% macro render_field(field) %} + <div {% if field.errors %} class="error" {% endif %}>{{ field(**kwargs)|safe }} + <div {% if field.errors %} class="error" {% endif %}>{{ field.label }}</div> + + {% if field.errors %} + <ul class=errors> + {% for error in field.errors %} + <li>{{ error }}</li> + {% endfor %} + </ul> + {% endif %} + </div> +{% endmacro %} + +{% macro render_checkbox_field(field) %} + <div class="checkbox {% if field.errors %} error {% endif %}"> + {{ field(**kwargs)|safe }} {{ field.label }} + {% if field.errors %} + <ul class=errors> + {% for error in field.errors %} + <li>{{ error }}</li> + {% endfor %} + </ul> + {% endif %} + </div> +{% endmacro %} + {% macro render_field(field) %} <div {% if field.errors %} class="error" {% endif %}>{{ field.label }}</div> <div {% if field.errors %} class="error" {% endif %}>{{ field(**kwargs)|safe }} diff --git a/changedetectionio/templates/edit.html b/changedetectionio/templates/edit.html index 7229c52f..0517c028 100644 --- a/changedetectionio/templates/edit.html +++ b/changedetectionio/templates/edit.html @@ -1,7 +1,6 @@ {% extends 'base.html' %} {% block content %} -{% from '_helpers.jinja' import render_field %} -{% from '_helpers.jinja' import render_button %} +{% from '_helpers.jinja' import render_field, render_checkbox_field, render_button %} {% from '_common_fields.jinja' import render_common_settings_form %} <script type="text/javascript" src="{{url_for('static_content', group='js', filename='tabs.js')}}" defer></script> <script> @@ -52,7 +51,7 @@ {% endif %} </div> <div class="pure-control-group"> - {{ render_field(form.extract_title_as_title) }} + {{ render_checkbox_field(form.extract_title_as_title) }} </div> </fieldset> </div> @@ -89,7 +88,7 @@ User-Agent: wonderbra 1.0") }} }") }} </div> <div> - {{ render_field(form.ignore_status_codes) }} + {{ render_checkbox_field(form.ignore_status_codes) }} </div> </fieldset> <br/> diff --git a/changedetectionio/templates/settings.html b/changedetectionio/templates/settings.html index 996c58d4..040eb507 100644 --- a/changedetectionio/templates/settings.html +++ b/changedetectionio/templates/settings.html @@ -1,7 +1,7 @@ {% extends 'base.html' %} {% block content %} -{% from '_helpers.jinja' import render_field, render_button %} +{% from '_helpers.jinja' import render_field, render_checkbox_field, render_button %} {% from '_common_fields.jinja' import render_common_settings_form %} <script> const notification_base_url="{{url_for('ajax_callback_send_notification_test')}}"; @@ -53,12 +53,12 @@ </div> <div class="pure-control-group"> - {{ render_field(form.extract_title_as_title) }} + {{ render_checkbox_field(form.extract_title_as_title) }} <span class="pure-form-message-inline">Note: This will automatically apply to all existing watches.</span> </div> <div class="pure-control-group"> - {{ render_field(form.real_browser_save_screenshot) }} + {{ render_checkbox_field(form.real_browser_save_screenshot) }} <span class="pure-form-message-inline">When using a Chrome browser, a screenshot from the last check will be available on the Diff page</span> </div> @@ -71,8 +71,6 @@ {{ render_common_settings_form(form, current_base_url, emailprefix) }} </div> </fieldset> - <a href="{{url_for('notification_logs')}}">Notification debug logs</a> - </div> <div class="tab-pane-inner" id="fetching"> @@ -89,13 +87,13 @@ <div class="tab-pane-inner" id="filters"> <fieldset class="pure-group"> - {{ render_field(form.ignore_whitespace) }} + {{ render_checkbox_field(form.ignore_whitespace) }} <span class="pure-form-message-inline">Ignore whitespace, tabs and new-lines/line-feeds when considering if a change was detected.<br/> <i>Note:</i> Changing this will change the status of your existing watches, possibly trigger alerts etc. </span> </fieldset> <fieldset class="pure-group"> - {{ render_field(form.render_anchor_tag_content) }} + {{ render_checkbox_field(form.render_anchor_tag_content) }} <span class="pure-form-message-inline">Render anchor tag content, default disabled, when enabled renders links as <code>(link text)[https://somesite.com]</code> <br/> <i>Note:</i> Changing this could affect the content of your existing watches, possibly trigger alerts etc.