Skip to content

Commit 241de32

Browse files
author
andres
committed
styles dependencies improved, added scss #275 #40 
1 parent ab20496 commit 241de32

22 files changed

+262
-275
lines changed

‎app.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const Shortcuts = require('./app/renderer/api/shortcuts');
1313
const store = require('./app/renderer/stores/main');
1414

1515
const components = {
16-
"config-menu": require('./app/renderer/components/config_menu.vue'),
16+
"config-menu": require('./app/renderer/pages/config_menu.vue'),
1717
"task-suite": require('./app/renderer/components/task_suite.vue'),
1818
"navbar": require('./app/renderer/components/navbar.vue'),
1919
"bottom-bar": require('./app/renderer/components/bottom_bar.vue')

‎app/renderer/components/about.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<a v-on:click="openAbout" v-bind:href="'#tab3'">About</a>
2+
<a @click="openAbout" :href="'#tab3'">About</a>
33
</template>
44

55
<script>

‎app/renderer/components/add_task.vue

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<template>
2-
<li class="run-card no-draggable">
3-
<div class="collapsible-header row center-align add-task-header">
4-
<strong class="unselectable-text">
2+
<li class="run-card no-draggable">
3+
<div class="collapsible-header row center-align add-task-header">
4+
<strong class="unselectable-text">
55
<span class="small material-icons">add</span>
66
Add New Task
77
</strong>
8-
</div>
9-
<div class="collapsible-body container task-card-body">
10-
<task-input v-on:save="addTask"></task-input>
11-
</div>
12-
</li>
8+
</div>
9+
<div class="collapsible-body container task-card-body">
10+
<task-input @save="addTask"/>
11+
</div>
12+
</li>
1313
</template>
1414

1515

‎app/renderer/components/bottom_bar.vue

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<template>
2-
<div class="bottom-bar unselectable-text">
3-
<nav class="navbar navbar-inverse">
4-
<div class="left-content">
5-
<b>Total Tasks:</b> {{totalTasks}}
6-
</div>
7-
<div class="right-content">
8-
<b>Running Tasks:</b> {{AppStatus.runningTasks}}
9-
</div>
10-
</nav>
11-
</div>
2+
<div class="bottom-bar unselectable-text">
3+
<nav class="navbar navbar-inverse">
4+
<div class="left-content">
5+
<b>Total Tasks:</b> {{totalTasks}}
6+
</div>
7+
<div class="right-content">
8+
<b>Running Tasks:</b> {{AppStatus.runningTasks}}
9+
</div>
10+
</nav>
11+
</div>
1212
</template>
1313

1414
<script>

‎app/renderer/components/common/progress_spinner.vue

+13-13
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
<template>
2-
<div class="progress-spinner">
3-
<div class="preloader-wrapper active progress-badge">
4-
<div class="spinner-layer spinner-blue-only">
5-
<div class="circle-clipper left">
6-
<div class="circle"></div>
7-
</div>
8-
<div class="gap-patch">
9-
<div class="circle"></div>
10-
</div>
11-
<div class="circle-clipper right">
12-
<div class="circle"></div>
2+
<div class="progress-spinner">
3+
<div class="preloader-wrapper active progress-badge">
4+
<div class="spinner-layer spinner-blue-only">
5+
<div class="circle-clipper left">
6+
<div class="circle"/>
7+
</div>
8+
<div class="gap-patch">
9+
<div class="circle"/>
10+
</div>
11+
<div class="circle-clipper right">
12+
<div class="circle"/>
13+
</div>
1314
</div>
1415
</div>
1516
</div>
16-
</div>
1717
</template>
1818

1919

@@ -24,6 +24,6 @@
2424
top: 6px;
2525
}
2626
.progress-spinner {
27-
float: left;
27+
float: left;
2828
}
2929
</style>

‎app/renderer/components/common/switch_form.vue

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<template>
2-
<div class="switch">
3-
<label>
4-
{{title}}
5-
<input type="checkbox" v-model="inputValue" @change="updateValue()">
6-
<span class="lever switch-lever"></span>
7-
</label>
8-
</div>
2+
<div class="switch">
3+
<label>
4+
{{title}}
5+
<input type="checkbox" v-model="inputValue" @change="updateValue()">
6+
<span class="lever switch-lever"/>
7+
</label>
8+
</div>
99
</template>
1010

1111
<script>

