mirrored/discourse-custom-wizard
0
0
Fork 1
Spiegel von https://github.com/paviliondev/discourse-custom-wizard.git synchronisiert 2024-11-25 18:50:27 +01:00
Code Releases Aktivität

Clean up: variable usage and style registration

Quellcode durchsuchen
Dieser Commit ist enthalten in:
Angus McLeod 2020-08-19 14:41:20 +10:00
Ursprung 18f0356d15
Commit 5588180dcd
13 geänderte Dateien mit 92 neuen und 81 gelöschten Zeilen
Statistiken anzeigen Patch-Datei herunterladen Diff-Datei herunterladen Alle Dateien ausklappen Alle Dateien einklappen

4
assets/stylesheets/common/wizard-admin.scss
Datei anzeigen

@ -344,7 +344,7 @@
} }
.buttons .error { .buttons .error {
color: $danger; color: var(--danger);
.fa { .fa {
margin-right: 5px; margin-right: 5px;
@ -509,7 +509,7 @@
top: 50%; top: 50%;
width: 9999px; width: 9999px;
height: 1px; height: 1px;
background: $tertiary; background: var(--tertiary);
} }
> span:before { > span:before {

2
assets/stylesheets/common/wizard-api.scss
Datei anzeigen

@ -23,7 +23,7 @@
.error { .error {
margin-top: 10px; margin-top: 10px;
color: $danger; color: var(--danger);
} }
} }
} }

2
assets/stylesheets/common/wizard-mapper.scss
Datei anzeigen

@ -128,7 +128,7 @@
align-items: center; align-items: center;
&.active { &.active {
color: $tertiary; color: var(--tertiary);
text-decoration: underline; text-decoration: underline;
} }

13
assets/stylesheets/wizard/custom/autocomplete.scss
Datei anzeigen

