summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/ConfiguratorModuleConfig.vue
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/src/components/ConfiguratorModuleConfig.vue')
-rw-r--r--webapp/src/components/ConfiguratorModuleConfig.vue50
1 files changed, 27 insertions, 23 deletions
diff --git a/webapp/src/components/ConfiguratorModuleConfig.vue b/webapp/src/components/ConfiguratorModuleConfig.vue
index 654f493..fdb9047 100644
--- a/webapp/src/components/ConfiguratorModuleConfig.vue
+++ b/webapp/src/components/ConfiguratorModuleConfig.vue
@@ -45,12 +45,12 @@
<v-flex>
<v-text-field prepend-icon="label" :label="$t('name')" color="primary" v-model="name"></v-text-field>
</v-flex>
- <v-flex class="text-xs-center">
+ <v-flex class="text-center">
<div v-if="!expertMode" style="display: inline-block; max-width: 180px">
<v-text-field prepend-icon="timer" :label="$t('timeout')" color="primary" v-model="timeout" mask="######" suffix="ms"></v-text-field>
</div>
</v-flex>
- <v-flex class="text-xs-center">
+ <v-flex class="text-center">
<div style="display: inline-block"><v-switch v-model="expertMode" color="primary" :label="$t('expertMode')"></v-switch></div>
</v-flex>
</v-layout>
@@ -59,33 +59,37 @@
<div class="body-1 script-heading"><v-icon>code</v-icon><span>{{ $t('script') }}</span></div>
<codemirror class="script-editor" ref="editor" v-model="script"></codemirror>
</div>
- <div v-else class="text-xs-right">
+ <div v-else class="text-right">
<v-subheader>{{ $t('entries') }}</v-subheader>
<v-list>
- <draggable v-if="items.length" v-model="items" :options="{ handle:'.handle' }">
- <v-list-tile v-for="item in items" :key="item.entry.id" @click.stop>
- <v-list-tile-action class="handle">
+ <draggable v-if="items.length" v-model="items" handle=".handle">
+ <v-list-item v-for="item in items" :key="item.entry.id" @click.stop :ripple="false">
+ <v-list-item-action class="handle">
<v-icon>drag_handle</v-icon>
- </v-list-tile-action>
- <v-list-tile-action>
+ </v-list-item-action>
+ <v-list-item-action>
<v-tooltip top open-delay="800">
- <v-radio-group slot="activator" v-model="defaultEntry">
- <v-radio v-if="item.entry.id" color="primary" :value="item.entry.id"></v-radio>
- </v-radio-group>
+ <template #activator="{ on }">
+ <v-radio-group v-on="on" v-model="defaultEntry">
+ <v-radio v-if="item.entry.id" color="primary" :value="item.entry.id"></v-radio>
+ </v-radio-group>
+ </template>
<span>{{ $t('defaultEntry') }}</span></v-tooltip>
- </v-list-tile-action>
- <v-list-tile-content class="item-content">
- <v-select return-object class="entry-input" item-text="name" menu-props="offsetY" :label="$t('entry')" color="primary" v-model="item.entry"
- :items="item.entry.id ? [item.entry, ...availableEntries] : availableEntries" hide-details single-line></v-select>
- <v-text-field v-if="item.entry.id" class="custom-name-input" :label="$t('customName')" color="primary" v-model="item.customName" hide-details single-line></v-text-field>
- <v-text-field v-if="item.entry.id" class="keybind-input" prepend-icon="keyboard" color="primary" v-model="item.keyBind" maxlength="1" hide-details single-line></v-text-field>
- </v-list-tile-content>
- <v-list-tile-action>
+ </v-list-item-action>
+ <v-list-item-content class="item-content">
+ <div style="display: flex">
+ <v-select return-object class="entry-input" item-text="name" menu-props="offsetY" :label="$t('entry')" color="primary" v-model="item.entry"
+ :items="item.entry.id ? [item.entry, ...availableEntries] : availableEntries" hide-details single-line></v-select>
+ <v-text-field v-if="item.entry.id" class="custom-name-input" :label="$t('customName')" color="primary" v-model="item.customName" hide-details single-line></v-text-field>
+ <v-text-field v-if="item.entry.id" class="keybind-input" prepend-icon="keyboard" color="primary" v-model="item.keyBind" maxlength="1" hide-details single-line></v-text-field>
+ </div>
+ </v-list-item-content>
+ <v-list-item-action>
<v-btn @click="removeItem(item)" icon><v-icon>clear</v-icon></v-btn>
- </v-list-tile-action>
- </v-list-tile>
+ </v-list-item-action>
+ </v-list-item>
</draggable>
- <div v-else class="text-xs-center">{{ $t('noEntries') }}</div>
+ <div v-else class="text-center">{{ $t('noEntries') }}</div>
</v-list>
<v-btn @click="addItem" color="success" fab small><v-icon dark>add</v-icon></v-btn>
</div>
@@ -93,7 +97,7 @@
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
- <v-btn flat="flat" @click="setDialog({ show: false })">{{ $t('cancel') }}</v-btn>
+ <v-btn text="flat" @click="setDialog({ show: false })">{{ $t('cancel') }}</v-btn>
<v-btn :color="dialog.info.id ? 'primary' : 'success'" @click="saveConfig">{{ dialog.info.id ? $t('save') : $t('create') }}</v-btn>
</v-card-actions>
</v-card>