-
Notifications
You must be signed in to change notification settings - Fork 276
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature/fully vueify notifications #4913
Conversation
* Merge develop.
…lly-vueify-notifications # Conflicts: # themes-default/slim/views/layouts/main.mako # themes/dark/assets/js/app.js # themes/dark/assets/js/index.js # themes/dark/assets/js/vendors.js # themes/light/assets/js/app.js # themes/light/assets/js/index.js # themes/light/assets/js/vendors.js # themes/light/templates/layouts/main.mako
Make it available for usage from mako files. * Rename Config-checkbox to config-toggle-slider. * Rebuild themes.
@OmgImAlexis can you check the overal setup now? As next i'll add all the notifiers to apiv2 and the page. As that's allot of work, i'd like to limit the refactoring to as little as possible. |
…lly-vueify-notifications # Conflicts: # themes-default/slim/src/index.js # themes/dark/assets/js/index.js # themes/dark/assets/js/vendors.js # themes/light/assets/js/index.js # themes/light/assets/js/vendors.js
@p0psicles Move it to 0.2.10? |
If current notifications page is acceptable. But think thats in master already anyway. |
Have you found a bug in the current notifications page? |
</label> | ||
<div class="col-sm-10 content"> | ||
<input type="text" name="plex_server_token" id="plex_server_token" v-model="notifiers.plex.server.token" @change="save()" @update="notifiers.plex.server.token = $event" class="form-control input-sm max-input350"/> | ||
<!-- Can't use the config-textbox component, because of the complex descriptions --> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This can be fixed by using a slot in the config-textbox
try this or something similar.
diff --git a/themes-default/slim/src/components/config-textbox.vue b/themes-default/slim/src/components/config-textbox.vue
index cceb95db3..dd7bd569b 100644
--- a/themes-default/slim/src/components/config-textbox.vue
+++ b/themes-default/slim/src/components/config-textbox.vue
@@ -5,10 +5,10 @@
<label :for="id" class="col-sm-2 control-label">
<span>{{ label }}</span>
</label>
- <div class="col-sm-10 content">
+ <slot class="col-sm-10 content">
<input :type="type" v-bind="{id, name: id}" v-model="localValue" :class="inputClass" :placeholder="placeholder"/>
<p v-for="(explanation, index) in explanations" :key="index">{{ explanation }}</p>
- </div>
+ </slot>
</div>
</div>
</div>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Created a new component </> which is really bare. And just sets up the divs and styling. This makes use of slots.
This component can be used to create a standard bootstrapped label/content form-group. <slot> can be used to parse your own content.
Use v-model in stead of :value. Added <slot></slot>.
* Utilized the new config-template component. * Utilized config-textbox slots.
…lly-vueify-notifications # Conflicts: # themes-default/slim/src/components/index.js # themes/dark/assets/js/medusa-runtime.js # themes/light/assets/js/medusa-runtime.js
DeepCode analyzed this pull request. Click to see more details. |
Moved config-template.vue component to helpers.
@@ -1,13 +1,14 @@ | |||
<template> | |||
<div id="config-textbox-content"> | |||
<div id="config-textbox"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Keep in mind if this is used more than once on the page you'll have two items with the same ID. I'd go with classes instead.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
@@ -92,15 +92,18 @@ export default { | |||
this.indexCounter += 1; | |||
}, | |||
addNewItem() { | |||
const { newItem, editItems } = this; | |||
if (this.newItem === '') { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When comparing use the const
value, not this.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
little bit down i'm assiging to newItem:
this.newItem = '';
Should I still use the const?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This this is also correct?:
deleteItem(item) {
const { editItems } = this;
this.editItems = editItems.filter(e => e !== item);
this.$refs.newItemInput.focus();
this.$emit('change', editItems);
},
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I could go even further and destructure also $refs and $emit?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So this would be "correct":
deleteItem(item) {
const { $refs, $emit, editItems } = this;
this.editItems = editItems.filter(e => e !== item);
$refs.newItemInput.focus();
$emit('change', editItems);
},
placeholder: String, | ||
selectClass: { | ||
type: String, | ||
default: 'select-show form-control input-sm-custom' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should selectClass
only be select-show
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sorry don't understand the question
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since this will replace the classes won't form-control
and input-sm-custom
be needed to keep it looking like a form? I would have though just select-show
needs to be replaced.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Signed-off-by: Alexis Tyler <[email protected]>
* Fixed lint-css * fixed xo
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Frontend looks good to me.
@medariox okay? |
…lly-vueify-notifications # Conflicts: # themes/dark/assets/js/index.js.map # themes/dark/assets/js/vendors.js.map # themes/light/assets/js/index.js.map # themes/light/assets/js/vendors.js.map
TODO: