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
No related branches found
No related tags found
No related merge requests found
Pipeline #12692 passed
Stage: test
Show whitespace changes
Inline Side-by-side
packages/common/styles.js
+ 140
− 0
View file @ b515b59c
......@@ -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`
......
packages/file-handling/src/dbp-nextcloud-file-picker.js
+ 30
− 10
View file @ b515b59c
......@@ -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>
<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();}}">
<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();">
<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>
<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();}}">
<label for="ignore">${i18n.t('nextcloud-file-picker.replace-skip')}</label>
<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>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment