From b515b59cbaa0e3865fb2eae8d1fe31e6d1894bab Mon Sep 17 00:00:00 2001
From: Tamara Steinwender <tamara.steinwender@tugraz.at>
Date: Wed, 19 Aug 2020 10:14:13 +0200
Subject: [PATCH] Added Radiobutton and checkbox styling
---
packages/common/styles.js | 140 ++++++++++++++++++
.../src/dbp-nextcloud-file-picker.js | 40 +++--
2 files changed, 170 insertions(+), 10 deletions(-)
diff --git a/packages/common/styles.js b/packages/common/styles.js
index 1a54554f..01d9230f 100644
--- a/packages/common/styles.js
+++ b/packages/common/styles.js
@@ -28,6 +28,7 @@ export function getThemeCSS() {
--dbp-muted-text: var(--dbp-override-muted-text, #6c757d);
--dbp-border-radius: var(--dbp-override-border-radius, 0px);
--dbp-border-width: var(--dbp-override-border-width, 1px);
+ --dbp-border-color: var(--dbp-override-border-color, #000);
--dbp-placeholder-color: #777;
}
`;
@@ -462,6 +463,145 @@ export function getButtonCSS() {
`;
}
+export function getRadioAndCheckboxCss() {
+ // language=css
+ return css`
+
+ /*
+ Radiobutton:
+ <label class="button-container">
+ Labeltext
+ <input type="radio" name="myradiobutton">
+ <span class="radiobutton"></span>
+ </label>
+
+ Checkbox:
+ <label class="button-container">
+ Labeltext
+ <input type="checkbox" name="mycheckbox">
+ <span class="checkmark"></span>
+ </label>
+ */
+
+ .button-container {
+ display: block;
+ position: relative;
+ padding-left: 35px;
+ cursor: pointer;
+ line-height: 23px;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ }
+
+ .button-container input[type="radio"], .button-container input[type="checkbox"] {
+ position: absolute;
+ opacity: 0;
+ cursor: pointer;
+ height: 0;
+ width: 0;
+ left: 0px;
+ }
+
+ .checkmark {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 21px;
+ width: 21px;
+ background-color: white;
+ border: solid;
+ border-radius: var(--dbp-border-radius);
+ border-width: var(--dbp-border-width);
+ border-color: var(--dbp-border-color);
+ }
+
+ .radiobutton {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 21px;
+ width: 21px;
+ background-color: white;
+ border: solid;
+ border-radius: 100%;
+ border-width: var(--dbp-border-width);
+ border-color: var(--dbp-border-color);
+ }
+
+ .button-container input[type="radio"]:checked ~ .radiobutton:after {
+ border-color: var(--dbp-danger-bg-color);
+ }
+
+ .button-container input[type="radio"]:disabled ~ .radiobutton {
+ border-color: #aaa;
+ background-color: #eee;
+ }
+
+ .button-container input[type="radio"]:checked:disabled ~ .radiobutton:after {
+ border-color: #aaa;
+ background-color: #aaa;
+ }
+
+ .radiobutton:after {
+ content: "";
+ position: absolute;
+ display: none;
+ }
+
+ .button-container input[type="radio"]:checked ~ .radiobutton:after {
+ display: block;
+ }
+
+ .button-container .radiobutton:after {
+ left: 4px;
+ top: 4px;
+ width: 12px;
+ height: 12px;
+ border: solid var(--dbp-danger-bg-color);
+ background-color: var(--dbp-danger-bg-color);
+ border-radius: 100%;
+ }
+
+ .button-container input[type="checkbox"]:checked ~ .checkmark:after {
+ border-color: var(--dbp-danger-bg-color);
+ }
+
+ .button-container input[type="checkbox"]:disabled ~ .checkmark {
+ border-color: #aaa;
+ background-color: #eee;
+ }
+
+ .button-container input[type="checkbox"]:checked:disabled ~ .checkmark:after {
+ border-color: #aaa;
+ }
+
+ .checkmark:after {
+ content: "";
+ position: absolute;
+ display: none;
+ }
+
+ .button-container input[type="checkbox"]:checked ~ .checkmark:after {
+ display: block;
+ }
+
+ .button-container .checkmark:after {
+ left: 7px;
+ top: 4px;
+ width: 6px;
+ height: 10px;
+ border: solid var(--dbp-danger-bg-color);
+ border-width: 0 2px 2px 0;
+ -webkit-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+ }
+
+ `;
+}
+
export function getTagCSS() {
// language=css
return css`
diff --git a/packages/file-handling/src/dbp-nextcloud-file-picker.js b/packages/file-handling/src/dbp-nextcloud-file-picker.js
index 24db3f66..8a8d400b 100644
--- a/packages/file-handling/src/dbp-nextcloud-file-picker.js
+++ b/packages/file-handling/src/dbp-nextcloud-file-picker.js
@@ -740,6 +740,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
* Disables or enables the input field for the new file name
*/
setInputFieldVisibility() {
+ console.log("yesssss", !this._("#replace-new-name").checked);
this._("#replace-filename").disabled = !this._("#replace-new-name").checked;
}
@@ -883,6 +884,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
${commonStyles.getButtonCSS()}
${commonStyles.getTextUtilities()}
${commonStyles.getModalDialogCSS()}
+ ${commonStyles.getRadioAndCheckboxCss()}
.block {
margin-bottom: 10px;
@@ -1146,6 +1148,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
padding-top: 10px;
}
+
+
@media only screen
and (orientation: portrait)
and (max-device-width: 765px) {
@@ -1342,19 +1346,32 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
${i18n.t('nextcloud-file-picker.replace-text')}?
</h3>
<div>
- <input type="radio" id="replace-new-name" class="radio-btn" name="replacement" value="new-name" checked @click="${() => {this.setInputFieldVisibility();}}">
- <label for="new-name">${i18n.t('nextcloud-file-picker.replace-new_name')}:
- <input type="text" id="replace-filename" name="replace-filename" value="" onClick="this.select();">
+ <label class="button-container">
+ <span>
+ ${i18n.t('nextcloud-file-picker.replace-new_name')}:
+
+ </span>
+ <input type="radio" id="replace-new-name" class="radio-btn" name="replacement" value="new-name" checked @click="${() => {this.setInputFieldVisibility();}}">
+ <span class="radiobutton"></span>
+ <input type="text" id="replace-filename" class="input" name="replace-filename" value="" onClick="this.select();">
</label>
+
</div>
- <div>
- <input type="radio" id="replace-replace" class="radio-btn" name="replacement" value="replace" @click="${() => {this.setInputFieldVisibility();}}">
- <label for="replace">${i18n.t('nextcloud-file-picker.replace-replace')}</label>
+
+ <div>
+ <label class="button-container">
+ <span>${i18n.t('nextcloud-file-picker.replace-replace')}</span>
+ <input type="radio" id="replace-replace" name="replacement" value="replace" @click="${() => {this.setInputFieldVisibility();}}">
+ <span class="radiobutton"></span>
+ </label>
</div>
<div>
- <input type="radio" class="radio-btn" name="replacement" value="ignore" @click="${() => {this.setInputFieldVisibility();}}">
- <label for="ignore">${i18n.t('nextcloud-file-picker.replace-skip')}</label>
+ <label class="button-container">
+ <span>${i18n.t('nextcloud-file-picker.replace-skip')}</span>
+ <input type="radio" class="radio-btn" name="replacement" value="ignore" @click="${() => {this.setInputFieldVisibility();}}">
+ <span class="radiobutton"></span>
+ </label>
</div>
</main>
<footer class="modal-footer">
@@ -1363,8 +1380,11 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
<button class="button select-button is-primary" @click="${() => {this.uploadFileAfterConflict();}}">OK</button>
</div>
<div>
- <input type="checkbox" id="replace_mode_all" name="replace_mode_all" value="replace_mode_all" @click="${() => {this.setRepeatForAllConflicts();}}>
- <label for="replace_mode_all">${i18n.t('nextcloud-file-picker.replace-mode-all')}</label>
+ <label class="button-container">
+ ${i18n.t('nextcloud-file-picker.replace-mode-all')}
+ <input type="checkbox" id="replace_mode_all" name="replace_mode_all" value="replace_mode_all" @click="${() => {this.setRepeatForAllConflicts();}}">
+ <span class="checkmark"></span>
+ </label>
</div>
</footer>
</div>
--
GitLab