Skip to content

Commit e09fd01

Browse files
rstoenescurstoenescu
committed
Further QColor work
1 parent d4125b9 commit e09fd01

File tree

18 files changed

+684
-429
lines changed

18 files changed

+684
-429
lines changed

‎dev/components/form/color-picker.vue‎

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,60 +5,66 @@
55

66
<div class="row md-gutter" style="width: 550px">
77
<div class="col-6">
8-
<q-color v-model="modelHex" />
8+
<q-color-picker v-model="modelHex" />
99
<div class="inline-block text-white" style="text-shadow: black 0px 0px 7px; padding: 10px" :style="{ backgroundColor: this.modelHex }">
1010
<pre>Hex: {{modelHex}}</pre>
1111
</div>
1212
</div>
1313
<div class="col-6">
14-
<q-color v-model="modelHexa" />
14+
<q-color-picker v-model="modelHexa" />
1515
<div class="inline-block text-white" style="text-shadow: black 0px 0px 7px; padding: 10px" :style="{ backgroundColor: this.modelHexa }">
1616
<pre>Hexa: {{modelHexa}}</pre>
1717
</div>
1818
</div>
1919
<div class="col-6">
20-
<q-color v-model="modelRgb" />
20+
<q-color-picker v-model="modelRgb" />
2121
<div class="inline-block text-white" style="text-shadow: black 0px 0px 7px; padding: 10px" :style="{ backgroundColor: rgb(this.modelRgb) }">
2222
<pre>RGB: {{modelRgb}}</pre>
2323
</div>
2424
</div>
2525
<div class="col-6">
26-
<q-color v-model="modelRgba" />
26+
<q-color-picker v-model="modelRgba" />
2727
<div class="inline-block text-white" style="text-shadow: black 0px 0px 7px; padding: 10px" :style="{ backgroundColor: rgb(this.modelRgba) }">
2828
<pre>RGBA: {{modelRgba}}</pre>
2929
</div>
3030
</div>
3131
</div>
3232

33+
<h4>Input</h4>
34+
<q-color v-model="inputModelHex" />
35+
<q-color v-model="inputModelHex" inverted />
36+
<q-color v-model="inputModelRgb" />
37+
<q-color v-model="inputModelRgb" inverted />
38+
3339
<h4>Readonly</h4>
3440
<div class="row md-gutter" style="width: 550px">
3541
<div class="col-6">
36-
<q-color v-model="modelHex" readonly />
42+
<q-color-picker v-model="modelHex" readonly />
3743
</div>
3844
<div class="col-6">
39-
<q-color v-model="modelHexa" readonly />
45+
<q-color-picker v-model="modelHexa" readonly />
4046
</div>
4147
<div class="col-6">
42-
<q-color v-model="modelRgb" readonly />
48+
<q-color-picker v-model="modelRgb" readonly />
4349
</div>
4450
<div class="col-6">
45-
<q-color v-model="modelRgba" readonly />
51+
<q-color-picker v-model="modelRgba" readonly />
4652
</div>
4753
</div>
4854

