fix: mobile play mode icon align style

lijinke666 · Aug 30, 2020 · 5e1a819 · 5e1a819
1 parent 58b3ad0
commit 5e1a819
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 5 deletions.
diff --git a/__tests__/tests/__snapshots__/icon.test.js.snap b/__tests__/tests/__snapshots__/icon.test.js.snap
@@ -593,7 +593,11 @@ exports[`Player custom icon test should render custom icon in mobile mode 1`] =
           <span
             class="audio-lists-panel-header-close-btn"
             title="Close"
-          />
+          >
+            <div>
+              1
+            </div>
+          </span>
         </span>
       </h2>
     </div>

diff --git a/src/components/AudioListsPanel.js b/src/components/AudioListsPanel.js
@@ -48,7 +48,7 @@ const AudioListsPanel = ({
             title={locale.closeText}
             onClick={onCancel}
           >
-            {isMobile ? icon.packUp : icon.close}
+            {isMobile ? icon.packUpPanelMobile : icon.close}
           </span>
         </span>
       </h2>

diff --git a/src/components/PlayModeTip.js b/src/components/PlayModeTip.js
@@ -1,5 +1,5 @@
-import React, { memo } from 'react'
 import cls from 'classnames'
+import React, { memo } from 'react'
 
 const PlayModeTip = ({ prefix, visible, title, text }) => (
   <div className={cls(`${prefix}-play-model-tip`, { show: visible })}>

diff --git a/src/components/PlayModel.js b/src/components/PlayModel.js
@@ -1,5 +1,5 @@
-import React, { memo } from 'react'
 import cls from 'classnames'
+import React, { memo } from 'react'
 
 const PlayModel = ({ visible, value }) => (
   <div

diff --git a/src/components/PlayerMobile.js b/src/components/PlayerMobile.js
@@ -1,5 +1,5 @@
-import React, { isValidElement, memo } from 'react'
 import cls from 'classnames'
+import React, { isValidElement, memo } from 'react'
 import PlayModeTip from './PlayModeTip'
 
 const prefix = 'react-jinke-music-player-mobile'

diff --git a/src/styles/audioListsPanel.less b/src/styles/audioListsPanel.less
@@ -91,6 +91,9 @@
       font-weight: 500;
       transition: color @common-animate-time;
     }
+    &-num {
+      margin-left: 10px;
+    }
     &-actions {
       display: flex;
       flex-grow: 1;

diff --git a/src/styles/playerMobile.less b/src/styles/playerMobile.less
@@ -41,6 +41,8 @@
     box-shadow: 0 2px @mobile-padding rgba(0, 0, 0, 0.1);
     transform: translate3d(0, -105%, 0);
     transition: transform @common-animate-time;
+    display: flex;
+    align-items: center;
 
     &-title {
       margin-right: 12px;
@@ -52,6 +54,9 @@
           color: #fff !important;
         }
       }
+      .loop-btn {
+        display: flex;
+      }
     }
     &-text {
       font-size: 14px;