fix: remaining use of mdl classes in ACP

This commit is contained in:
Julian Lam
2022-10-24 14:07:32 -04:00
parent 836993d137
commit e63f8826b4
20 changed files with 68 additions and 11511 deletions

View File

@@ -10,6 +10,8 @@
@import "./manage/tags";
@import "./manage/groups";
@import "./appearance/customise";
@import "./appearance/themes";
@import "./appearance/skins";
@import "./extend/plugins";
@import "./extend/rewards";
@import "./extend/widgets";
@@ -273,13 +275,7 @@ form small {
}
#save {
width: 64px;
height: 64px;
transition: background-color 500ms linear;
i {
font-size: 1.5em;
}
@include floating-button;
&.saved {
background-color: $success;

View File

@@ -0,0 +1,3 @@
#skins > [data-type] button {
@include floating-button;
}

View File

@@ -0,0 +1,3 @@
#revert_theme {
@include floating-button;
}

View File

@@ -42,4 +42,11 @@
min-height: 110px;
}
}
}
#new {
@include floating-button;
bottom: calc(64px + $spacer);
background-color: $success;
}

View File

@@ -96,4 +96,10 @@ div.categories {
min-width: 150px;
}
}
}
.page-admin-categories {
[data-action="create"] {
@include floating-button;
}
}

View File

@@ -39,4 +39,8 @@
#group-icon-preview.fa-nbb-none {
display: none;
}
#create {
@include floating-button;
}
}

View File

@@ -33,4 +33,8 @@
}
}
}
#discard {
@include floating-button;
}
}

View File

@@ -4,4 +4,14 @@
font-size: 11px;
text-transform: uppercase;
font-weight: 700;
}
@mixin floating-button {
width: 64px;
height: 64px;
transition: background-color 500ms linear;
i {
font-size: 1.5em;
}
}

View File

@@ -169,16 +169,21 @@ define('admin/extend/rewards', ['alerts'], function (alerts) {
socket.emit('admin.rewards.save', activeRewards, function (err, result) {
if (err) {
alerts.error(err);
} else {
alerts.success('[[admin/extend/rewards:alert.save-success]]');
// newly added rewards are missing data-id, update to prevent rewards getting duplicated
$('#active li').each(function (index) {
if (!$(this).attr('data-id')) {
$(this).attr('data-id', result[index].id);
}
});
return alerts.error(err);
}
const saveBtn = document.getElementById('save');
saveBtn.classList.toggle('saved', true);
setTimeout(() => {
saveBtn.classList.toggle('saved', false);
}, 5000);
// newly added rewards are missing data-id, update to prevent rewards getting duplicated
$('#active li').each(function (index) {
if (!$(this).attr('data-id')) {
$(this).attr('data-id', result[index].id);
}
});
});
}

View File

@@ -52,7 +52,6 @@ define('admin/settings', ['uploader', 'mousetrap', 'hooks', 'alerts'], function
if (field.is('input') && inputType === 'checkbox') {
const checked = parseInt(app.config[key], 10) === 1;
field.prop('checked', checked);
field.parents('.mdl-switch').toggleClass('is-checked', checked);
} else if (field.is('textarea') || field.is('select') || (field.is('input') && defaultInputs.indexOf(inputType) !== -1)) {
field.val(app.config[key]);
}

View File

@@ -490,9 +490,6 @@ define('settings', ['hooks', 'alerts'], function (hooks, alerts) {
});
$(formEl).deserialize(values);
$(formEl).find('input[type="checkbox"]').each(function () {
$(this).parents('.mdl-switch').toggleClass('is-checked', $(this).is(':checked'));
});
hooks.fire('action:admin.settingsLoaded');
// Handle unsaved changes

View File

@@ -15,7 +15,6 @@ define('settings/checkbox', function () {
},
set: function (element, value) {
element.prop('checked', value);
element.closest('.mdl-switch').toggleClass('is-checked', element.is(':checked'));
},
get: function (element, trim, empty) {
const value = element.prop('checked');

File diff suppressed because it is too large Load Diff

View File

@@ -4,7 +4,7 @@
</div>
<div data-type="bootswatch" data-theme="" data-css="">
<button data-action="use" class="floating-button mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<button data-action="use" class="btn btn-primary position-fixed bottom-0 end-0 px-3 py-2 mb-4 me-4 rounded-circle" type="button">
<i class="material-icons">undo</i>
</button>
</div>

View File

@@ -4,6 +4,6 @@
</div>
</div>
<button id="revert_theme" class="floating-button mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<button id="revert_theme" class="btn btn-primary position-fixed bottom-0 end-0 px-3 py-2 mb-4 me-4 rounded-circle" type="button">
<i class="material-icons">undo</i>
</button>

View File

@@ -72,8 +72,8 @@
</div>
<div class="floating-button">
<button id="new" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" >
<i class="material-icons">add</i>
<button id="new" class="btn btn-primary position-fixed end-0 px-3 py-2 mb-4 me-4 rounded-circle" type="button">
<i class="fa fa-fw fa-plus"></i>
</button>
<!-- IMPORT admin/partials/save_button.tpl -->

View File

@@ -20,6 +20,6 @@
<div>
<!-- IMPORT partials/paginator.tpl -->
</div>
<button data-action="create" class="floating-button mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">add</i>
<button data-action="create" class="btn btn-primary position-fixed bottom-0 end-0 px-3 py-2 mb-4 me-4 rounded-circle" type="button">
<i class="fa fa-fw fa-plus"></i>
</button>

View File

@@ -62,6 +62,6 @@
</div>
</div>
<button id="create" class="floating-button mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">add</i>
<button id="create" class="btn btn-primary position-fixed bottom-0 end-0 px-3 py-2 mb-4 me-4 rounded-circle" type="button">
<i class="fa fa-fw fa-plus"></i>
</button>

View File

@@ -24,8 +24,8 @@
</div>
<div class="floating-button">
<button id="discard" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" style="display: none;">
<i class="material-icons">undo</i>
<button id="discard" class="btn btn-primary position-fixed bottom-0 end-0 px-3 py-2 mb-4 me-4 rounded-circle" type="button">
<i class="fa fa-rotate-left"></i>
</button>
<!-- IMPORT admin/partials/save_button.tpl -->

View File

@@ -14,10 +14,10 @@
<!-- BEGIN tags -->
<div class="tag-row" data-tag="{tags.valueEscaped}">
<div>
<span class="mdl-chip mdl-chip--contact tag-item" data-tag="{tags.valueEscaped}">
<span class="mdl-chip__contact mdl-color--light-blue mdl-color-text--white tag-topic-count">{tags.score}</span>
<span class="mdl-chip__text">{tags.valueEscaped}</span>
</span>
<button disabled class="rounded-3 btn btn-light">
{tags.valueEscaped}
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">{tags.score} <span class="visually-hidden">[[tags:tags]]</span>
</button>
</div>
</div>
<!-- END tags -->