🎨 #12724

src/main/webapp/admin/admin-index.ftl

@@ -97,7 +97,7 @@
                                 </div>
                             </li>
                             <li>
-                                <div id="tabs_preference">
+                                <div id="tabs_theme-list">
                                     <a href="#tools/theme-list">${skinLabel}</a>
                                 </div>
                             </li>

src/main/webapp/admin/admin-theme-list.ftl

@@ -17,19 +17,11 @@
     along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 -->
-<table class="form" width="100%" cellpadding="0" cellspacing="0">
-    <tbody>
-    <tr>
-        <td>
-            <a href="https://github.com/b3log/solo/issues/12449" target="_blank">新皮肤推荐</a> •
-            <a href="https://hacpai.com/article/1493814851007" target="_blank">皮肤开发指南</a>
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <div id="skinMain"></div>
-        </td>
-    </tr>
-    </tbody>
-</table>
+<div class="module-panel">
+    <div class="module-header">
+        <a href="https://github.com/b3log/solo/issues/12449" target="_blank">新皮肤推荐</a> •
+        <a href="https://hacpai.com/article/1493814851007" target="_blank">皮肤开发指南</a>
+    </div>
+    <div class="module-body padding12"><div id="skinMain"></div></div>
+</div>
 ${plugins}

src/main/webapp/js/admin/preference.js

@@ -79,36 +79,6 @@ admin.preference = {
 
         admin.preference.locale = preference.localeString
 
-        // skin
-        $('#skinMain').data('skinDirName', preference.skinDirName)
-        var skins = eval('(' + preference.skins + ')')
-        var skinsHTML = ''
-        for (var i = 0; i < skins.length; i++) {
-          var selectedClass = ''
-          if (skins[i].skinName === preference.skinName
-            && skins[i].skinDirName === preference.skinDirName) {
-            selectedClass += ' selected'
-          }
-          skinsHTML += '<div class="fn__left skinItem' + selectedClass +
-            '"><div class="ft__center">' +
-            skins[i].skinName
-            + '</div><img class="skinPreview" src="'
-            + Label.staticServePath + '/skins/' + skins[i].skinDirName
-            + '/preview.png"/><div><button class="update small" data-name="' +
-            skins[i].skinDirName + '">' + Label.enableLabel +
-            '</button><button class="small" onclick="window.open(\'' + Label.servePath +
-            '?skin=' + skins[i].skinName + '\')">'
-            + Label.previewLabel + '</button></div></div>'
-        }
-        $('#skinMain').append(skinsHTML + '<div class=\'fn__clear\'></div>')
-
-        $('.skinItem .update').click(function () {
-          $('.skinItem').removeClass('selected')
-          $(this).closest('.skinItem').addClass('selected')
-          $('#skinMain').data('skinDirName', $(this).data('name'))
-          admin.preference.update()
-        })
-
         // sign
         var signs = eval('(' + preference.signs + ')')
         for (var j = 1; j < signs.length; j++) {
@@ -233,7 +203,6 @@ admin.preference = {
         'articleListDisplayCount': $('#articleListDisplayCount').val(),
         'articleListPaginationWindowSize': $(
           '#articleListPaginationWindowSize').val(),
-        'skinDirName': $('#skinMain').data('skinDirName'),
         'localeString': $('#localeString').val(),
         'timeZoneId': $('#timeZoneId').val(),
         'noticeBoard': $('#noticeBoard').val(),

src/main/webapp/js/admin/themeList.js

@@ -58,7 +58,8 @@ admin.themeList = {
             + Label.staticServePath + '/skins/' + skins[i].skinDirName
             + '/preview.png"/><div><button class="update small" data-name="' +
             skins[i].skinDirName + '">' + Label.enableLabel +
-            '</button><button class="small" onclick="window.open(\'' + Label.servePath +
+            '</button><button class="small" onclick="window.open(\'' +
+            Label.servePath +
             '?skin=' + skins[i].skinName + '\')">'
             + Label.previewLabel + '</button></div></div>'
         }
@@ -86,7 +87,6 @@ admin.themeList = {
     $('#tipMsg').text('')
     $('#loadMsg').text(Label.loadingLabel)
 
-
     var requestJSONObject = {
       'preference': {
         'skinDirName': $('#skinMain').data('skinDirName'),
@@ -121,5 +121,7 @@ admin.themeList = {
 admin.register['theme-list'] = {
   'obj': admin.themeList,
   'init': admin.themeList.init,
-  'refresh': admin.themeList.init,
+  'refresh': function () {
+    $('#loadMsg').text('')
+  },
 }

src/main/webapp/scss/admin.scss

@@ -569,7 +569,7 @@ button#submitArticle:hover {
 .skinItem {
     background-color: #FAFAFA;
     border-radius: 3px;
-    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
     font-size: 16px;
     line-height: 24px;
     margin: 10px;