Skip to content

Commit

Permalink
Merge pull request #82 from DoroNahari/questions-component-align
Browse files Browse the repository at this point in the history 
Align next button + cards + inputs + overall
  • Loading branch information
@tomer-epstein
tomer-epstein authored Jan 9, 2020
2 parents 4f6b4ee + 9b83ab7 commit 20b51f7
Show file tree
Hide file tree
Showing 20 changed files with 306 additions and 233 deletions.
124 changes: 78 additions & 46 deletions frontend/src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,27 @@
<template>
<div id="app" class="d-flex flex-column yeoman-ui vld-parent">
<v-app id="app" class="vld-parent">
<loading :active.sync="isLoading"
:is-full-page="true"
:height="128"
:width="128"
:color="isLoadingColor"
loader="dots">
</loading>

<Header
v-if="prompts.length"
:selectedGeneratorHeader="selectedGeneratorHeader"
:stepName="prompts[promptIndex].name"
:rpc="rpc"
@parentShowConsole="toggleConsole"
/>
<v-row class="m-0 p-0">
<v-col class="navigaiton-row m-0 p-0" lg="3" sm="auto">
<Navigation v-if="prompts.length > 0" :promptIndex="promptIndex" :prompts="prompts" />
<v-row class="main-row m-0 p-0">
<v-col class="left-col m-0 p-0" lg="3" sm="auto">
<Navigation v-if="prompts.length" :promptIndex="promptIndex" :prompts="prompts" />
</v-col>
<v-col class="">
<v-col class="right-col">
<!-- <v-row class="right-row"> -->
<v-col class="prompts-col" lg="12">
<Done
v-if="isDone"
:doneMessage="doneMessage"
Expand All @@ -31,23 +35,27 @@
@generatorSelected="onGeneratorSelected"
@stepvalidated="onStepValidated"
/>
<div class="navigation" v-if="prompts.length > 0 && !isDone">
<b-button class="btn" :disabled="!stepValidated" @click="next">Next</b-button>
</div>
</v-col>
<v-col v-if="prompts.length > 0 && !isDone" class="bottom-right-col" style="height: 4rem;" offset-lg="9" lg="3">
<v-row class="progress-buttons-row" align="center" justify="end">
<v-btn :disabled="!stepValidated" @click="next">Next ></v-btn>
</v-row>
</v-col>
</v-col>
</v-row>

<!-- TODO Handle scroll of above content when console is visible -->
<!-- TODO Handle scroll of above content when console is visible. low priority because it is for localhost console only -->
<v-card :class="consoleClass" v-show="showConsole">
<v-footer absolute class="font-weight-medium" style="max-height: 300px; overflow-y: auto;">
<v-col class cols="12">
<div id="logArea" placeholder="No log entry">{{logText}}</div>
</v-col>
</v-footer>
</v-card>
</div>
</v-app>
</template>