‎app/renderer/components/shortcuts_learn.vue ‎app/renderer/components/config_menu/shortcuts_learn.vue

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<template>
2-
<div class="shortcuts-learn">
3-
<h4>Shortcuts</h4>
4-
<div class="description"><code>CTRL+E</code> Enable/Disable edit</div>
5-
<div class="description"><code>CTRL+M</code> Open menu</div>
6-
<div class="description"><code>CTRL+TAB</code> Jump to the next suite</div>
7-
<div class="description"><code>CTRL+SHIFT+TAB</code> Jump to the previous suite</div>
8-
</div>
2+
<div class="shortcuts-learn">
3+
<h4>Shortcuts</h4>
4+
<div class="description"><code>CTRL+E</code> Enable/Disable edit</div>
5+
<div class="description"><code>CTRL+M</code> Open menu</div>
6+
<div class="description"><code>CTRL+TAB</code> Jump to the next suite</div>
7+
<div class="description"><code>CTRL+SHIFT+TAB</code> Jump to the previous suite</div>
8+
</div>
99
</template>
1010

1111

‎app/renderer/components/navbar.vue

+30-30
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,37 @@
11
<template>
2-
<div>
3-
<div class="navbar-fixed">
4-
<nav class="nav-extended">
5-
<div class="nav-wrapper">
6-
<div class="brand-logo main-logo left">
7-
<img class="logo-icon" src="resources/logos/gaucho_logo.png"></img>
8-
<a>Gaucho</a>
9-
</div>
10-
<tap-target :activates="'tap-edit'" :title="'Add some tasks !'" :description="'By pressing this button you can add new tasks to your list below.'"></tap-target>
11-
<ul class="right navbar-buttons">
12-
<li><a id="tap-edit" @click="toggleEdit" :class="{'edit-button-active': editMode}" class="edit-button"><i class="material-icons unselectable-text">mode_edit</i></a></li>
13-
<li><a id="navbar-menu-button" data-activates='navbar-menu' data-gutter="30" :href="'#tab0'"><i class="material-icons small unselectable-text">menu</i></a></li>
14-
</ul>
15-
<navbar-menu @selection="onMenuSelection"></navbar-menu>
16-
17-
<div class="row tabs-row">
18-
<ul id="navbar-tabs" class="tabs tabs-transparent">
19-
<template v-for="(suite,index) in suites">
20-
<li class="tab col s3 unselectable-text" @dragover="dragOver(index)">
21-
<a draggable="false" class="tab-button" @click="onTabSelected(index)" :href="'#tab'+index" v-bind:class="{ active: index===0 }">
22-
<template v-if="editMode && index===activeSuite">
23-
<input id="suite-title-input" type="text" class="validate tab-text" v-model="suite.title">
24-
</template>
25-
<span class="tab-text" v-show="!editMode || index!==activeSuite">{{suite.title}}</span>
26-
</a>
27-
</li>
28-
</template>
2+
<div>
3+
<div class="navbar-fixed">
4+
<nav class="nav-extended">
5+
<div class="nav-wrapper">
6+
<div class="brand-logo main-logo left">
7+
<img class="logo-icon" src="resources/logos/gaucho_logo.png"></img>
8+
<a>Gaucho</a>
9+
</div>
10+
<tap-target :activates="'tap-edit'" :title="'Add some tasks !'" :description="'By pressing this button you can add new tasks to your list below.'"/>
11+
<ul class="right navbar-buttons">
12+
<li><a id="tap-edit" @click="toggleEdit" :class="{'edit-button-active': editMode}" class="edit-button"><i class="material-icons unselectable-text">mode_edit</i></a></li>
13+
<li><a id="navbar-menu-button" data-activates="navbar-menu" data-gutter="30" :href="'#tab0'"><i class="material-icons small unselectable-text">menu</i></a></li>
2914
</ul>
15+
<navbar-menu @selection="onMenuSelection"/>
16+
17+
<div class="row tabs-row">
18+
<ul id="navbar-tabs" class="tabs tabs-transparent">
19+
<template v-for="(suite,index) in suites">
20+
<li class="tab col s3 unselectable-text" @dragover="dragOver(index)">
21+
<a draggable="false" class="tab-button" @click="onTabSelected(index)" :href="'#tab'+index" :class="{ active: index===0 }">
22+
<template v-if="editMode && index===activeSuite">
23+
<input id="suite-title-input" type="text" class="validate tab-text" v-model="suite.title">
24+
</template>
25+
<span class="tab-text" v-show="!editMode || index!==activeSuite">{{suite.title}}</span>
26+
</a>
27+
</li>
28+
</template>
29+
</ul>
30+
</div>
3031
</div>
31-
</div>
32-
</nav>
32+
</nav>
33+
</div>
3334
</div>
34-
</div>
3535
</template>
3636
<script>
3737
"use strict";

‎app/renderer/components/navbar_menu.vue

