Skip to content

Commit a78a80e

Browse files
JulianPrieberJulianPrieber
committed
Fixed Button Editor not working on Touch devices
Fixed button editor not working on Touch enabled devices such as smartphones.
1 parent 7a9a738 commit a78a80e

File tree

8 files changed

+5617
-476
lines changed

8 files changed

+5617
-476
lines changed

‎studio/button-editor/css/colorpicker.css

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
.colorpicker * {
2+
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
3+
}
4+
.colorpicker {
5+
width: 356px;
6+
height: 176px;
7+
overflow: hidden;
8+
position: absolute;
9+
background: url(../images/colorpicker_background.png);
10+
font-family: Arial, Helvetica, sans-serif;
11+
display: none;
12+
}
13+
.colorpicker_color {
14+
width: 150px;
15+
height: 150px;
16+
left: 14px;
17+
top: 13px;
18+
position: absolute;
19+
background: #f00;
20+
overflow: hidden;
21+
cursor: crosshair;
22+
}
23+
.colorpicker_color div {
24+
position: absolute;
25+
top: 0;
26+
left: 0;
27+
width: 150px;
28+
height: 150px;
29+
background: url(../images/colorpicker_overlay.png);
30+
}
31+
.colorpicker_color div div {
32+
position: absolute;
33+
top: 0;
34+
left: 0;
35+
width: 11px;
36+
height: 11px;
37+
overflow: hidden;
38+
background: url(../images/colorpicker_select.gif);
39+
margin: -5px 0 0 -5px;
40+
}
41+
.colorpicker_hue {
42+
position: absolute;
43+
top: 13px;
44+
left: 171px;
45+
width: 35px;
46+
height: 150px;
47+
cursor: n-resize;
48+
}
49+
.colorpicker_hue div {
50+
position: absolute;
51+
width: 35px;
52+
height: 9px;
53+
overflow: hidden;
54+
background: url(../images/colorpicker_indic.gif) left top;
55+
margin: -4px 0 0 0;
56+
left: 0px;
57+
}
58+
.colorpicker_new_color {
59+
position: absolute;
60+
width: 60px;
61+
height: 30px;
62+
left: 213px;
63+
top: 13px;
64+
background: #f00;
65+
}
66+
.colorpicker_current_color {
67+
position: absolute;
68+
width: 60px;
69+
height: 30px;
70+
left: 283px;
71+
top: 13px;
72+
background: #f00;
73+
}
74+
.colorpicker input {
75+
background-color: transparent;
76+
border: 1px solid transparent;
77+
position: absolute;
78+
font-size: 10px;
79+
font-family: Arial, Helvetica, sans-serif;
80+
color: #898989;
81+
top: 4px;
82+
right: 11px;
83+
text-align: right;
84+
margin: 0;
85+
padding: 0;
86+
height: 11px;
87+
}
88+
.colorpicker_hex {
89+
position: absolute;
90+
width: 72px;
91+
height: 22px;
92+
background: url(../images/colorpicker_hex.png) top;
93+
left: 212px;
94+
top: 142px;
95+
}
96+
.colorpicker_hex input {
97+
right: 6px;
98+
}
99+
.colorpicker_field {
100+
height: 22px;
101+
width: 62px;
102+
background-position: top;
103+
position: absolute;
104+
}
105+
.colorpicker_field span {
106+
position: absolute;
107+
width: 12px;
108+
height: 22px;
109+
overflow: hidden;
110+
top: 0;
111+
right: 0;
112+
cursor: n-resize;
113+
}
114+
.colorpicker_rgb_r {
115+
background-image: url(../images/colorpicker_rgb_r.png);
116+
top: 52px;
117+
left: 212px;
118+
}
119+
.colorpicker_rgb_g {
120+
background-image: url(../images/colorpicker_rgb_g.png);
121+
top: 82px;
122+
left: 212px;
123+
}
124+
.colorpicker_rgb_b {
125+
background-image: url(../images/colorpicker_rgb_b.png);
126+
top: 112px;
127+
left: 212px;
128+
}
129+
.colorpicker_hsb_h {
130+
background-image: url(../images/colorpicker_hsb_h.png);
131+
top: 52px;
132+
left: 282px;
133+
}
134+
.colorpicker_hsb_s {
135+
background-image: url(../images/colorpicker_hsb_s.png);
136+
top: 82px;
137+
left: 282px;
138+
}
139+
.colorpicker_hsb_b {
140+
background-image: url(../images/colorpicker_hsb_b.png);
141+
top: 112px;
142+
left: 282px;
143+
}
144+
.colorpicker_submit {
145+
position: absolute;
146+
width: 22px;
147+
height: 22px;
148+
background: url(../images/colorpicker_submit.png) top;
149+
left: 322px;
150+
top: 142px;
151+
overflow: hidden;
152+
}
153+
.colorpicker_focus {
154+
background-position: center;
155+
}
156+
.colorpicker_hex.colorpicker_focus {
157+
background-position: bottom;
158+
}
159+
.colorpicker_submit.colorpicker_focus {
160+
background-position: bottom;
161+
}
162+
.colorpicker_slider {
163+
background-position: bottom;
164+
}