<script>
import Vue from "vue"
import Loading from 'vue-loading-overlay';
Expand Down Expand Up @@ -357,48 +365,23 @@ export default {
.yeoman-ui *:focus {
outline-color: transparent;
}
div.v-application .primary {
background-color: var(--vscode-editorCodeLens-foreground, #898989) !important;
}
html,
body {
height: 100%;
background-color: var(--vscode-editor-background, #1e1e1e);
}
.list-group-item.selected {
background-color: var(--vscode-list-active-selection-background);
}
.form-control.yeoman-form-control {
color: var(--vscode-input-foreground, #cccccc);
background-color: var(--vscode-input-background, #3c3c3c);
}
.form-control:focus.yeoman-form-control:focus {
color: var(--vscode-input-foreground, #cccccc);
background-color: var(--vscode-input-background, #3c3c3c);
}
v-container {
margin: 0px;
padding: 0px;
}
v-row {
margin: 0px;
}
div[class^="col-"],
div[class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
button.btn,
a.btn {
background-color: var(--vscode-button-background, #0e639c);
border-color: var(--vscode-button-background, #0e639c);
color: var(--vscode-button-foreground, white);
border-radius: 0.2rem;
font-size: 0.8rem;
padding: 0.2rem 0.6rem;
}
button.btn:hover,
a.btn:hover {
background-color: var(--vscode-button-hoverBackground, #1177bb);
border-color: var(--vscode-button-hoverBackground, #1177bb);
.theme--light {
color: var(--vscode-foreground, #cccccc) !important;
}
.loading {
color: var(--vscode-foreground, white);
Expand All @@ -420,13 +403,62 @@ div.consoleClassVisible .v-footer {
word-wrap: break-word;
white-space: pre-wrap;
}
.navigation {
display: flex;
justify-content: flex-end;
padding: 10px;
.left-col {
background-color: var(--vscode-menu-background, #252426);
}
.prompts-col {
overflow-y: scroll;
padding-right: 30px !important;
}
.main-row,
.prompts-col {
height: calc(100% - 4rem);
}
.left-col,
.right-col,
.right-row,
#step-component-div,
#QuestionTypeSelector,
#QuestionTypeSelector > .col,
#QuestionTypeSelector > .col > div {
height: 100%;
}
.right-col {
padding: 0 !important;
}
.bottom-right-col {
background: var(--vscode-editorWidget-background, #252526);
position: relative;
overflow: hidden;
}
.bottom-right-col:before {
height: 100%;
width: 100%;
background-color: var(--vscode-editor-background, #1e1e1e);
position: absolute;
content: "";
transform: rotate(-60deg);
transform-origin: bottom left;
}
.navigaiton-row {
background-color: var(--vscode-menu-background, #252426);
div.bottom-right-col
.theme--light.v-btn:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined) {
background-color: var(--vscode-button-background, #0e639c);
border-color: var(--vscode-button-background, #0e639c);
color: #cccccc !important;
border-radius: 0px;
font-size: 0.8rem;
padding: 0.2rem 0.6rem;
width: 7rem;
height: 2rem;
}
div.bottom-right-col
.theme--light.v-btn:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined):hover {
background-color: var(--vscode-button-hoverBackground, #1177bb);
border-color: var(--vscode-button-hoverBackground, #1177bb);
}
div.bottom-right-col .progress-buttons-row {
padding-right: 15px;
padding-top:4px;
}
</style>
19 changes: 16 additions & 3 deletions frontend/src/components/Done.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div>
<div id="done-component">
<b-jumbotron class="jumbo">
<p>
<b-img class="imgDone" src="https://icons-for-free.com/iconfiles/png/128/success-1319971786207747160.png"></b-img>
Expand All @@ -12,10 +12,10 @@
<b-row>
<b-col>Where would you like to open the project?</b-col>
<b-col cols="12" md="auto">
<b-button class="btn" :data-command-params="donePath" @click="close">Close</b-button>
<v-btn class="btn" :data-command-params="donePath" @click="close">Close</v-btn>
</b-col>
<b-col cols="12" md="auto">
<b-button class="btn" data-command-name="vscode.openFolder" :data-command-params="donePath" @click="executeCommand">New Workspace</b-button>
<v-btn class="btn" data-command-name="vscode.openFolder" :data-command-params="donePath" @click="executeCommand">New Workspace</v-btn>
</b-col>
</b-row>
</b-container>
Expand Down Expand Up @@ -67,4 +67,17 @@ img.imgDone {
width: 1.5rem;
height: 1.5rem;
}
.jumbo button {
background-color: var(--vscode-button-background, #0e639c) !important;
border-color: var(--vscode-button-background, #0e639c) !important;
color: #cccccc !important;
border-radius: 0px !important;
font-size: 0.8rem !important;
padding: 0.2rem 0.6rem !important;
height: 2rem !important;
}
.jumbo button {
background-color: var(--vscode-button-hoverBackground, #1177bb) !important;
border-color: var(--vscode-button-hoverBackground, #1177bb) !important;
}
</style>
2 changes: 1 addition & 1 deletion frontend/src/components/Header.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default {
methods: {
collapseLog() {
this.rpc.invoke("toggleLog", [{}]);
this.$parent.showConsole = !this.$parent.showConsole; //TODO investigate why this.$emit is not working
this.$emit("parentShowConsole");
}
}
};
Expand Down
5 changes: 4 additions & 1 deletion frontend/src/components/Navigation.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
:key="`${index}-step`"
:step="index"
:complete="currentStep > index"
complete-icon="circle-slice-8"
>{{ prompts[index - 1] ? prompts[index - 1].name : "" }}</v-stepper-step>
<v-stepper-content :step="index" :key="`${index}-content`"></v-stepper-content>
</template>
Expand Down Expand Up @@ -69,6 +68,10 @@ span.v-stepper__step__step {
width: 10px;
}
span.v-stepper__step__step .v-icon.v-icon {
font-size: 0;
}
/* TODO Erez to give styles for completed step */
.v-stepper__step--complete .v-stepper__step__step {
background: var(--vscode-editorCodeLens-foreground, #999999);
Expand Down
99 changes: 66 additions & 33 deletions frontend/src/components/QuestionTypeSelector.vue
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,54 @@
<template>
<div v-if="currentQuestion.isWhen">

<GeneratorSelection
v-if="currentQuestion.type==='generators'"
:currentQuestion="currentQuestion"
@generatorSelected="onGeneratorSelected"
/>
<b-form-group :label="currentQuestion.message">
<QuestionInput
v-if="!currentQuestion.type || currentQuestion.type==='input' || currentQuestion.type==='password' || currentQuestion.type==='number'"
:currentQuestion="currentQuestion"
<div id="QuestionTypeSelector">
<v-col v-if="questions[0] && questions[0].type==='generators'" lg="12">
<GeneratorSelection
:currentQuestion="questions[0]"
@generatorSelected="onGeneratorSelected"
/>
</v-col>
<v-col v-else lg="6">
<v-form>
<div v-for="(currentQuestion, index) in questions" :key="index">
<div v-if="currentQuestion.isWhen">
<QuestionInput
v-if="!currentQuestion.type || currentQuestion.type==='input' || currentQuestion.type==='password' || currentQuestion.type==='number'"
:currentQuestion="currentQuestion"
/>

<QuestionEditor v-if="currentQuestion.type==='editor'" :currentQuestion="currentQuestion" />
<QuestionEditor
v-if="currentQuestion.type==='editor'"
:currentQuestion="currentQuestion"
/>

<QuestionList
v-if="currentQuestion.type==='list' || currentQuestion.type==='rawlist'"
:currentQuestion="currentQuestion"
/>
<QuestionList
v-if="currentQuestion.type==='list' || currentQuestion.type==='rawlist'"
:currentQuestion="currentQuestion"
/>

<QuestionConfirm v-if="currentQuestion.type==='confirm'" :currentQuestion="currentQuestion" />
<QuestionConfirm
v-if="currentQuestion.type==='confirm'"
:currentQuestion="currentQuestion"
/>

<QuestionCheckbox
v-if="currentQuestion.type==='checkbox'"
:currentQuestion="currentQuestion"
/>
<QuestionCheckbox
v-if="currentQuestion.type==='checkbox'"
:currentQuestion="currentQuestion"
/>

<QuestionExpand v-if="currentQuestion.type==='expand'" :currentQuestion="currentQuestion" />
<QuestionExpand
v-if="currentQuestion.type==='expand'"
:currentQuestion="currentQuestion"
/>

<b-form-invalid-feedback
id="validation-message"
class="invalid-feedback"
:state="currentQuestion.isValid"
>{{currentQuestion.validationMessage}}</b-form-invalid-feedback>
</b-form-group>
<b-form-invalid-feedback
id="validation-message"
class="invalid-feedback"
:state="currentQuestion.isValid"
>{{currentQuestion.validationMessage}}</b-form-invalid-feedback>
</div>
</div>
</v-form>
</v-col>
</div>
</template>

Expand All @@ -58,7 +73,7 @@ export default {
GeneratorSelection
},
props: {
currentQuestion: Object
questions: Array
},
data() {
return {
Expand All @@ -75,8 +90,26 @@ export default {
}
};
</script>
<style scoped>
.btn {
margin: 0 5px;
<style >
#validation-message{
margin-top: -1.5rem !important;
}
p.question-label{
margin-bottom: 0.25rem !important;
}
div.v-input__slot .v-select__selection{
color: var(--vscode-input-foreground, #cccccc) !important;
}
div.v-select-list div.v-list{
background-color: var(--vscode-input-background, #3c3c3c) !important;
}
div.v-select-list div.v-list div.v-list-item,
div.v-select-list div.v-list div.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled)
{
color: var(--vscode-input-foreground, #cccccc) !important;
}
div.v-input__slot input, div.v-input__slot textarea {
color: var(--vscode-input-foreground, #cccccc) !important;
}
</style>
</style>
1 change: 1 addition & 0 deletions frontend/src/components/QuestionTypes/GeneratorSelection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ export default {
.card-deck {
margin: 0rem;
height: 100%;
}
.card.generator {
Expand Down
Loading

0 comments on commit 20b51f7

Please sign in to comment.