feat: #224 Dialog - styling buttons

When defining buttons you can use "classes" and "style" props
quasarframework · Dec 18, 2016 · ed21775 · ed21775
1 parent b98fb7d
commit ed21775
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 5 deletions.
diff --git a/dev/components/global/dialog.vue b/dev/components/global/dialog.vue
@@ -80,6 +80,27 @@ export default {
             })
           }
         },
+        {
+          label: 'Custom CSS classes & style to buttons',
+          icon: 'format_color_fill',
+          handler () {
+            Dialog.create({
+              title: 'Confirm',
+              message: 'Custom button classes.',
+              buttons: [
+                {
+                  label: 'Disagree',
+                  classes: 'negative clear',
+                  style: 'text-decoration: underline'
+                },
+                {
+                  label: 'Agree',
+                  classes: 'positive'
+                }
+              ]
+            })
+          }
+        },
         {
           label: 'Stacked Buttons Example',
           icon: 'reorder',

diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue
@@ -17,7 +17,7 @@
           <input type="text" class="full-width" v-model="el.model" :placeholder="el.placeholder" required>
           <label v-html="el.label"></label>
         </div>
-        
+
         <div v-if="el.type === 'password'" class="floating-label" style="margin-bottom: 10px">
           <input type="password" class="full-width" v-model="el.model" :placeholder="el.placeholder" required>
           <label v-html="el.label"></label>
@@ -99,8 +99,9 @@
     >
       <button
         v-for="button in buttons"
-        class="primary clear"
         @click="trigger(button.handler)"
+        :class="button.classes || 'primary clear'"
+        :style="button.style"
         v-html="typeof button === 'string' ? button : button.label"
       ></button>
     </div>

diff --git a/src/vue-components/modal/modal.ios.styl b/src/vue-components/modal/modal.ios.styl
@@ -120,9 +120,6 @@ maximized-modal()
     border-radius 0
     &:last-child
       font-weight bold
-    &:hover, &:active
-      color white !important
-      background rgba(0, 0, 0, .3) !important
   &.row
     button + button
       border-left 1px solid $form-darker-color