Skip to content

Commit 7ba2c89

Browse files
BlariBlari
committed
User Edit: fix tab colors/margins, button shadow;
Product Management: add space between titles, less search input;
1 parent 48432c4 commit 7ba2c89

File tree

2 files changed

+87
-94
lines changed

2 files changed

+87
-94
lines changed

‎src/pages/E-commerce/ProductManagement/ProductManagement.vue‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,17 @@
44
<v-col cols="12">
55
<v-card class="mb-1">
66
<v-card-title class="pa-5 pb-3">
7-
<p>Products</p><span class="grey--text font-weight-regular subtitle-2 pt-1">({{ products.length }} total ) </span>
7+
<p>Products</p><span class="grey--text font-weight-regular subtitle-2 pt-1">{{'\xa0 (' + products.length }} total ) </span>
88
<v-spacer></v-spacer>
9-
<v-text-field
10-
v-model="search"
11-
append-icon="mdi-magnify"
12-
label="Search"
13-
single-line
14-
hide-details
15-
style="width: 5%"
16-
></v-text-field>
9+
<div>
10+
<v-text-field
11+
v-model="search"
12+
append-icon="mdi-magnify"
13+
label="Search"
14+
single-line
15+
hide-details
16+
></v-text-field>
17+
</div>
1718
</v-card-title>
1819
<v-card-text class="px-5">
1920
<v-data-table
@@ -73,9 +74,6 @@
7374
</v-dialog>
7475
</v-toolbar>
7576
</template>
76-
<!-- <template v-slot:item.data-table-select="{ item }">-->
77-
<!-- <v-simple-checkbox color="secondary" v-model="item.select"></v-simple-checkbox>-->
78-
<!-- </template>-->
7977
<template v-slot:item.image="{ item }">
8078
<v-img class="my-3" width="100" :src=item.image></v-img>
8179
</template>

‎src/pages/User/Edit/Edit.vue‎

Lines changed: 77 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -3,99 +3,96 @@
33
<v-row>
44
<v-col cols="12">
55
<v-tabs
6-
centered
6+
color="primary"
7+
centered
78
>
89
<v-tabs-slider></v-tabs-slider>
910

1011
<v-tab
11-
:href="`#tab-account`"
12-
class="greyBold--text"
12+
:href="`#tab-account`"
13+
class=""
1314
>
14-
<v-icon class="greyBold--text">mdi-shield-account-variant-outline</v-icon>
15+
<v-icon class="mr-3">mdi-shield-account-variant-outline</v-icon>
1516
Account
1617
</v-tab>
1718
<v-tab
18-
class="greyBold--text"
19-
:href="`#tab-profile`"
19+
:href="`#tab-profile`"
2020
>
21-
<v-icon class="greyBold--text">mdi-account-outline</v-icon>
21+
<v-icon class="mr-3">mdi-account-outline</v-icon>
2222
Profile
2323
</v-tab>
2424
<v-tab
25-
class="greyBold--text"
26-
:href="`#tab-password`"
25+
:href="`#tab-password`"
2726
>
28-
<v-icon class="greyBold--text">mdi-lock</v-icon>
27+
<v-icon class="mr-3">mdi-lock</v-icon>
2928
Change Password
3029
</v-tab>
3130
<v-tab
32-
class="greyBold--text"
33-
:href="`#tab-settings`"
31+
:href="`#tab-settings`"
3432
>
35-
<v-icon class="greyBold--text">mdi-cog</v-icon>
33+
<v-icon class="mr-3">mdi-cog</v-icon>
3634
Settings
3735
</v-tab>
3836

