✨ fixed #12276

src/main/resources/lang_en_US.properties

@@ -16,12 +16,24 @@
 
 #
 # Description: Solo language configurations(en_US).
-# Version: 2.11.4.20, Apr 17, 2017
+# Version: 2.12.4.20, Apr 25, 2017
 # Author: Liang Ding
 # Author: Liyuan Li
 # Author: Dongxu Wang
 #
 
+addBoldLabel=Add bold text
+addItalicLabel=Add italic text
+insertQuoteLabel=Insert a quote
+addBulletedLabel=Add a bulleted list
+addNumberedListLabel=Add a numbered list
+addLinkLabel=Add a link
+undoLabel=Undo
+redoLabel=Redo
+fullscreenLabel=Fullscreen
+helpLabel=Help
+previewLabel=Preview
+uploadFilesLabel=Upload File
 howConfigLabel=How?
 duplicatedCategoryURILabel=Duplicated category URI!
 duplicatedCategoryLabel=Duplicated category!

src/main/resources/lang_zh_CN.properties

@@ -16,12 +16,24 @@
 
 #
 # Description: Solo default language configurations(zh_CN).
-# Version: 2.11.4.20, Apr 17, 2017
+# Version: 2.12.4.20, Apr 25, 2017
 # Author: Liang Ding
 # Author: Liyuan Li
 # Author: Dongxu Wang
 #
 
+addBoldLabel=\u6DFB\u52A0\u7C97\u4F53
+addItalicLabel=\u6DFB\u52A0\u659C\u4F53
+insertQuoteLabel=\u63D2\u5165\u5F15\u7528
+addBulletedLabel=\u6DFB\u52A0\u65E0\u5E8F\u5217\u8868
+addNumberedListLabel=\u6DFB\u52A0\u6709\u5E8F\u5217\u8868
+addLink1Label=\u6DFB\u52A0\u94FE\u63A5
+undoLabel=\u64A4\u9500
+redoLabel=\u6062\u590D
+helpLabel=\u5E2E\u52A9
+fullscreenLabel=\u5168\u5C4F
+previewLabel=\u9884\u89C8
+uploadFilesLabel=\u4E0A\u4F20\u6587\u4EF6
 howConfigLabel=\u5982\u4F55\u914D\u7F6E\uFF1F
 duplicatedCategoryURILabel=\u5206\u7C7B URI \u91CD\u590D\uFF01
 duplicatedCategoryLabel=\u5206\u7C7B\u91CD\u590D\uFF01

src/main/webapp/admin-label.ftl

@@ -123,7 +123,19 @@
         "visitorUserLabel": "${visitorUserLabel}",
         "categoryTooLongLabel": "${categoryTooLongLabel}",
         "descriptionLabel": "${descriptionLabel}",
-        "autoSaveLabel": "${autoSaveLabel}"
+        "autoSaveLabel": "${autoSaveLabel}",
+        "addBoldLabel": '${addBoldLabel}',
+        "addItalicLabel": '${addItalicLabel}',
+        "insertQuoteLabel": '${insertQuoteLabel}',
+        "addBulletedLabel": '${addBulletedLabel}',
+        "addNumberedListLabel": '${addNumberedListLabel}',
+        "addLinkLabel": '${addLinkLabel}',
+        "undoLabel": '${undoLabel}',
+        "redoLabel": '${redoLabel}',
+        "previewLabel": '${previewLabel}',
+        "helpLabel": '${helpLabel}',
+        "fullscreenLabel": '${fullscreenLabel}',
+        "uploadFilesLabel": '${uploadFilesLabel}'
     };    
     
     admin.init();

src/main/webapp/css/default-admin.css

@@ -17,7 +17,7 @@
 * admin style
 *
 * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
-* @version 2.1.7.4, Apr 8, 2017
+* @version 2.2.7.4, Apr 25, 2017
 */
 
 /* start resset */
@@ -163,6 +163,174 @@ a:hover {
     box-shadow: inset 0 -1px 0 #bbb; 
 }
 