4955
<h4>Disable</h4>
5056
<div class="row md-gutter" style="width: 550px">
5157
<div class="col-6">
52-
<q-color v-model="modelHex" disable />
58+
<q-color-picker v-model="modelHex" disable />
5359
</div>
5460
<div class="col-6">
55-
<q-color v-model="modelHexa" disable />
61+
<q-color-picker v-model="modelHexa" disable />
5662
</div>
5763
<div class="col-6">
58-
<q-color v-model="modelRgb" disable />
64+
<q-color-picker v-model="modelRgb" disable />
5965
</div>
6066
<div class="col-6">
61-
<q-color v-model="modelRgba" disable />
67+
<q-color-picker v-model="modelRgba" disable />
6268
</div>
6369
</div>
6470
</div>
@@ -72,7 +78,9 @@ export default {
7278
modelHex: '#FF00FF',
7379
modelHexa: '#FF00FFCC',
7480
modelRgb: { r: 0, g: 0, b: 0 },
75-
modelRgba: { r: 255, g: 0, b: 255, a: 100 }
81+
modelRgba: { r: 255, g: 0, b: 255, a: 100 },
82+
inputModelHex: '#FF00FF',
83+
inputModelRgb: { r: 245, g: 20, b: 150 }
7684
}
7785
},
7886
methods: {

‎dev/components/form/datetime.vue‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -134,9 +134,9 @@
134134
</span>
135135
</small>
136136
</p>
137-
<q-inline-datetime v-model="model" type="date" />
137+
<q-datetime-picker v-model="model" type="date" />
138138
<br><br>
139-
<q-inline-datetime default-view="year" v-model="model" type="date" />
139+
<q-datetime-picker default-view="year" v-model="model" type="date" />
140140

141141
<p class="caption">
142142
Time
@@ -151,26 +151,26 @@
151151
<span class="mat-only">inside of the clock</span>.
152152
</small>
153153
</p>
154-
<q-inline-datetime v-model="model" type="time" />
154+
<q-datetime-picker v-model="model" type="time" />
155155

156156
<p class="caption">Time 24hr Format (force)</p>
157-
<q-inline-datetime v-model="model" type="time" format24h />
157+
<q-datetime-picker v-model="model" type="time" format24h />
158158

159159
<p class="caption">Date & Time</p>
160-
<q-inline-datetime @change="onChange" color="secondary" v-model="model" type="datetime" />
160+
<q-datetime-picker @change="onChange" color="secondary" v-model="model" type="datetime" />
161161

162162
<p class="caption">Date - Monday as First</p>
163-
<q-inline-datetime v-model="model" monday-first type="date" />
163+
<q-datetime-picker v-model="model" monday-first type="date" />
164164
<p class="caption">Date - Saturday as First</p>
165-
<q-inline-datetime v-model="model" saturday-first type="date" />
165+
<q-datetime-picker v-model="model" saturday-first type="date" />
166166

167167
<p class="caption">Disabled State</p>
168-
<q-inline-datetime disable v-model="model" type="datetime" />
168+
<q-datetime-picker disable v-model="model" type="datetime" />
169169

170170
<p class="caption">Readonly State</p>
171-
<q-inline-datetime readonly v-model="model" type="datetime" />
171+
<q-datetime-picker readonly v-model="model" type="datetime" />
172172
<p class="caption">Min & Max</p>
173-
<q-inline-datetime type="datetime" v-model="minMaxModel" :min="min" :max="max" />
173+
<q-datetime-picker type="datetime" v-model="minMaxModel" :min="min" :max="max" />
174174
</div>
175175
</div>
176176
</template>

‎icons/fontawesome.js‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,6 @@ export default {
1717
right: 'fa-chevron-right'
1818
},
1919

20-
btn: {
21-
dropdown: 'fa-caret-down'
22-
},
2320
pullToRefresh: {
2421
arrow: 'fa-arrow-circle-down',
2522
refresh: 'fa-refresh'
@@ -56,8 +53,7 @@ export default {
5653
},
5754
datetime: {
5855
arrowLeft: 'fa-chevron-left',
59-
arrowRight: 'fa-chevron-right',
60-
dropdown: 'fa-caret-down'
56+
arrowRight: 'fa-chevron-right'
6157
},
6258
editor: {
6359
bold: 'fa-bold',
@@ -99,7 +95,8 @@ export default {
9995
hidePass: 'fa-eye-slash',
10096
showNumber: 'fa-calculator',
10197
hideNumber: 'fa-keyboard-o',
102-
clear: 'fa-times'
98+
clear: 'fa-times',
99+
dropdown: 'fa-caret-down'
103100
},
104101
pagination: {
105102
first: 'fa-step-backward',
@@ -120,9 +117,6 @@ export default {
120117
rating: {
121118
icon: 'fa-star'
122119
},
123-
select: {
124-
dropdown: 'fa-caret-down'
125-
},
126120
stepper: {
127121
done: 'fa-check',
128122
active: 'fa-pencil',

‎icons/ionicons.js‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,6 @@ export default {
1717
right: 'ion-chevron-right'
1818
},
1919

20-
btn: {
21-
dropdown: 'ion-android-arrow-dropdown'
22-
},
2320
pullToRefresh: {
2421
arrow: 'ion-arrow-down-c',
2522
refresh: 'ion-ios-refresh'
@@ -56,8 +53,7 @@ export default {
5653
},
5754
datetime: {
5855
arrowLeft: 'ion-chevron-left',
59-
arrowRight: 'ion-chevron-right',
60-
dropdown: 'ion-android-arrow-dropdown'
56+
arrowRight: 'ion-chevron-right'
6157
},
6258
editor: { // TODO
6359
bold: 'format_bold',
@@ -99,7 +95,8 @@ export default {
9995
hidePass: 'ion-eye-disabled',
10096
showNumber: 'ion-calculator',
10197
hideNumber: 'ion-ios-keypad',
102-
clear: 'ion-backspace-outline'
98+
clear: 'ion-backspace-outline',
99+
dropdown: 'ion-android-arrow-dropdown'
103100
},
104101
pagination: {
105102
first: 'ion-ios-skipbackward-outline',
@@ -120,9 +117,6 @@ export default {
120117
rating: {
121118
icon: 'ion-ios-star'
122119
},
123-
select: {
124-
dropdown: 'ion-android-arrow-dropdown'
125-
},
126120
stepper: {
127121
done: 'ion-checkmark',
128122
active: 'ion-edit',

‎icons/material.js‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,6 @@ export default {
1717
right: 'chevron_right'
1818
},
1919

20-
btn: {
21-
dropdown: 'arrow_drop_down'
22-
},
2320
pullToRefresh: {
2421
arrow: 'arrow_downward',
2522
refresh: 'refresh'
@@ -56,8 +53,7 @@ export default {
5653
},
5754
datetime: {
5855
arrowLeft: 'chevron_left',
59-
arrowRight: 'chevron_right',
60-
dropdown: 'arrow_drop_down'
56+
arrowRight: 'chevron_right'
6157
},
6258
editor: {
6359
bold: 'format_bold',
@@ -99,7 +95,8 @@ export default {
9995
hidePass: 'visibility_off',
10096
showNumber: 'keyboard',
10197
hideNumber: 'keyboard_hide',
102-
clear: 'cancel'
98+
clear: 'cancel',
99+
dropdown: 'arrow_drop_down'
103100
},
104101
pagination: {
105102
first: 'first_page',
@@ -120,9 +117,6 @@ export default {
120117
rating: {
121118
icon: 'grade'
122119
},
123-
select: {
124-
dropdown: 'arrow_drop_down'
125-
},
126120
stepper: {
127121
done: 'check',
128122
active: 'edit',

‎src/components/btn/QBtnDropdown.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export default {
4040
'q-icon',
4141
{
4242
props: {
43-
name: this.$q.icon.btn.dropdown
43+
name: this.$q.icon.input.dropdown
4444
},
4545
staticClass: 'transition-generic',
4646
'class': {

0 commit comments

Comments
 (0)