informatic
/
streaming-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add ui tooltips, buttons sizing

master
informatic 2018-06-22 23:44:58 +02:00
parent b7ff27699e
commit aa85258c07
2 changed files with 38 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/Frame.vue
View File

@ -1,18 +1,29 @@
<template>
<a-card :title="frameName">
<a-switch slot="extra" v-model="frame.active" @change="setFrameActive([scene.id, frame.id, $event])" />
<a-row type="flex" justify="center" align="top" style="height: 200px">
<a-switch slot="extra" v-model="frame.active" @change="setFrameActive([scene.id, frame.id, $event])"
title="Frame active state" />
<a-row type="flex" justify="center" align="top" style="height: 150px">
<div style="float:left;height: 100%;">
<a-slider vertical :min="0" :max="1.0" :step="0.01" v-model="frame.front.alpha" @change="setFrameAlpha([scene.id, frame.id, 'front', $event])" />
<a-slider vertical :min="0" :max="1.0" :step="0.01" v-model="frame.front.alpha"
@change="setFrameAlpha([scene.id, frame.id, 'front', $event])"
title="Front source alpha" />
</div>
<div style="float:left;height: 100%;flex-grow:1">
<a-radio-group defaultValue="a" size="small">
<a-radio-button value="a">Hangzhou</a-radio-button>
<a-radio-button value="d">Chengdu</a-radio-button>
</a-radio-group>
<div style="float:left;height: 100%;flex-grow:1; text-align: center">
<a-button-group size="small" title="Switch back and front sources" class="flex-btn-group">
<a-button>Fade</a-button>
<a-button disabled>Back/Front</a-button>
<a-button>Cut</a-button>
</a-button-group>
<a-button-group size="small" title="Switch frames" v-for="f in scene.frames" v-if="f != frame" :key="f.id" class="flex-btn-group">
<a-button>Fade</a-button>
<a-button disabled>Frame {{ f.id }}</a-button>
<a-button>Cut</a-button>
</a-button-group>
</div>
<div style="float:left;height: 100%;">
<a-slider vertical :min="0" :max="1.0" :step="0.01" v-model="frame.back.alpha" @change="setFrameAlpha([scene.id, frame.id, 'back', $event])" />
<a-slider vertical :min="0" :max="1.0" :step="0.01" v-model="frame.back.alpha"
@change="setFrameAlpha([scene.id, frame.id, 'back', $event])"
title="Back source alpha" />
</div>
</a-row>
<a-tabs defaultActiveKey="1" size="small" :tabBarGutter="1" slot="actions">
@ -20,11 +31,13 @@
<a-row :gutter=4>
<a-col :span=12>
<SourceSelector v-model="frame.front.source"
@input="setFrameSource([scene.id, frame.id, 'front', $event])" />
@input="setFrameSource([scene.id, frame.id, 'front', $event])"
title="Front source" />
</a-col>
<a-col :span=12>
<SourceSelector v-model="frame.back.source"
@input="setFrameSource([scene.id, frame.id, 'back', $event])" />
@input="setFrameSource([scene.id, frame.id, 'back', $event])"
title="Back source" />
</a-col>
</a-row>
</a-tab-pane>
@ -69,4 +82,12 @@ export default {
padding-left: 12px;
padding-right: 12px;
}
.flex-btn-group {
display: flex;
}
.flex-btn-group .ant-btn:not(:first-child):not(:last-child) {
flex: auto;
}
</style>

10
src/components/Scene.vue
View File

@ -1,14 +1,16 @@
<template>
<a-card :title="sceneName">
<a-row type="flex" justify="center" align="top" style="height: 200px">
<a-row type="flex" justify="center" align="top" style="height: 150px">
<div style="float:left;height: 100%;">
<a-slider vertical :min="0" :max="1.0" :step="0.01" :value="scene.alpha" v-on:change="setSceneAlpha([scene, null, $event])" />
<a-slider vertical :min="0" :max="1.0" :step="0.01" :value="scene.alpha"
@change="setSceneAlpha([scene, null, $event])"
title="Scene alpha" />
</div>
<div style="float:left;height: 100%;flex-grow:1; text-align: center">
<a-button-group>
<a-button-group size="small" title="Switch scenes">
<a-dropdown>
<a-menu slot="overlay">
<a-menu-item v-for="s in scenes" v-if="s != scene" :key="s.id">
<a-menu-item v-for="s in scenes" v-if="s != scene || !scene.active" :key="s.id">
<router-link :to="{ name: 'SceneView', params: { id: s.id }}" v-on:click.native="sceneFade(s)">{{ s.name }}</router-link>
</a-menu-item>
</a-menu>