@ -2,8 +2,8 @@ div.ac-wrap {
overflow: visible; overflow: visible;
max-height: 150px; max-height: 150px;
min-height: 34px; min-height: 34px;
background-color: $secondary; background-color: var(--secondary);
border: 1px solid $primary-medium; border: 1px solid var(--primary-medium);
padding: 5px 4px 1px 4px; padding: 5px 4px 1px 4px;
div.item { div.item {
@ -88,13 +88,16 @@ img.avatar {
span.username { span.username {
color: var(--primary); color: var(--primary);
vertical-align: middle;
} }
span.name { span.name {
font-size: $font-down-1; font-size: $font-down-1;
vertical-align: middle; vertical-align: middle;
margin-left: 5px;
color: var(--primary);
} }
&.selected { &.selected {
background-color: var(--tertiary-low); background-color: var(--tertiary);
} }
&:hover { &:hover {
background-color: var(--highlight-low); background-color: var(--highlight-low);
@ -145,11 +148,11 @@ img.avatar {
.ac-form-result { .ac-form-result {
cursor: pointer; cursor: pointer;
background-color: $secondary; background-color: var(--secondary);
display: flex; display: flex;
&:hover, &.selected { &:hover, &.selected {
background-color: $tertiary; background-color: var(--tertiary);
color: white; color: white;
label { label {

8
assets/stylesheets/wizard/custom/badges.scss
Datei anzeigen

@ -24,7 +24,7 @@
&.bullet { &.bullet {
margin-right: 12px; margin-right: 12px;
span.badge-category { span.badge-category {
color: $primary-high; color: var(--primary-high);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
.extra-info-wrapper & { .extra-info-wrapper & {
@ -47,7 +47,7 @@
} }
} }
.d-icon { .d-icon {
color: $primary-medium; color: var(--primary-medium);
} }
} }
@ -91,7 +91,7 @@
margin-right: 5px; margin-right: 5px;
span.badge-category { span.badge-category {
color: $primary-high; color: var(--primary-high);
padding: 1px 3px; padding: 1px 3px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -113,7 +113,7 @@
} }
&.none { &.none {
color: $primary-high; color: var(--primary-high);
margin-right: 5px; margin-right: 5px;
} }
} }

14
assets/stylesheets/wizard/custom/composer.scss
Datei anzeigen

@ -25,8 +25,8 @@
.d-editor .d-editor-modal { .d-editor .d-editor-modal {
min-width: 400px; min-width: 400px;
position: absolute; position: absolute;
background-color: $secondary; background-color: var(--secondary);
border: 1px solid $primary; border: 1px solid var(--primary);
padding: 1em; padding: 1em;
top: 25px; top: 25px;
@ -52,8 +52,8 @@
.d-editor-textarea-wrapper, .d-editor-textarea-wrapper,
.d-editor-preview-wrapper { .d-editor-preview-wrapper {
background-color: $secondary; background-color: var(--secondary);
border: 1px solid $primary-low; border: 1px solid var(--primary-medium);
flex: 1; flex: 1;
} }
@ -82,7 +82,7 @@
button { button {
background-color: transparent; background-color: transparent;
color: $primary; color: var(--primary);
} }
.btn:not(.no-text) { .btn:not(.no-text) {
@ -102,7 +102,7 @@
width: 1px; width: 1px;
height: 20px; height: 20px;
margin: 0 5px; margin: 0 5px;
background-color: $primary; background-color: var(--primary);
display: inline-block; display: inline-block;
} }
@ -149,7 +149,7 @@
.composing-whisper .d-editor-preview { .composing-whisper .d-editor-preview {
font-style: italic; font-style: italic;
color: $primary !important; color: var(--primary) !important;
} }
.d-editor-preview > *:first-child { .d-editor-preview > *:first-child {

50
assets/stylesheets/wizard/custom/events.scss
Datei anzeigen

@ -79,7 +79,7 @@
&.disabled { &.disabled {
span, label, .pika-label, .pika-table th, .pika-button, .pika-prev, .pika-next, input, .pika-lendar, .is-selected .pika-button { span, label, .pika-label, .pika-table th, .pika-button, .pika-prev, .pika-next, input, .pika-lendar, .is-selected .pika-button {
color: $primary-low; color: var(--primary-low);
background-image: initial; background-image: initial;
background: initial; background: initial;
box-shadow: initial; box-shadow: initial;
@ -88,7 +88,7 @@
} }
input, .pika-lendar { input, .pika-lendar {
border: 1px solid $primary-low !important; border: 1px solid var(--primary-low) !important;
} }
} }
} }
@ -127,8 +127,8 @@
padding: 4px 10px; padding: 4px 10px;
font-size: 1em; font-size: 1em;
line-height: 1; line-height: 1;
color: $primary; color: var(--primary);
border: 1px solid $primary-medium; border: 1px solid var(--primary-medium);
min-height: 30px; min-height: 30px;
width: 130px; width: 130px;
margin: 10px 0; margin: 10px 0;
@ -151,7 +151,7 @@
z-index: 100; z-index: 100;
.pika-lendar { .pika-lendar {
border: 1px solid $primary-medium; border: 1px solid var(--primary-medium);
padding: 14px; padding: 14px;
margin: 0; margin: 0;
float: none; float: none;
@ -190,24 +190,24 @@
// Variables are namespaced with the pd (pikaday) prefix // Variables are namespaced with the pd (pikaday) prefix
// Colours // Colours
$pd-text-color: $primary !default; $pd-text-color: var(--primary) !default;
$pd-title-color: $primary !default; $pd-title-color: var(--primary) !default;
$pd-title-bg: $secondary !default; $pd-title-bg: var(--secondary) !default;
$pd-picker-bg: $secondary !default; $pd-picker-bg: var(--secondary) !default;
$pd-picker-border: $primary-low !default; $pd-picker-border: var(--primary-low) !default;
$pd-picker-border-bottom: $primary-low !default; $pd-picker-border-bottom: var(--primary-low) !default;
$pd-picker-shadow: rgba(0,0,0,.5) !default; $pd-picker-shadow: rgba(0,0,0,.5) !default;
$pd-th-color: $primary !default; $pd-th-color: var(--primary) !default;
$pd-day-color: $primary !default; $pd-day-color: var(--primary) !default;
$pd-day-bg: $secondary !default; $pd-day-bg: var(--secondary) !default;
$pd-day-hover-color: $primary !default; $pd-day-hover-color: var(--primary) !default;
$pd-day-hover-bg: $tertiary-low !default; $pd-day-hover-bg: var(--tertiary-low) !default;
$pd-day-today-color: $tertiary !default; $pd-day-today-color: var(--tertiary) !default;
$pd-day-selected-color: $secondary !default; $pd-day-selected-color: var(--secondary) !default;
$pd-day-selected-bg: $tertiary !default; $pd-day-selected-bg: var(--tertiary) !default;
$pd-day-selected-shadow: $tertiary-low !default; $pd-day-selected-shadow: var(--tertiary-low) !default;
$pd-day-disabled-color: $primary !default; $pd-day-disabled-color: var(--primary) !default;
$pd-week-color: $primary !default; $pd-week-color: var(--primary) !default;
// Font // Font
$pd-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default; $pd-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
@ -410,15 +410,15 @@ $pd-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
} }
.is-startrange .pika-button { .is-startrange .pika-button {
color: $secondary; color: var(--secondary);
background: #6CB31D; background: #6CB31D;
box-shadow: none; box-shadow: none;
border-radius: 3px; border-radius: 3px;
} }
.is-endrange .pika-button { .is-endrange .pika-button {
color: $secondary; color: var(--secondary);
background: $tertiary; background: var(--tertiary);
box-shadow: none; box-shadow: none;
border-radius: 3px; border-radius: 3px;
} }

12
assets/stylesheets/wizard/custom/field.scss
Datei anzeigen

@ -17,7 +17,7 @@
.field-description { .field-description {
flex: 1; flex: 1;
color: $primary; color: var(--primary);
margin-top: 0; margin-top: 0;
p { p {
@ -35,7 +35,7 @@
&.invalid { &.invalid {
textarea, input[type=text], input[type=checkbox], .select-kit { textarea, input[type=text], input[type=checkbox], .select-kit {
padding: 3px; padding: 3px;
border: 4px solid $danger; border: 4px solid var(--danger);
} }
} }
} }
@ -75,12 +75,6 @@
.wizard-step-form .wizard-btn { .wizard-step-form .wizard-btn {
display: block; display: block;
margin: 20px 0; margin: 20px 0;
color: var(--primary);
background: var(--primary-low);
&.primary {
background: $tertiary;
}
} }
.wizard-image-row { .wizard-image-row {
@ -130,7 +124,7 @@
input.date-picker { input.date-picker {
font-size: 1.1487em; font-size: 1.1487em;
padding: 6px; padding: 6px;
border: 1px solid $primary; border: 1px solid var(--primary);
transition: border-color 0.5s; transition: border-color 0.5s;
} }

10
assets/stylesheets/wizard/custom/locations.scss
Datei anzeigen

@ -46,7 +46,7 @@
} }
.address + .coordinates { .address + .coordinates {
border-left: 1px solid $primary-low; border-left: 1px solid var(--primary-low);
padding-left: 20px; padding-left: 20px;
} }
@ -74,7 +74,7 @@
input.input-location, div.input-location { input.input-location, div.input-location {
max-height: 150px; max-height: 150px;
background-color: $secondary; background-color: var(--secondary);
box-shadow: none; box-shadow: none;
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
@ -125,11 +125,11 @@ input.input-location, div.input-location {
.location-form-result { .location-form-result {
cursor: pointer; cursor: pointer;
background-color: $secondary; background-color: var(--secondary);
display: flex; display: flex;
&:hover, &.selected { &:hover, &.selected {
background-color: $tertiary; background-color: var(--tertiary);
color: white; color: white;
label { label {
@ -159,7 +159,7 @@ input.input-location, div.input-location {
} }
ul { ul {
background-color: dark-light-diff($primary, $secondary, 97%, -65%); background-color: var(--primary-very-low);
border: 1px solid #e9e9e9; border: 1px solid #e9e9e9;
margin: 0; margin: 0;
padding: 0; padding: 0;

14
assets/stylesheets/wizard/custom/step.scss
Datei anzeigen

@ -113,7 +113,7 @@
.wizard-progress { .wizard-progress {
.screen { .screen {
background-color: $tertiary; background-color: var(--tertiary);
} }
} }
@ -124,18 +124,18 @@
padding: 20px; padding: 20px;
&.success { &.success {
background-color: $success; background-color: var(--success);
color: $secondary; color: var(--secondary);
} }
&.error { &.error {
background-color: $danger; background-color: var(--danger);
color: $secondary; color: var(--secondary);
} }
&.not-permitted { &.not-permitted {
background-color: $danger; background-color: var(--danger);
color: $secondary; color: var(--secondary);
} }
.text { .text {

26
assets/stylesheets/wizard/custom/wizard.scss
Datei anzeigen

@ -1,10 +1,10 @@
.custom-wizard { .custom-wizard {
background-color: $secondary; background-color: var(--secondary);
color: $primary; color: var(--primary);
font-size: 1.1em; font-size: 1.1em;
.wizard-column { .wizard-column {
background-color: $secondary; background-color: var(--secondary);
.wizard-field .input-area { .wizard-field .input-area {
margin: 0.5em 0; margin: 0.5em 0;
@ -15,7 +15,7 @@
} }
.wizard-footer { .wizard-footer {
background-color: $secondary; background-color: var(--secondary);
} }
} }
@ -28,14 +28,26 @@
margin-right: 10px; margin-right: 10px;
} }
.wizard-column .wizard-btn {
color: var(--primary);
background: var(--primary-low);
cursor: pointer;
&.primary,
&.next {
color: var(--secondary);
background: var(--tertiary);
}
}
.wizard-column .wizard-step-footer button.wizard-btn.done, .wizard-column .wizard-step-footer button.wizard-btn.done,
.wizard-column .wizard-step-footer button.wizard-btn.finish { .wizard-column .wizard-step-footer button.wizard-btn.finish {
color: $primary; color: var(--secondary);
background-color: $success; background-color: var(--success);
} }
.wizard-column .action-link { .wizard-column .action-link {
color: $tertiary; color: var(--tertiary);
} }
} }

8
lib/custom_wizard/wizard.rb
Datei anzeigen

@ -364,4 +364,12 @@ class CustomWizard::Wizard
false false
end end
end end
def self.register_styles
full_path = "#{Rails.root}/plugins/discourse-custom-wizard/assets/stylesheets/wizard/wizard_custom.scss"
DiscoursePluginRegistry.register_asset(full_path, {}, "wizard_custom")
Stylesheet::Importer.register_import("wizard_custom") do
import_files(DiscoursePluginRegistry.stylesheets["wizard_custom"])
end
end
end end

10
plugin.rb
Datei anzeigen

@ -88,14 +88,6 @@ after_initialize do
load File.expand_path(path, __FILE__) load File.expand_path(path, __FILE__)
end end
reloadable_patch do
full_path = File.dirname(@path) << "/assets/stylesheets/wizard/wizard_custom.scss"
DiscoursePluginRegistry.register_asset(full_path, {}, "wizard_custom")
Stylesheet::Importer.register_import("wizard_custom") do
import_files(DiscoursePluginRegistry.stylesheets["wizard_custom"])
end
end
add_class_method(:wizard, :user_requires_completion?) do |user| add_class_method(:wizard, :user_requires_completion?) do |user|
wizard_result = self.new(user).requires_completion? wizard_result = self.new(user).requires_completion?
return wizard_result if wizard_result return wizard_result if wizard_result
@ -172,5 +164,7 @@ after_initialize do
::Wizard::Field.prepend CustomWizardFieldExtension ::Wizard::Field.prepend CustomWizardFieldExtension
::Wizard::Step.prepend CustomWizardStepExtension ::Wizard::Step.prepend CustomWizardStepExtension
CustomWizard::Wizard.register_styles
DiscourseEvent.trigger(:custom_wizard_ready) DiscourseEvent.trigger(:custom_wizard_ready)
end end