[v1] QChip: avatar in last position

pdanpdan · Oct 31, 2019 · 6c1ce66 · 6c1ce66
1 parent b72de7a
commit 6c1ce66
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 2 deletions.
diff --git a/ui/dev/components/components/chip.vue b/ui/dev/components/components/chip.vue
@@ -107,6 +107,19 @@
           </q-avatar>
           Emails
         </q-chip>
+        <q-chip v-bind="chipProps">
+          <q-avatar icon="bookmark" color="red" text-color="white" />
+          Bookmark
+          <q-avatar color="red" text-color="white">
+            50
+          </q-avatar>
+        </q-chip>
+        <q-chip v-bind="chipProps">
+          Bookmark
+          <q-avatar color="red" text-color="white" class="q-avatar--right">
+            50
+          </q-avatar>
+        </q-chip>
       </div>
 
       <p>Tooltip test</p>
@@ -148,6 +161,19 @@
           </q-avatar>
           Emails
         </q-chip>
+        <q-chip v-bind="chipProps" square>
+          <q-avatar icon="bookmark" color="red" text-color="white" />
+          Bookmark
+          <q-avatar color="red" text-color="white">
+            50
+          </q-avatar>
+        </q-chip>
+        <q-chip v-bind="chipProps" square>
+          Bookmark
+          <q-avatar color="red" text-color="white" class="q-avatar--right">
+            50
+          </q-avatar>
+        </q-chip>
       </div>
 
       <p>Dense</p>
@@ -181,6 +207,19 @@
           </q-avatar>
           Emails
         </q-chip>
+        <q-chip v-bind="chipProps" dense>
+          <q-avatar icon="bookmark" color="red" text-color="white" />
+          Bookmark
+          <q-avatar color="red" text-color="white">
+            50
+          </q-avatar>
+        </q-chip>
+        <q-chip v-bind="chipProps" dense>
+          Bookmark
+          <q-avatar color="red" text-color="white" class="q-avatar--right">
+            50
+          </q-avatar>
+        </q-chip>
       </div>
 
       <p>Dense Square</p>
@@ -214,6 +253,19 @@
           </q-avatar>
           Emails
         </q-chip>
+        <q-chip v-bind="chipProps" square dense>
+          <q-avatar icon="bookmark" color="red" text-color="white" />
+          Bookmark
+          <q-avatar color="red" text-color="white">
+            50
+          </q-avatar>
+        </q-chip>
+        <q-chip v-bind="chipProps" square dense>
+          Bookmark
+          <q-avatar color="red" text-color="white" class="q-avatar--right">
+            50
+          </q-avatar>
+        </q-chip>
       </div>
 
       <p>Clickable</p>
@@ -272,6 +324,28 @@
           <q-avatar color="red" text-color="white" icon="directions" />
           Bookmark
         </q-chip>
+
+        <q-chip v-bind="chipProps" :selected.sync="selected6" clickable>
+          <q-avatar icon="bookmark" color="red" text-color="white" />
+          Bookmarks
+          <q-avatar color="red" text-color="white">
+            50
+          </q-avatar>
+        </q-chip>
+
+        <q-chip v-bind="chipProps" :selected.sync="selected6" clickable>
+          Bookmarks
+          <q-avatar color="red" text-color="white" class="q-avatar--right">
+            50
+          </q-avatar>
+        </q-chip>
+
+        <q-chip v-bind="chipProps" :selected.sync="selected7" clickable dense>
+          <q-avatar color="primary" text-color="white">
+            J
+          </q-avatar>
+          Bookmark
+        </q-chip>
       </div>
 
       <p>Removable</p>
@@ -381,6 +455,8 @@ export default {
       selected3: false,
       selected4: false,
       selected5: false,
+      selected6: false,
+      selected7: false,
 
       close1: true,
       close2: true,

diff --git a/ui/src/components/chip/QChip.sass b/ui/src/components/chip/QChip.sass
@@ -29,8 +29,13 @@ $chip-height: 2em
     margin-right: 0.2em
     border-radius: 16px
 
+    ~ .q-avatar,
+    &--right
+      margin-left: 0.2em
+      margin-right: -0.45em
+
   &--selected
-    .q-avatar
+    .q-avatar:first-child:not(.q-avatar--right)
       display: none
 
   &__icon
@@ -66,6 +71,11 @@ $chip-height: 2em
       margin-right: 0.1em
       border-radius: 12px
 
+      ~ .q-avatar,
+      &--right
+        margin-left: 0.1em
+        margin-right: -0.27em
+
     .q-chip__icon
       font-size: 1.25em
       &--left
@@ -75,8 +85,13 @@ $chip-height: 2em
 
   &--square
     border-radius: $generic-border-radius
+
     .q-avatar
       border-radius: ($generic-border-radius - 1px) 0 0 ($generic-border-radius - 1px)
 
+      ~ .q-avatar,
+      &--right
+        border-radius: 0 ($generic-border-radius - 1px) ($generic-border-radius - 1px) 0
+
 body.desktop .q-chip--clickable:focus
   box-shadow: $shadow-1
diff --git a/ui/src/components/chip/QChip.styl b/ui/src/components/chip/QChip.styl
@@ -29,8 +29,13 @@ $chip-height = 2em
     margin-right 0.2em
     border-radius 16px
 
+    ~ .q-avatar,
+    &--right
+      margin-left 0.2em
+      margin-right -0.45em
+
   &--selected
-    .q-avatar
+    .q-avatar:first-child:not(.q-avatar--right)
       display none
 
   &__icon
@@ -66,6 +71,11 @@ $chip-height = 2em
       margin-right 0.1em
       border-radius 12px
 
+      ~ .q-avatar,
+      &--right
+        margin-left 0.1em
+        margin-right -0.27em
+
     .q-chip__icon
       font-size 1.25em
       &--left
@@ -75,8 +85,13 @@ $chip-height = 2em
 
   &--square
     border-radius $generic-border-radius
+
     .q-avatar
       border-radius ($generic-border-radius - 1px) 0 0 ($generic-border-radius - 1px)
 
+      ~ .q-avatar,
+      &--right
+        border-radius 0 ($generic-border-radius - 1px) ($generic-border-radius - 1px) 0
+
 body.desktop .q-chip--clickable:focus
   box-shadow $shadow-1