+.tooltipped {
+    position: relative;
+    cursor: pointer;
+}
+
+.tooltipped::after {
+    position: absolute;
+    z-index: 1000000;
+    display: none;
+    padding: 5px 8px;
+    font-size: 11px;
+    font-weight: normal;
+    -webkit-font-smoothing: subpixel-antialiased;
+    color: #fff;
+    text-align: center;
+    text-decoration: none;
+    text-shadow: none;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: break-word;
+    white-space: pre;
+    pointer-events: none;
+    content: attr(aria-label);
+    background: rgba(0,0,0,0.8);
+    border-radius: 3px;
+    line-height: 16px;
+    opacity: 0
+}
+
+.tooltipped::before {
+    position: absolute;
+    z-index: 1000001;
+    display: none;
+    width: 0;
+    height: 0;
+    color: rgba(0,0,0,0.8);
+    pointer-events: none;
+    content: "";
+    border: 5px solid transparent;
+    opacity: 0
+}
+
+@-webkit-keyframes tooltip-appear {
+    from {
+        opacity: 0
+    }
+
+    to {
+        opacity: 1
+    }
+}
+
+@keyframes tooltip-appear {
+    from {
+        opacity: 0
+    }
+
+    to {
+        opacity: 1
+    }
+}
+
+.tooltipped-hover::before,
+.tooltipped-hover::after,
+.tooltipped:hover::before,
+.tooltipped:hover::after,
+.tooltipped:active::before,
+.tooltipped:active::after,
+.tooltipped:focus::before,
+.tooltipped:focus::after {
+    display: inline-block;
+    text-decoration: none;
+    -webkit-animation-name: tooltip-appear;
+    animation-name: tooltip-appear;
+    -webkit-animation-duration: 0.1s;
+    animation-duration: 0.1s;
+    -webkit-animation-fill-mode: forwards;
+    animation-fill-mode: forwards;
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+    -webkit-animation-delay: 0.4s;
+    animation-delay: 0.4s
+}
+
+.tooltipped-s::after,.tooltipped-se::after,.tooltipped-sw::after {
+    top: 100%;
+    right: 50%;
+    margin-top: 5px
+}
+
+.tooltipped-s::before,.tooltipped-se::before,.tooltipped-sw::before {
+    top: auto;
+    right: 50%;
+    bottom: -5px;
+    margin-right: -5px;
+    border-bottom-color: rgba(0,0,0,0.8)
+}
+
+.tooltipped-se::after {
+    right: auto;
+    left: 50%;
+    margin-left: -15px
+}
+
+.tooltipped-sw::after {
+    margin-right: -15px
+}
+
+.tooltipped-n::after,.tooltipped-ne::after,.tooltipped-nw::after {
+    right: 50%;
+    bottom: 100%;
+    margin-bottom: 5px
+}
+
+.tooltipped-n::before,.tooltipped-ne::before,.tooltipped-nw::before {
+    top: -5px;
+    right: 50%;
+    bottom: auto;
+    margin-right: -5px;
+    border-top-color: rgba(0,0,0,0.8)
+}
+
+.tooltipped-ne::after {
+    right: auto;
+    left: 50%;
+    margin-left: -15px
+}
+
+.tooltipped-nw::after {
+    margin-right: -15px
+}
+
+.tooltipped-s::after,.tooltipped-n::after {
+    -webkit-transform: translateX(50%);
+    transform: translateX(50%)
+}
+
+.tooltipped-w::after {
+    right: 100%;
+    bottom: 50%;
+    margin-right: 5px;
+    -webkit-transform: translateY(50%);
+    transform: translateY(50%);
+}
+
+.tooltipped-w::before {
+    top: 50%;
+    bottom: 50%;
+    left: -5px;
+    margin-top: -5px;
+    border-left-color: rgba(0,0,0,0.8);
+}
+
+.tooltipped-e::after {
+    bottom: 50%;
+    left: 100%;
+    margin-left: 5px;
+    -webkit-transform: translateY(50%);
+    transform: translateY(50%)
+}
+
+.tooltipped-e::before {
+    top: 50%;
+    right: -5px;
+    bottom: 50%;
+    margin-top: -5px;
+    border-right-color: rgba(0,0,0,0.8)
+}
 
 button,
 .completed-ck span {

src/main/webapp/js/admin/editorCodeMirror.js

@@ -18,7 +18,7 @@
  *
  * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
  * @author <a href="http://88250.b3log.org">Liang Ding</a>
- * @version 1.4.1.4, Jan 21, 2017
+ * @version 1.4.2.4, Apr 25, 2017
  */
 
 Util.processClipBoard = function (text, cm) {
@@ -224,17 +224,13 @@ admin.editors.CodeMirror = {
             toolbar: [
                 {name: 'bold'},
                 {name: 'italic'},
-                '|',
                 {name: 'quote'},
+                {name: 'link'},
                 {name: 'unordered-list'},
                 {name: 'ordered-list'},
-                '|',
-                {name: 'link'},
-                {name: 'image', html: '<form id="' + conf.id + 'fileUpload" method="POST" enctype="multipart/form-data"><label class="icon-upload"><input type="file"/></label></form>'},
-                '|',
+                {name: 'image', html: '<span style="display: inline-block;top:1px" class="tooltipped tooltipped-n" aria-label="' + Label.uploadFilesLabel + '" ><form id="' + conf.id + 'fileUpload" method="POST" enctype="multipart/form-data"><label class="icon-upload"><input type="file"/></label></form></span>'},
                 {name: 'redo'},
                 {name: 'undo'},
-                '|',
                 {name: 'preview'},
                 {name: 'fullscreen'}],
             extraKeys: {

src/main/webapp/js/lib/CodeMirrorEditor/codemirror.css

@@ -516,32 +516,26 @@ span.CodeMirror-selectedtext { background: none; }
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset;
     border-bottom-width: 0;
     border-radius: 3px 3px 0 0;
+    height: 34px;
 }
 .editor-toolbar a,
 .editor-toolbar label {
-    display: inline-block;
-    text-align: center;
-    text-decoration: none !important;
+    text-decoration: none!important;
     font-size: 16px;
     color: #666;
-    width: 23px;
-    height: 23px;
-    margin: 2px;
-    border: 1px solid transparent;
-    border-radius: 3px;
+    padding: 5px 10px;
     cursor: pointer;
+    line-height: 24px;
+    display: inline-block;
+    top: -1px;
 }
-.editor-toolbar a:hover, .editor-toolbar a.active,
+.editor-toolbar a:hover,
+.editor-toolbar a.active,
+.editor-toolbar a.focus,
 .editor-toolbar label:hover,
 .editor-toolbar label.active {
-    background: #fcfcfc;
-    border-color: #95a5a6;
-    color: #777;
-}
-
-.editor-toolbar a.active {
-    color: #911;
-    border-color: #911;
+    background: #666;
+    color: #fff;
 }
 
 .editor-toolbar a:before,
@@ -550,19 +544,19 @@ span.CodeMirror-selectedtext { background: none; }
 }
 
 .editor-toolbar label.icon-upload {
-    padding: 0 1px;
-    height: 23px;
-    width: 21px;
-    vertical-align: bottom;
-    float: none;
+    margin: 0;
+    position: relative;
 }
-
 .editor-toolbar input {
     height: 1px;
-    margin-top: 8px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    opacity: 0.001;
 }
 .editor-toolbar form {
-    display: inline;
+    overflow: hidden;
+    display: initial;
 }
 .editor-toolbar i.separator {
     display: inline-block;

src/main/webapp/js/lib/CodeMirrorEditor/editor.js

@@ -1042,24 +1042,35 @@
     /**
      * Create icon element for toolbar.
      */
-    function createIcon(name, options) {
-        options = options || {};
-        if (name === 'image') {
+    function createIcon(options) {
+        if (options.name === 'image') {
             return $(options.html)[0];
         }
+        var ariaLabels = {
+            bold: Label.addBoldLabel + ' <ctrl+b>',
+            italic: Label.addItalicLabel + ' <ctrl+i>',
+            quote: Label.insertQuoteLabel + ' <ctrl+e>',
+            'unordered-list': Label.addBulletedLabel + ' <ctrl+l>',
+            'ordered-list': Label.addNumberedListLabel + ' <shift+ctrl+l>',
+            'link': Label.addLinkLabel + ' <ctrl+k>',
+            redo: Label.redoLabel + ' <shift+ctrl+z>',
+            undo: Label.undoLabel + ' <ctrl+z>',
+            preview: Label.previewLabel + ' <ctrl+d>',
+            question: Label.helpLabel,
+            fullscreen: Label.fullscreenLabel + ' <shift+ctrl+a>'
+        }
+
+
         var el = document.createElement('a');
 
-        var shortcut = options.shortcut || shortcuts[name];
-        if (shortcut) {
-            shortcut = fixShortcut(shortcut);
-            el.title = shortcut;
-            el.title = el.title.replace('Cmd', '⌘');
-            if (isMac) {
-                el.title = el.title.replace('Alt', '⌥');
-            }
+        var label = ariaLabels[options.name]
+        if (isMac) {
+            label = label.replace('cmd', '⌘').replace('shift', '⇧');
         }
 
-        el.className = options.className || 'icon-' + name;
+        el.className = 'tooltipped tooltipped-n';
+        el.setAttribute('aria-label', label)
+        el.innerHTML = "<span class='icon-" + options.name + "'></span>"
         return el;
     }
 
@@ -1111,8 +1122,8 @@
         var cm = editor.codemirror,
         wrap = editor.codemirror.getWrapperElement();
         
-        if ('icon-fullscreen' === editor.toolbar.fullscreen.className) {
-            editor.toolbar.fullscreen.className = 'icon-contract';
+        if ('icon-fullscreen' === editor.toolbar.fullscreen.children[0].className) {
+            editor.toolbar.fullscreen.children[0].className = 'icon-contract';
             editor.toolbar.preview.style.display = 'none';
             if (editor.toolbar.preview.className.indexOf('active') > -1) {
                 editor.toolbar.preview.click();
@@ -1150,7 +1161,7 @@
             return false;
         }
 
-        editor.toolbar.fullscreen.className = 'icon-fullscreen';
+        editor.toolbar.fullscreen.children[0].className = 'icon-fullscreen';
         editor.toolbar.preview.style.display = 'inline';
         $(editor.element.parentElement).css({
             'position': 'inherit'
@@ -1543,9 +1554,7 @@
         for (var i = 0; i < items.length; i++) {
             (function (item) {
                 var el;
-                if (item.name) {
-                    el = createIcon(item.name, item);
-                } else if (item === '|') {
+                if (item === '|') {
                     el = createSep();
                 } else {
                     el = createIcon(item);