3937
<v-tab-item
40-
:value="'tab-account'"
38+
:value="'tab-account'"
4139
>
4240
<v-card
43-
elevation="0"
44-
flat
45-
tile
41+
elevation="0"
42+
flat
43+
tile
4644
>
4745
<v-card-text>
48-
49-
<v-row justify="center">
50-
<v-col cols="12" md="6">
51-
<v-form>
52-
<p class="text-h5">Account</p>
53-
<v-text-field
54-
class="mb-4"
55-
outlined
56-
dense
57-
value="User"
58-
placeholder="User Name"
59-
persistent-hint
60-
single-line hint="Please enter your user name">
61-
</v-text-field>
62-
<v-text-field
63-
class="mb-4"
64-
outlined
65-
dense
66-
value="user@mail.com"
67-
placeholder="User Email"
68-
persistent-hint
69-
single-line hint="Please enter your email">
70-
</v-text-field>
71-
<v-select
72-
class="mb-4"
73-
:items=items
74-
:value="items[1]"
46+
<v-row justify="center">
47+
<v-col cols="12" md="6">
48+
<v-form>
49+
<p class="text-h5">Account</p>
50+
<v-text-field
51+
class="mb-4"
52+
outlined
53+
dense
54+
value="User"
55+
placeholder="User Name"
56+
persistent-hint
57+
single-line hint="Please enter your user name">
58+
</v-text-field>
59+
<v-text-field
60+
class="mb-4"
61+
outlined
62+
dense
63+
value="user@mail.com"
64+
placeholder="User Email"
65+
persistent-hint
66+
single-line hint="Please enter your email">
67+
</v-text-field>
68+
<v-select
69+
class="mb-4"
70+
:items=items
71+
:value="items[1]"
72+
outlined
73+
dense
74+
placeholder="Role"
75+
persistent-hint
76+
single-line hint="Please choose the role">
77+
</v-select>
78+
<div class="d-flex justify-center">
79+
<v-btn
7580
outlined
76-
dense
77-
placeholder="Role"
78-
persistent-hint
79-
single-line hint="Please choose the role">
80-
</v-select>
81-
<div class="d-flex justify-center">
82-
<v-btn
83-
outlined
84-
color="primary"
85-
>
86-
Reset
87-
</v-btn>
88-
<v-spacer></v-spacer>
89-
<v-btn
90-
color="primary"
91-
>
92-
Save
93-
</v-btn>
94-
</div>
95-
</v-form>
96-
</v-col>
97-
</v-row>
98-
81+
color="primary"
82+
>
83+
Reset
84+
</v-btn>
85+
<v-spacer></v-spacer>
86+
<v-btn
87+
class="button-shadow"
88+
color="primary"
89+
>
90+
Save
91+
</v-btn>
92+
</div>
93+
</v-form>
94+
</v-col>
95+
</v-row>
9996
</v-card-text>
10097
</v-card>
10198
</v-tab-item>
@@ -320,30 +317,28 @@
320317

321318
<v-col class="d-flex flex-wrap">
322319
<v-checkbox
323-
class="mr-3"
324-
color="secondary"
325-
v-model="checkbox.email"
326-
label="Email"></v-checkbox>
320+
class="mr-3"
321+
color="secondary"
322+
v-model="checkbox.email"
323+
label="Email"></v-checkbox>
327324
<v-checkbox
328-
class="mr-3"
329-
color="secondary"
330-
v-model="checkbox.messages"
331-
label="Messages"></v-checkbox>
325+
class="mr-3"
326+
color="secondary"
327+
v-model="checkbox.messages"
328+
label="Messages"></v-checkbox>
332329
<v-checkbox
333-
color="secondary"
334-
v-model="checkbox.phone"
335-
label="Phone"></v-checkbox>
330+
color="secondary"
331+
v-model="checkbox.phone"
332+
label="Phone"></v-checkbox>
336333
</v-col>
337-
338-
339334
<p class="body-1">Email notification</p>
340335
<v-switch v-model="switch1"></v-switch>
341336
<p class="body-1">Send copy to personal email</p>
342337
<v-switch v-model="switch2"></v-switch>
343338
<div class="d-flex justify-center">
344339
<v-btn
345-
outlined
346-
color="primary"
340+
outlined
341+
color="primary"
347342
>
348343
Reset
349344
</v-btn>

0 commit comments

Comments
 (0)