julien/binome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🍱 (buttons) add icons

Browse Source
This commit is contained in:
Julien Calixte
2020-07-12 22:27:18 +02:00
parent 9f714b8daa
commit 3b902f5ad0
1 changed files with 53 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/views/Home.vue
View File

@@ -7,9 +7,58 @@
</section>
<div class="global-time">{{ time }}</div>
<div class="actions">
<button v-show="timeState === 'stopped'" @click="start">start</button>
<button v-show="timeState === 'started'" @click="pause">pause</button>
<button v-show="timeState === 'started'" @click="clear">stop</button>
<button v-show="timeState === 'stopped'" @click="start">
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-caret-right"
width="44"
height="44"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="#2c3e50"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" />
<path d="M18 15l-6-6l-6 6h12" transform="rotate(90 12 12)" />
</svg>
</button>
<button v-show="timeState === 'started'" @click="pause">
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-arrow-bar-right"
width="44"
height="44"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="#2c3e50"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" />
<line x1="8" y1="4" x2="8" y2="20" />
<line x1="16" y1="4" x2="16" y2="20" />
</svg>
</button>
<button v-show="timeState === 'started'" @click="clear">
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-square"
width="44"
height="44"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="#2c3e50"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" />
<rect x="4" y="4" width="16" height="16" rx="2" />
</svg>
</button>
</div>
<ZoneMusic
class="music"
@@ -76,6 +125,7 @@ export default defineComponent({
button {
margin: 0 1rem;
padding: 0;
}
.global-time {