浏览代码

Made rounded corners an option

Colin Kierans 8 年前
父节点
当前提交
1a2ac34245
共有 4 个文件被更改,包括 27 次插入5 次删除
  1. 4
    0
      generator/css/cards.css
  2. 10
    0
      generator/generate.html
  3. 5
    3
      generator/js/cards.js
  4. 8
    2
      generator/js/ui.js

+ 4
- 0
generator/css/cards.css 查看文件

9
     overflow: hidden;
9
     overflow: hidden;
10
 }
10
 }
11
 
11
 
12
+.card.rounded-corners {
13
+    border-radius: 4px;
14
+}
15
+
12
 .card-content-container {
16
 .card-content-container {
13
     padding:2mm;
17
     padding:2mm;
14
     padding-top:1mm;
18
     padding-top:1mm;

+ 10
- 0
generator/generate.html 查看文件

129
                             </select>
129
                             </select>
130
                         </div>
130
                         </div>
131
                     </div>
131
                     </div>
132
+                    <div class="form-group">
133
+                        <label for="rounded-corners" class="col-sm-4 control-label">Corners</label>
134
+                        <div class="col-sm-8">
135
+                            <div class="checkbox">
136
+                                <label>
137
+                                    <input type="checkbox" checked id="rounded-corners" data-option="rounded_corners" value="1"> Rounded card corners
138
+                                </label>
139
+                            </div>
140
+                        </div>
141
+                    </div>
132
                     <div class="form-group">
142
                     <div class="form-group">
133
                         <label for="foreground-color" class="col-sm-4 control-label">Front color</label>
143
                         <label for="foreground-color" class="col-sm-4 control-label">Front color</label>
134
                         <div class="col-sm-8">
144
                         <div class="col-sm-8">

+ 5
- 3
generator/js/cards.js 查看文件

14
         card_arrangement: "doublesided",
14
         card_arrangement: "doublesided",
15
         card_size: "25x35",
15
         card_size: "25x35",
16
         card_count: null,
16
         card_count: null,
17
-        icon_inline: true
17
+        icon_inline: true,
18
+        rounded_corners: true
18
     }
19
     }
19
 }
20
 }
20
 
21
 
317
     var style_color = card_generate_color_style(color, options);
318
     var style_color = card_generate_color_style(color, options);
318
 
319
 
319
     var result = "";
320
     var result = "";
320
-    result += '<div class="card card-size-' + options.card_size + '" ' + style_color + '>';
321
+    result += '<div class="card card-size-' + options.card_size + ' ' + (options.rounded_corners ? 'rounded-corners' : '') + '" ' + style_color + '>';
321
     result += card_element_icon(data, options);
322
     result += card_element_icon(data, options);
322
     result += card_element_title(data, options);
323
     result += card_element_title(data, options);
323
     result += card_generate_contents(data.contents, data, options);
324
     result += card_generate_contents(data.contents, data, options);
342
 	var icon = card_data_icon_back(data, options);
343
 	var icon = card_data_icon_back(data, options);
343
 
344
 
344
     var result = "";
345
     var result = "";
345
-    result += '<div class="card card-size-' + options.card_size + '" ' + style_color + '>';
346
+    console.log('options.rounded_corners', options.rounded_corners);
347
+    result += '<div class="card card-size-' + options.card_size + ' ' + (options.rounded_corners ? 'rounded-corners' : '') + '" ' + style_color + '>';
346
     result += '  <div class="card-back" ' + background_style + '>';
348
     result += '  <div class="card-back" ' + background_style + '>';
347
 	if (!url)
349
 	if (!url)
348
 	{
350
 	{

+ 8
- 2
generator/js/ui.js 查看文件

269
 
269
 
270
 function ui_change_option() {
270
 function ui_change_option() {
271
     var property = $(this).attr("data-option");
271
     var property = $(this).attr("data-option");
272
-    var value = $(this).val();
272
+    var value
273
+    if($(this).attr('type') == 'checkbox') {
274
+        value = $(this).is(':checked');
275
+    }
276
+    else {
277
+        value = $(this).val();
278
+    }
273
     card_options[property] = value;
279
     card_options[property] = value;
274
     ui_render_selected_card();
280
     ui_render_selected_card();
275
-
276
 }
281
 }
277
 
282
 
278
 function ui_change_card_title() {
283
 function ui_change_card_title() {
492
     $("#card-arrangement").change(ui_change_option);
497
     $("#card-arrangement").change(ui_change_option);
493
     $("#card-size").change(ui_change_option);
498
     $("#card-size").change(ui_change_option);
494
     $("#background-color").change(ui_change_option);
499
     $("#background-color").change(ui_change_option);
500
+    $("#rounded-corners").change(ui_change_option);
495
 
501
 
496
     $("#default-color").change(ui_change_default_color);
502
     $("#default-color").change(ui_change_default_color);
497
     $("#default-icon").change(ui_change_default_icon);
503
     $("#default-icon").change(ui_change_default_icon);

正在加载...
取消
保存