Custom radio inputs

customize.dist/src/less2/include/checkmark.less

@@ -52,6 +52,7 @@
             display: flex;
             justify-content: center;
             border: 1px solid @colortheme_form-border;
+            flex-shrink: 0;
             &:after {
                 content: "";
                 display: none;
@@ -65,4 +66,68 @@
         }
 
     }
+
+    .cp-radio {
+        margin: 0;
+        display: flex;
+        align-items: center;
+        position: relative;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+
+        &.cp-radio-secondary {
+            .cp-radio-mark {
+                &:after {
+                    border-color: @colortheme_checkmark-col2;
+                }
+            }
+            input {
+                &:checked ~ .cp-radio-mark {
+                    background-color: @colortheme_checkmark-back2;
+                }
+            }
+        }
+        &:hover .cp-radio-mark {
+            background-color: @colortheme_checkmark-back0-active;
+        }
+
+        input {
+            display: none;
+            &:checked ~ .cp-radio-mark {
+                background-color: @colortheme_checkmark-back1;
+                &:after {
+                    display: block;
+                }
+            }
+        }
+        @radio-size: @dim1 * 3;
+        .cp-radio-mark {
+            margin-right: 10px;
+            position: relative;
+            height: @radio-size;
+            width: @radio-size;
+            background-color: @colortheme_checkmark-back0;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border: 1px solid @colortheme_form-border;
+            flex-shrink: 0;
+            &:after {
+                display: none;
+                content: "";
+                border-radius: 50%;
+                background: white;
+                width: @dim1;
+                height: @dim1;
+
+                //transform: rotate(45deg);
+                //border: solid @colortheme_checkmark-col1;
+                //border-width: 0 @width @width 0;
+            }
+        }
+
+    }
 }

customize.dist/src/less2/include/creation.less

@@ -1,6 +1,5 @@
 @import (once) "./colortheme-all.less";
 @import (once) "./tools.less";
-@import (once) "./checkmark.less";
 @import (once) './icon-colors.less';
 
 .creation_main(
@@ -112,6 +111,8 @@
                 flex-wrap: wrap;
                 font-size: 16px;
                 margin: 10px 0;
+                min-height: 28px;
+                line-height: 28px;
                 label {
                     flex: 1;
                 }
@@ -135,9 +136,11 @@
                 display: block;
                 overflow: hidden;
                 max-height: 0px;
+                max-width: 0px;
                 //margin-top: 10px;
                 &.active {
                     transition: max-height 0.5s ease-in-out;
+                    max-width: unset;
                     max-height: 100px;
                 }
             }
@@ -147,7 +150,7 @@
                     input, select {
                         font-size: 14px;
                         border: 1px solid @colortheme_form-border;
-                        height: 28px;
+                        height: 26px;
                         background-color: @colortheme_form-bg;
                         color: @colortheme_form-color;
                     }
@@ -275,8 +278,6 @@
                 display: inline-block;
             }
         }
-
-        .checkmark_main(20px);
     }
 
         @media screen and (max-height: 700px) {

customize.dist/src/less2/include/framework.less

@@ -5,6 +5,7 @@
 @import (once) './tokenfield.less';
 @import (once) './creation.less';
 @import (once) './tippy.less';
+@import (once) "./checkmark.less";
 
 .framework_main(@bg-color, @warn-color, @color) {
     .toolbar_main(
@@ -16,6 +17,7 @@
     .alertify_main();
     .tokenfield_main();
     .tippy_main();
+    .checkmark_main(20px);
     .creation_main(
         @bg-color: @bg-color,
         @warn-color: @warn-color,
@@ -36,6 +38,7 @@
     .fileupload_main();
     .alertify_main();
     .tippy_main();
+    .checkmark_main(20px);
 }
 
 

www/common/common-interface.js

@@ -740,5 +740,33 @@ define([
         });
     };
 
+    UI.createCheckbox = function (id, label, checked) {
+        var inputOpts = {
+            type: 'checkbox',
+            id: id
+        };
+        if (checked) { inputOpts.checked = 'checked'; }
+        console.log(inputOpts);
+        return h('label.cp-checkmark', [
+            h('input', inputOpts),
+            h('span.cp-checkmark-mark'),
+            label
+        ]);
+    };
+
+    UI.createRadio = function (name, id, label, checked) {
+        var inputOpts = {
+            type: 'radio',
+            id: id,
+            name: name
+        };
+        if (checked) { inputOpts.checked = 'checked'; }
+        return h('label.cp-radio', [
+            h('input', inputOpts),
+            h('span.cp-radio-mark'),
+            label
+        ]);
+    };
+
     return UI;
 });

