Вынес таб в компонент

master
Sipachev Igor 3 years ago
parent ea4fcae1b9
commit 5b0960da0c
  1. 4
      popup/src/components/ember-tab/main.vue
  2. 37
      popup/src/components/ember-tab/script.ts
  3. 65
      popup/src/components/ember-tab/style.scss
  4. 17
      popup/src/components/ember-tab/template.html
  5. 43
      popup/src/components/script.ts
  6. 16
      popup/src/components/template.html

@ -0,0 +1,4 @@
<template src="./template.html"></template>
<script lang="ts" src="./script.ts"></script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" src="./style.scss"></style>

@ -0,0 +1,37 @@
import { Component, Vue } from 'vue-property-decorator'
import { Person } from '@/classes/DTO/Person'
import VueClipboard from 'vue-clipboard2'
import sender from '@/classes/Service/Browser/Chrome/Sender'
import { Action } from '@/classes/Enum/Action'
import notificationCleaner from '@/classes/Service/NotificationCleaner'
Vue.use(VueClipboard)
@Component
export default class HelloWorld extends Vue {
person = new Person()
isAutoCleaner = false
mounted () {
/** todo заполнить первоначальное значение */
notificationCleaner.state().then((isAutoCleaner) => {
this.isAutoCleaner = isAutoCleaner
console.log('this.isAutoCleaner = ' + isAutoCleaner)
})
}
cleanNotifications (): void {
sender.send({
action: Action.CLEAN_NOTIFICATION
})
}
onChangeAutoCleaner () {
console.log(this.isAutoCleaner)
if (this.isAutoCleaner) {
notificationCleaner.enable()
} else {
notificationCleaner.disable()
}
}
}

@ -0,0 +1,65 @@
.container {
max-width: 400px;
min-width: 400px;
border: solid 2px gray;
.wrapper {
padding: 10px;
.tab-panel {
display: flex;
&__item {
flex-grow: 1;
padding: 5px;
cursor: pointer;
border-bottom: solid 2px #cae5fa;
&_active {
border-bottom: solid 2px #298df8;
}
&:hover {
border-bottom: solid 2px #298df8;
}
}
}
.tab-page {
padding-top: 10px;
&__item {
display: none;
&_show {
display: block;
}
.form-row {
display: flex;
margin-bottom: 5px;
&__item {
flex-grow: 1;
margin-right: 10px;
&-input {
width: 100%;
}
}
&:last-child {
margin-bottom: 0;
}
}
}
}
.memory-panel {
text-align: left;
padding: 5px;
margin-top: 10px;
}
}
}

@ -0,0 +1,17 @@
<div>
<div class="form-row">
<div class="form-row__item">
<label>
Use notification cleaner
<input @change="onChangeAutoCleaner" type="checkbox" v-model="isAutoCleaner">
</label>
</div>
</div>
<div class="form-row">
<div class="form-row__item">
<button
@click="cleanNotifications"
>Clean</button>
</div>
</div>
</div>

@ -1,13 +1,9 @@
import { Component, Vue } from 'vue-property-decorator' import { Component, Vue } from 'vue-property-decorator'
import { Person } from '@/classes/DTO/Person'
import VueClipboard from 'vue-clipboard2' import VueClipboard from 'vue-clipboard2'
import { Target } from '@/classes/Enum/Target'
import sender from '@/classes/Service/Browser/Chrome/Sender'
import { Action } from '@/classes/Enum/Action'
import notificationCleaner from '@/classes/Service/NotificationCleaner'
import Mocks from '@/components/mocks/main.vue' import Mocks from '@/components/mocks/main.vue'
import PersonTab from '@/components/person-tab/main.vue' import PersonTab from '@/components/person-tab/main.vue'
import MocksTab from '@/components/mocks-tab/main.vue' import MocksTab from '@/components/mocks-tab/main.vue'
import EmberTab from '@/components/ember-tab/main.vue'
Vue.use(VueClipboard) Vue.use(VueClipboard)
@ -15,43 +11,10 @@ Vue.use(VueClipboard)
components: { components: {
Mocks, Mocks,
PersonTab, PersonTab,
MocksTab MocksTab,
EmberTab
} }
}) })
export default class HelloWorld extends Vue { export default class HelloWorld extends Vue {
tab = 'person' tab = 'person'
personalId = ''
person = new Person()
isAutoCleaner = false
mounted () {
/** todo заполнить первоначальное значение */
notificationCleaner.state().then((isAutoCleaner) => {
this.isAutoCleaner = isAutoCleaner
console.log('this.isAutoCleaner = ' + isAutoCleaner)
})
}
insertValueToNode (target: Target, value: string): void {
sender.send({
action: Action.INSERT,
target: target,
value: value
})
}
cleanNotifications (): void {
sender.send({
action: Action.CLEAN_NOTIFICATION
})
}
onChangeAutoCleaner () {
console.log(this.isAutoCleaner)
if (this.isAutoCleaner) {
notificationCleaner.enable()
} else {
notificationCleaner.disable()
}
}
} }

@ -19,21 +19,7 @@
<MocksTab/> <MocksTab/>
</div> </div>
<div class="tab-page__item" :class="{'tab-page__item_show': tab === 'ember'}"> <div class="tab-page__item" :class="{'tab-page__item_show': tab === 'ember'}">
<div class="form-row"> <EmberTab/>
<div class="form-row__item">
<label>
Use notification cleaner
<input @change="onChangeAutoCleaner" type="checkbox" v-model="isAutoCleaner">
</label>
</div>
</div>
<div class="form-row">
<div class="form-row__item">
<button
@click="cleanNotifications"
>Clean</button>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

Loading…
Cancel
Save