+13-13
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
<template>
2-
<ul id='navbar-menu' class='dropdown-content'>
3-
<template v-if="!editMode">
4-
<li class="unselectable-text menu-button"><a v-on:click="selected($event,'run-suite')" v-bind:href="'#tab0'">Run Suite</a></li>
5-
<li class="unselectable-text menu-button"><a v-on:click="selected($event,'stop-suite')" v-bind:href="'#tab1'">Stop Suite</a></li>
2+
<ul id="navbar-menu" class="dropdown-content">
3+
<template v-if="!editMode">
4+
<li class="unselectable-text menu-button"><a @click="selected($event,'run-suite')" :href="'#tab0'">Run Suite</a></li>
5+
<li class="unselectable-text menu-button"><a @click="selected($event,'stop-suite')" :href="'#tab1'">Stop Suite</a></li>
66
</template>
7-
<template v-else>
8-
<li class="unselectable-text menu-button" v-bind:class="{ disabled: !canAddSuite }"><a v-on:click="selected($event,'add-suite',!canAddSuite)" v-bind:href="'#tab0'">Add Suite</a></li>
9-
<li class="unselectable-text menu-button" v-bind:class="{ disabled: !canDeleteSuite }"><a v-on:click="selected($event,'delete-suite',!canDeleteSuite)" v-bind:href="'#tab1'">Delete Suite</a></li>
7+
<template v-else>
8+
<li class="unselectable-text menu-button" :class="{ disabled: !canAddSuite }"><a @click="selected($event,'add-suite',!canAddSuite)" :href="'#tab0'">Add Suite</a></li>
9+
<li class="unselectable-text menu-button" :class="{ disabled: !canDeleteSuite }"><a @click="selected($event,'delete-suite',!canDeleteSuite)" :href="'#tab1'">Delete Suite</a></li>
1010
</template>
11-
<li class="divider"></li>
12-
<li class="unselectable-text menu-button"><a class="modal-trigger" href="#config-modal">Configuration</a></li>
13-
<li class="unselectable-text menu-button">
14-
<about></about>
15-
</li>
16-
</ul>
11+
<li class="divider"/>
12+
<li class="unselectable-text menu-button"><a class="modal-trigger" href="#config-modal">Configuration</a></li>
13+
<li class="unselectable-text menu-button">
14+
<about/>
15+
</li>
16+
</ul>
1717
</template>
1818
<script>
1919
"use strict";

‎app/renderer/components/tap_target.vue

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<template>
2-
<div class="tap-target" v-bind:data-activates="activates">
3-
<div class="tap-target-content">
4-
<h5>{{title}}</h5>
5-
<p style="line-height: 22.5px;">{{description}}</p>
2+
<div class="tap-target" :data-activates="activates">
3+
<div class="tap-target-content">
4+
<h5>{{title}}</h5>
5+
<p style="line-height: 22.5px;">{{description}}</p>
6+
</div>
67
</div>
7-
</div>
88
</template>
99
<script>
1010
"use strict";

‎app/renderer/components/task_card.vue

+28-28
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,35 @@
11
<template>
2-
<li class="run-card task-card">
3-
<div class="collapsible-header row unselectable-text" v-bind:class="{ 'edit-mode': editMode}">
4-
<div class="col s1" v-if="editMode">
5-
<i class="tiny material-icons">drag_handle</i>
2+
<li class="run-card task-card">
3+
<div class="collapsible-header row unselectable-text" :class="{ 'edit-mode': editMode}">
4+
<div class="col s1" v-if="editMode">
5+
<i class="tiny material-icons">drag_handle</i>
6+
</div>
7+
<div class="col" :class="{ s4: editMode, s5: !editMode }">
8+
<strong class="truncate">{{task.title}}</strong>
9+
</div>
10+
<div class="col s3">
11+
<div class="truncate task-time" v-if="$store.state.userConfig.showTimer">{{executionTime}}</div>
12+
</div>
13+
<div class="col s3">
14+
<a v-if="editMode" class="waves-effect waves-light btn delete-button" @click="onDeleteClick">Delete</a>
15+
<a v-else class="waves-effect waves-light btn run-button" @click="toggleRun">{{running? "Stop" : "Run"}}</a>
16+
</div>
17+
<div class="col s1">
18+
<progress-spinner v-if="running && $store.state.userConfig.animatedSpinner"/>
19+
<i v-else class="small material-icons" :style="{color: statusColor}">{{task.status}}</i>
20+
<tooltip :task-status="task.status"/>
21+
</div>
622
</div>
7-
<div class="col" v-bind:class="{ s4: editMode, s5: !editMode }">
8-
<strong class="truncate">{{task.title}}</strong>
9-
</div>
10-
<div class="col s3">
11-
<div class="truncate task-time" v-if="$store.state.userConfig.showTimer">{{executionTime}}</div>
12-
</div>
13-
<div class="col s3">
14-
<a v-if="editMode" class="waves-effect waves-light btn delete-button" v-on:click="onDeleteClick">Delete</a>
15-
<a v-else class="waves-effect waves-light btn run-button" v-on:click="toggleRun">{{running? "Stop" : "Run"}}</a>
16-
</div>
17-
<div class="col s1">
18-
<progress-spinner v-if="running && $store.state.userConfig.animatedSpinner"></progress-spinner>
19-
<i v-else class="small material-icons" v-bind:style="{color: statusColor}">{{task.status}}</i>
20-
<tooltip v-bind:taskStatus="task.status"></tooltip>
21-
</div>
22-
</div>
2323

