Skip to content
Snippets Groups Projects
Commit b515b59c authored by Steinwender, Tamara's avatar Steinwender, Tamara
Browse files

Added Radiobutton and checkbox styling

parent 3b3d67c1
Branches
No related tags found
No related merge requests found
Pipeline #12692 passed
Stage: test
Hide whitespace changes
Inline Side-by-side
packages/common/styles.js
+ 140
− 0
View file @ b515b59c
...@@ -28,6 +28,7 @@ export function getThemeCSS() { ...@@ -28,6 +28,7 @@ export function getThemeCSS() {
--dbp-muted-text: var(--dbp-override-muted-text, #6c757d); --dbp-muted-text: var(--dbp-override-muted-text, #6c757d);
--dbp-border-radius: var(--dbp-override-border-radius, 0px); --dbp-border-radius: var(--dbp-override-border-radius, 0px);
--dbp-border-width: var(--dbp-override-border-width, 1px); --dbp-border-width: var(--dbp-override-border-width, 1px);
--dbp-border-color: var(--dbp-override-border-color, #000);
--dbp-placeholder-color: #777; --dbp-placeholder-color: #777;
} }
`; `;
...@@ -462,6 +463,145 @@ export function getButtonCSS() { ...@@ -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() { export function getTagCSS() {
// language=css // language=css
return css` return css`
......
packages/file-handling/src/dbp-nextcloud-file-picker.js
+ 30
− 10
View file @ b515b59c
...@@ -740,6 +740,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -740,6 +740,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
* Disables or enables the input field for the new file name * Disables or enables the input field for the new file name
*/ */
setInputFieldVisibility() { setInputFieldVisibility() {
console.log("yesssss", !this._("#replace-new-name").checked);
this._("#replace-filename").disabled = !this._("#replace-new-name").checked; this._("#replace-filename").disabled = !this._("#replace-new-name").checked;
} }
...@@ -883,6 +884,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -883,6 +884,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
${commonStyles.getButtonCSS()} ${commonStyles.getButtonCSS()}
${commonStyles.getTextUtilities()} ${commonStyles.getTextUtilities()}
${commonStyles.getModalDialogCSS()} ${commonStyles.getModalDialogCSS()}
${commonStyles.getRadioAndCheckboxCss()}
.block { .block {
margin-bottom: 10px; margin-bottom: 10px;
...@@ -1146,6 +1148,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -1146,6 +1148,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
padding-top: 10px; padding-top: 10px;
} }
@media only screen @media only screen
and (orientation: portrait) and (orientation: portrait)
and (max-device-width: 765px) { and (max-device-width: 765px) {
...@@ -1342,19 +1346,32 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -1342,19 +1346,32 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
${i18n.t('nextcloud-file-picker.replace-text')}? ${i18n.t('nextcloud-file-picker.replace-text')}?
</h3> </h3>
<div> <div>
<input type="radio" id="replace-new-name" class="radio-btn" name="replacement" value="new-name" checked @click="${() => {this.setInputFieldVisibility();}}"> <label class="button-container">
<label for="new-name">${i18n.t('nextcloud-file-picker.replace-new_name')}: <span>
<input type="text" id="replace-filename" name="replace-filename" value="" onClick="this.select();"> ${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> </label>
</div> </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>
<div> <div>
<input type="radio" class="radio-btn" name="replacement" value="ignore" @click="${() => {this.setInputFieldVisibility();}}"> <label class="button-container">
<label for="ignore">${i18n.t('nextcloud-file-picker.replace-skip')}</label> <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> </div>
</main> </main>
<footer class="modal-footer"> <footer class="modal-footer">
...@@ -1363,8 +1380,11 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -1363,8 +1380,11 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
<button class="button select-button is-primary" @click="${() => {this.uploadFileAfterConflict();}}">OK</button> <button class="button select-button is-primary" @click="${() => {this.uploadFileAfterConflict();}}">OK</button>
</div> </div>
<div> <div>
<input type="checkbox" id="replace_mode_all" name="replace_mode_all" value="replace_mode_all" @click="${() => {this.setRepeatForAllConflicts();}}> <label class="button-container">
<label for="replace_mode_all">${i18n.t('nextcloud-file-picker.replace-mode-all')}</label> ${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> </div>
</footer> </footer>
</div> </div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment