Improved action dialog style

app/imports/client/ui/creature/actions/ActionDialog.vue

@@ -1,57 +1,85 @@
 <template lang="html">
-  <dialog-base>
-    <template slot="toolbar">
+  <div class="d-flex flex-column">
+    <v-toolbar
+      class="base-dialog-toolbar"
+    >
+      <v-btn
+        icon
+        @click="cancel"
+      >
+        <v-icon>mdi-arrow-left</v-icon>
+      </v-btn>
       <v-toolbar-title>
         Action
       </v-toolbar-title>
-    </template>
-    <log-content :model="allLogContent" />
-    <component
-      :is="activeInput"
-      v-if="activeInput"
-      v-model="userInput"
-      v-bind="activeInputParams"
-      @continue="continueAction"
-      @set-input-ready="setInputReady"
-    />
-    <v-btn
-      slot="actions"
-      text
-      @click="cancel"
-    >
-      Cancel
-    </v-btn>
-    <v-spacer slot="actions" />
-    <v-btn
-      v-show="!actionDone"
-      slot="actions"
-      text
-      :disabled="!userInputReady || !resumeActionFn"
-      @click="stepAction"
-    >
-      Step
-    </v-btn>
-    <v-btn
-      v-if="actionDone"
-      slot="actions"
-      text
-      @click="finishAction"
-    >
-      {{ 'Apply Results' }}
-    </v-btn>
-    <v-btn
-      v-else
-      slot="actions"
-      text
-      :disabled="actionBusy"
-      @click="startAction"
-    >
-      {{ 'Start' }}
-    </v-btn>
-  </dialog-base>
+    </v-toolbar>
+    <div class="action-dialog-content">
+      <div class="layout d-flex">
+        <div
+          class="input d-flex justify-center align-center"
+        >
+          <component
+            :is="activeInput"
+            v-if="activeInput"
+            v-model="userInput"
+            v-bind="activeInputParams"
+            @continue="continueAction"
+            @set-input-ready="setInputReady"
+          />
+        </div>
+        <div
+          class="log-preview card-raised-background d-flex flex-column align-end justify-end"
+          style="flex-basis: 256px;"
+        >
+          <v-card
+            v-if="allLogContent && allLogContent.length"
+            class="ma-2 log-entry"
+          >
+            <v-card-text
+              class="pa-2"
+            >
+              <log-content :model="allLogContent" />
+            </v-card-text>
+          </v-card>
+        </div>
+      </div>
+    </div>
+    <v-card-actions>
+      <v-btn
+        text
+        @click="cancel"
+      >
+        Cancel
+      </v-btn>
+      <v-spacer slot="actions" />
+      <v-btn
+        v-show="!actionDone"
+        text
+        :disabled="!userInputReady || !resumeActionFn"
+        @click="stepAction"
+      >
+        Step
+      </v-btn>
+      <v-btn
+        v-if="actionDone"
+        text
+        @click="finishAction"
+      >
+        {{ 'Apply Results' }}
+      </v-btn>
+      <v-btn
+        v-else
+        text
+        :disabled="actionBusy"
+        @click="startAction"
+      >
+        {{ 'Start' }}
+      </v-btn>
+    </v-card-actions>
+  </div>
 </template>
 
-<script lang="ts">
+<script lang="js">
 import DialogBase from '/imports/client/ui/dialogStack/DialogBase.vue';
 import EngineActions from '/imports/api/engine/action/EngineActions';
 import applyAction from '/imports/api/engine/action/functions/applyAction';
@@ -133,7 +161,11 @@ export default {
       applyAction(
         this.actionResult, this, { simulate: true, stepThrough, task: this.task}
       ).then(() => {
-        this.actionDone = true
+        this.actionDone = true;
+        // If we aren't stepping through close the dialog and apply the action
+        if (!this.actionResult._stepThrough) {
+          this.$store.dispatch('popDialogStack', this.actionResult);
+        }
       });
     },
     stepAction() {
@@ -172,12 +204,15 @@ export default {
     },
     // inputProvider methods
     async rollDice(dice) {
+      return Promise.resolve(this.deterministicDiceRoller(dice));
+      /* Dice Animation and user control goes here:
       this.activeInputParams = {
         deterministicDiceRoller: this.deterministicDiceRoller,
         dice
       };
       this.activeInput = 'roll-input';
       return this.promiseInput();
+      */
     },
     async nextStep(task) {
       return this.promiseInput();
@@ -199,3 +234,45 @@ export default {
   }
 };
 </script>
+
+<style lang="css" scoped>
+.base-dialog-toolbar {
+  z-index: 2;
+  border-radius: 2px 2px 0 0;
+}
+
+.action-dialog-content {
+  container-type: size;
+  flex-grow: 1;
+  overflow: auto;
+}
+
+.action-dialog-content, .layout {
+  height: 100%;
+}
+
+.input {
+  flex-grow: 1;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.log-preview {
+  flex-basis: 256px;
+  height: 100%;
+  overflow-y: auto;
+}
+
+@container (max-width: 600px) {
+  .layout {
+    flex-direction: column;
+  }
+  .input {
+    height: unset;
+  }
+  .log-preview {
+    flex-basis: 300px;
+  }
+}
+
+</style>

app/imports/client/ui/creature/actions/input/AdvantageInput.vue

@@ -52,7 +52,6 @@ export default {
   methods: {
     emitInput(e) {
       e = e || 0;
-      console.log(e);
       this.$emit('input', e)
     }
   }