24-
<div class="collapsible-body task-card-body">
25-
<div v-if="!editMode" class="run-output">
26-
<pre>{{task.output}}</pre>
27-
</div>
28-
<div v-else class="container">
29-
<task-input v-bind:task="task" v-on:save="saveTask"></task-input>
24+
<div class="collapsible-body task-card-body">
25+
<div v-if="!editMode" class="run-output">
26+
<pre>{{task.output}}</pre>
27+
</div>
28+
<div v-else class="container">
29+
<task-input :task="task" @save="saveTask"/>
30+
</div>
3031
</div>
31-
</div>
32-
</li>
32+
</li>
3333
</template>
3434

3535
<script>

‎app/renderer/components/task_input.vue

+18-18
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
<template>
2-
<div class="task-input-body">
3-
<div class="input-field">
4-
<input id="title" type="text" v-model="title">
5-
<label for="title">Task Title *</label>
2+
<div class="task-input-body">
3+
<div class="input-field">
4+
<input id="title" type="text" v-model="title">
5+
<label for="title">Task Title *</label>
6+
</div>
7+
<div class="input-field">
8+
<textarea id="command" class="materialize-textarea" v-model="command"/>
9+
<label>Command *</label>
10+
</div>
11+
<div class="input-field">
12+
<input id="path" type="text" v-model="path">
13+
<label for="path">Path</label>
14+
</div>
15+
<div class="row task-input-send-row">
16+
<button class="btn waves-effect waves-light save-task-button" :class="{ disabled: !canSave }" @click="saveTask">Save
17+
<i class="material-icons right">send</i>
18+
</button>
19+
</div>
620
</div>
7-
<div class="input-field">
8-
<textarea id="command" class="materialize-textarea" v-model="command"></textarea>
9-
<label>Command *</label>
10-
</div>
11-
<div class="input-field">
12-
<input id="path" type="text" v-model="path">
13-
<label for="path">Path</label>
14-
</div>
15-
<div class="row task-input-send-row">
16-
<button class="btn waves-effect waves-light save-task-button" v-bind:class="{ disabled: !canSave }" v-on:click="saveTask">Save
17-
<i class="material-icons right">send</i>
18-
</button>
19-
</div>
20-
</div>
2121
</template>
2222

2323
<script>

‎app/renderer/components/task_suite.vue

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
<template>
2-
<div :id="id" class="no-margin">
3-
<draggable element="ul" :options="draggableOptions" class="collapsible no-margin task-list" data-collapsible="accordion" v-model="suite.tasks" @start="onDragStart" @add="onTaskDraggedIn" :move="checkMove">
4-
<template v-for="(task,i) in suite.tasks">
5-
<task-card :task="task" :key="i" @remove="removeTask(i)" @edit="editTask(i, $event)" v-bind:event="event"></task-card>
2+
<div :id="id" class="no-margin">
3+
<draggable element="ul" :options="draggableOptions" class="collapsible no-margin task-list" data-collapsible="accordion" v-model="suite.tasks" @start="onDragStart" @add="onTaskDraggedIn" :move="checkMove">
4+
<template v-for="(task,i) in suite.tasks">
5+
<task-card :task="task" :key="i" @remove="removeTask(i)" @edit="editTask(i, $event)" :event="event"/>
66
</template>
7-
<add-task :tasks="suite.tasks" @add="addNewTask" v-if="showAddTab"></add-task>
8-
</draggable>
9-
<div class="row" v-if="showEmptySuiteMessage">
10-
<div class="grey-text text-lighten-1 section center-align">
11-
You can add tasks by pressing the <i class="material-icons unselectable-text">mode_edit</i> button at the top
7+
<add-task :tasks="suite.tasks" @add="addNewTask" v-if="showAddTab"/>
8+
</draggable>
9+
<div class="row" v-if="showEmptySuiteMessage">
10+
<div class="grey-text text-lighten-1 section center-align">
11+
You can add tasks by pressing the <i class="material-icons unselectable-text">mode_edit</i> button at the top
12+
</div>
1213
</div>
1314
</div>
14-
</div>
1515
</template>
1616

1717
<script>

0 commit comments

Comments
 (0)