Invert stripe position

getredash · Nov 6, 2019 · c21ecdf · c21ecdf
1 parent 6c925a5
commit c21ecdf
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/client/app/assets/less/ant.less b/client/app/assets/less/ant.less
@@ -374,4 +374,16 @@
     line-height: 20px;
     margin-top: 9px;
   }
+}
+
+.@{menu-prefix-cls} {
+  // invert stripe position with class .invert-stripe-position
+  &-inline.invert-stripe-position {
+    .@{menu-prefix-cls}-item {
+      &::after {
+        right: auto;
+        left: 0;
+      }
+    }
+  }
 }
diff --git a/client/app/components/TagsList.jsx b/client/app/components/TagsList.jsx
@@ -63,7 +63,7 @@ export class TagsList extends React.Component {
     if (allTags.length > 0) {
       return (
         <div className="m-t-10 tags-list tiled">
-          <Menu mode="inline" selectedKeys={[...selectedTags]}>
+          <Menu className="invert-stripe-position" mode="inline" selectedKeys={[...selectedTags]}>
             {map(allTags, tag => (
               <Menu.Item key={tag.name} className="m-0">
                 <a className="d-flex align-items-center justify-content-between" onClick={event => this.toggleTag(event, tag.name)}>

diff --git a/client/app/components/items-list/components/Sidebar.jsx b/client/app/components/items-list/components/Sidebar.jsx
@@ -51,7 +51,7 @@ export function Menu({ items, selected }) {
   }
   return (
     <div className="m-b-10 tags-list tiled">
-      <AntdMenu mode="inline" selectable={false} selectedKeys={[selected]}>
+      <AntdMenu className="invert-stripe-position" mode="inline" selectable={false} selectedKeys={[selected]}>
         {map(items, item => (
           <AntdMenu.Item key={item.key} className="m-0">
             <a href={item.href}>