www/common/common-ui-elements.js

@@ -235,7 +235,9 @@ define([
         var link = h('div.cp-share-modal', [
             h('label', Messages.share_linkAccess),
             h('br'),
-            h('input#cp-share-editable-true.cp-share-editable-value', {
+            UI.createRadio('cp-share-editable', 'cp-share-editable-true', Messages.share_linkEdit, true),
+            UI.createRadio('cp-share-editable', 'cp-share-editable-false', Messages.share_linkView, false),
+            /*h('input#cp-share-editable-true.cp-share-editable-value', {
                 type: 'radio',
                 name: 'cp-share-editable',
                 value: 1,
@@ -246,23 +248,12 @@ define([
                 name: 'cp-share-editable',
                 value: 0
             }),
-            h('label', { 'for': 'cp-share-editable-false' }, Messages.share_linkView),
+            h('label', { 'for': 'cp-share-editable-false' }, Messages.share_linkView),*/
-            h('br'),
             h('br'),
             h('label', Messages.share_linkOptions),
             h('br'),
-            h('input#cp-share-embed', {
+            UI.createCheckbox('cp-share-embed', Messages.share_linkEmbed),
-                type: 'checkbox',
+            UI.createCheckbox('cp-share-present', Messages.share_linkPresent),
-                name: 'cp-share-embed'
-            }),
-            h('label', { 'for': 'cp-share-embed' }, Messages.share_linkEmbed),
-            h('br'),
-            h('input#cp-share-present', {
-                type: 'checkbox',
-                name: 'cp-share-present'
-            }),
-            h('label', { 'for': 'cp-share-present' }, Messages.share_linkPresent),
-            h('br'),
             h('br'),
             UI.dialog.selectable('', { id: 'cp-share-link-preview' })
         ]);
@@ -1892,28 +1883,13 @@ define([
         // Owned pads
         // Default is Owned pad
         var owned = h('div.cp-creation-owned', [
-            h('label.cp-checkmark', [
+            UI.createCheckbox('cp-creation-owned', Messages.creation_owned, true),
-                h('input', {
-                    type: 'checkbox',
-                    id: 'cp-creation-owned',
-                    checked: 'checked'
-                }),
-                h('span.cp-checkmark-mark'),
-                Messages.creation_owned
-            ]),
             createHelper('/faq.html#keywords-owned', Messages.creation_owned1)
         ]);
 
         // Life time
         var expire = h('div.cp-creation-expire', [
-            h('label.cp-checkmark', [
+            UI.createCheckbox('cp-creation-expire', Messages.creation_expire, false),
-                h('input', {
-                    type: 'checkbox',
-                    id: 'cp-creation-expire'
-                }),
-                h('span.cp-checkmark-mark'),
-                Messages.creation_expire
-            ]),
             h('span.cp-creation-expire-picker.cp-creation-slider', [
                 h('input#cp-creation-expire-val', {
                     type: "number",
@@ -1940,14 +1916,7 @@ define([
         ]);
 
         var settings = h('div.cp-creation-remember', [
-            h('label.cp-checkmark', [
+            UI.createCheckbox('cp-creation-remember', Messages.creation_saveSettings, false),
-                h('input', {
-                    type: 'checkbox',
-                    id: 'cp-creation-remember'
-                }),
-                h('span.cp-checkmark-mark'),
-                Messages.creation_saveSettings
-            ]),
             createHelper('/settings/#creation', Messages.creation_settings),
             h('div.cp-creation-remember-help.cp-creation-slider', [
                 h('span.fa.fa-exclamation-circle.cp-creation-warning'),