‎studio/button-editor/css/layout.css

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
2+
margin:0;
3+
padding:0;
4+
}
5+
table {
6+
border-collapse:collapse;
7+
border-spacing:0;
8+
}
9+
fieldset,img {
10+
border:0;
11+
}
12+
address,caption,cite,code,dfn,em,strong,th,var {
13+
font-style:normal;
14+
font-weight:normal;
15+
}
16+
ol,ul {
17+
list-style:none;
18+
}
19+
caption,th {
20+
text-align:left;
21+
}
22+
h1,h2,h3,h4,h5,h6 {
23+
font-size:100%;
24+
font-weight:normal;
25+
}
26+
q:before,q:after {
27+
content:'';
28+
}
29+
abbr,acronym { border:0;
30+
}
31+
html, body {
32+
background-color: #fff;
33+
font-family: Arial, Helvetica, sans-serif;
34+
font-size: 12px;
35+
line-height: 18px;
36+
color: #52697E;
37+
}
38+
body {
39+
text-align: center;
40+
overflow: auto;
41+
}
42+
.wrapper {
43+
width: 700px;
44+
margin: 0 auto;
45+
text-align: left;
46+
}
47+
h1 {
48+
font-size: 21px;
49+
height: 47px;
50+
line-height: 47px;
51+
text-transform: uppercase;
52+
}
53+
.navigationTabs {
54+
height: 23px;
55+
line-height: 23px;
56+
border-bottom: 1px solid #ccc;
57+
}
58+
.navigationTabs li {
59+
float: left;
60+
height: 23px;
61+
line-height: 23px;
62+
padding-right: 3px;
63+
}
64+
.navigationTabs li a{
65+
float: left;
66+
dispaly: block;
67+
height: 23px;
68+
line-height: 23px;
69+
padding: 0 10px;
70+
overflow: hidden;
71+
color: #52697E;
72+
background-color: #eee;
73+
position: relative;
74+
text-decoration: none;
75+
}
76+
.navigationTabs li a:hover {
77+
background-color: #f0f0f0;
78+
}
79+
.navigationTabs li a.active {
80+
background-color: #fff;
81+
border: 1px solid #ccc;
82+
border-bottom: 0px solid;
83+
}
84+
.tabsContent {
85+
border: 1px solid #ccc;
86+
border-top: 0px solid;
87+
width: 698px;
88+
overflow: hidden;
89+
}
90+
.tab {
91+
padding: 16px;
92+
display: none;
93+
}
94+
.tab h2 {
95+
font-weight: bold;
96+
font-size: 16px;
97+
}
98+
.tab h3 {
99+
font-weight: bold;
100+
font-size: 14px;
101+
margin-top: 20px;
102+
}
103+
.tab p {
104+
margin-top: 16px;
105+
clear: both;
106+
}
107+
.tab ul {
108+
margin-top: 16px;
109+
list-style: disc;
110+
}
111+
.tab li {
112+
margin: 10px 0 0 35px;
113+
}
114+
.tab a {
115+
color: #8FB0CF;
116+
}
117+
.tab strong {
118+
font-weight: bold;
119+
}
120+
.tab pre {
121+
font-size: 11px;
122+
margin-top: 20px;
123+
width: 668px;
124+
overflow: auto;
125+
clear: both;
126+
}
127+
.tab table {
128+
width: 100%;
129+
}
130+
.tab table td {
131+
padding: 6px 10px 6px 0;
132+
vertical-align: top;
133+
}
134+
.tab dt {
135+
margin-top: 16px;
136+
}
137+
138+
#colorSelector {
139+
position: relative;
140+
width: 36px;
141+
height: 36px;
142+
background: url(../images/select.png);
143+
}
144+
#colorSelector div {
145+
position: absolute;
146+
top: 3px;
147+
left: 3px;
148+
width: 30px;
149+
height: 30px;
150+
background: url(../images/select.png) center;
151+
}
152+
#colorSelector2 {
153+
position: absolute;
154+
top: 0;
155+
left: 0;
156+
width: 36px;
157+
height: 36px;
158+
background: url(../images/select2.png);
159+
}
160+
#colorSelector2 div {
161+
position: absolute;
162+
top: 4px;
163+
left: 4px;
164+
width: 28px;
165+
height: 28px;
166+
background: url(../images/select2.png) center;
167+
}
168+
#colorpickerHolder2 {
169+
top: 32px;
170+
left: 0;
171+
width: 356px;
172+
height: 0;
173+
overflow: hidden;
174+
position: absolute;
175+
}
176+
#colorpickerHolder2 .colorpicker {
177+
background-image: url(../images/custom_background.png);
178+
position: absolute;
179+
bottom: 0;
180+
left: 0;
181+
}
182+
#colorpickerHolder2 .colorpicker_hue div {
183+
background-image: url(../images/custom_indic.gif);
184+
}
185+
#colorpickerHolder2 .colorpicker_hex {
186+
background-image: url(../images/custom_hex.png);
187+
}
188+
#colorpickerHolder2 .colorpicker_rgb_r {
189+
background-image: url(../images/custom_rgb_r.png);
190+
}
191+
#colorpickerHolder2 .colorpicker_rgb_g {
192+
background-image: url(../images/custom_rgb_g.png);
193+
}
194+
#colorpickerHolder2 .colorpicker_rgb_b {
195+
background-image: url(../images/custom_rgb_b.png);
196+
}
197+
#colorpickerHolder2 .colorpicker_hsb_s {
198+
background-image: url(../images/custom_hsb_s.png);
199+
display: none;
200+
}
201+
#colorpickerHolder2 .colorpicker_hsb_h {
202+
background-image: url(../images/custom_hsb_h.png);
203+
display: none;
204+
}
205+
#colorpickerHolder2 .colorpicker_hsb_b {
206+
background-image: url(../images/custom_hsb_b.png);
207+
display: none;
208+
}
209+
#colorpickerHolder2 .colorpicker_submit {
210+
background-image: url(../images/custom_submit.png);
211+
}
212+
#colorpickerHolder2 .colorpicker input {
213+
color: #778398;
214+
}
215+
#customWidget {
216+
position: relative;
217+
height: 36px;
218+
}

‎studio/button-editor/images/blank.gif

49 Bytes
Loading

0 commit comments

Comments
 (0)