Enso RTL support V3 (#212)

* ✨ RTL V3

* ♻️ clean rtl

	- remove vue-styled-component
	- update bulma-rtl patch-file

* add rtl themes to themes.php

* remove isRTL preference

Author: YacoubBelaoura

config/enso/themes.php

@@ -3,4 +3,6 @@
 return [
     'light' => '/themes/light/bulma.min.css',
     'dark' => '/themes/dark/bulma.min.css',
+    'light-rtl' => '/themes-rtl/light/bulma.min.css',
+    'dark-rtl' => '/themes-rtl/dark/bulma.min.css',
 ];

package.json

@@ -59,6 +59,7 @@
         "animate.css": "^3.6.1",
         "axios": "^0.18",
         "bulma": "^0.7.2",
+        "bulma-rtl": "^0.7.1",
         "opencollective": "^1.0.3",
         "opencollective-postinstall": "^2.0.0",
         "patch-package": "^6.0.2",
@@ -75,4 +76,4 @@
         "type": "opencollective",
         "url": "https://opencollective.com/Enso"
     }
-}
+}

patches/bulma-rtl+0.7.1.patch

@@ -0,0 +1,130 @@
+diff --git a/node_modules/bulma-rtl/sass/base/helpers.sass b/node_modules/bulma-rtl/sass/base/helpers.sass
+index 32cafa4..4d9a938 100644
+--- a/node_modules/bulma-rtl/sass/base/helpers.sass
++++ b/node_modules/bulma-rtl/sass/base/helpers.sass
+@@ -4,10 +4,10 @@
+   +clearfix
+
+ .is-pulled-left
+-  float: left !important
++  float: right !important
+
+ .is-pulled-right
+-  float: right !important
++  float: left !important
+
+ // Overflow
+
+@@ -47,7 +47,7 @@
+ +fullhd
+   +typography-size('fullhd')
+
+-$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right')
++$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'right', 'right': 'left')
+
+ @each $alignment, $text-align in $alignments
+   .has-text-#{$alignment}
+diff --git a/node_modules/bulma-rtl/sass/components/level.sass b/node_modules/bulma-rtl/sass/components/level.sass
+index 7872a05..ff29d74 100644
+--- a/node_modules/bulma-rtl/sass/components/level.sass
++++ b/node_modules/bulma-rtl/sass/components/level.sass
+@@ -2,8 +2,6 @@
+   +block
+   align-items: center
+   justify-content: space-between
+-  @if ($right == 'left')
+-    flex-direction: row-reverse
+   code
+     border-radius: $radius
+   img
+diff --git a/node_modules/bulma-rtl/sass/components/navbar.sass b/node_modules/bulma-rtl/sass/components/navbar.sass
+index cb477f0..2093791 100644
+--- a/node_modules/bulma-rtl/sass/components/navbar.sass
++++ b/node_modules/bulma-rtl/sass/components/navbar.sass
+@@ -368,10 +368,10 @@ a.navbar-item,
+       transform: translateY(-5px)
+       transition-duration: $speed
+       transition-property: opacity, transform
+-    &.is-right
++    &.is-left
+       left: auto
+       right: 0
+-    &.is-left
++    &.is-right
+       right: auto
+       left: 0
+   .navbar-divider
+diff --git a/node_modules/bulma-rtl/sass/elements/tag.sass b/node_modules/bulma-rtl/sass/elements/tag.sass
+index b07363c..74d8043 100644
+--- a/node_modules/bulma-rtl/sass/elements/tag.sass
++++ b/node_modules/bulma-rtl/sass/elements/tag.sass
+@@ -18,32 +18,33 @@ $tag-delete-margin: 1px !default
+     margin-bottom: 1rem
+   &.has-addons
+     .tag
+-      margin-right: 0
++      margin-#{$right}: 0
+       &:not(:first-child)
+-        border-bottom-left-radius: 0
+-        border-top-left-radius: 0
++        margin-#{$left}: 0
++        border-bottom-#{$left}-radius: 0
++        border-top-#{$left}-radius: 0
+       &:not(:last-child)
+-        border-bottom-right-radius: 0
+-        border-top-right-radius: 0
++        border-bottom-#{$right}-radius: 0
++        border-top-#{$right}-radius: 0
+   &.is-centered
+     justify-content: center
+     .tag
+-      margin-right: 0.25rem
+-      margin-left: 0.25rem
++      margin-#{$right}: 0.25rem
++      margin-#{$left}: 0.25rem
+   &.is-right
+     justify-content: flex-end
+     .tag
+       &:not(:first-child)
+-        margin-left: 0.5rem
++        margin-#{$left}: 0.5rem
+       &:not(:last-child)
+-        margin-right: 0
++        margin-#{$right}: 0
+   &.is-left
+     justify-content: flex-start
+     .tag
+       &:not(:first-child)
+-        margin-left: 0
++        margin-#{$left}: 0
+       &:not(:last-child)
+-        margin-right: 0.5rem
++        margin-#{$right}: 0.5rem
+
+ .tag:not(body)
+   align-items: center
+@@ -75,17 +76,17 @@ $tag-delete-margin: 1px !default
+     font-size: $size-medium
+   .icon
+     &:first-child:not(:last-child)
+-      margin-left: -0.375em
+-      margin-right: 0.1875em
++      margin-#{$left}: -0.375em
++      margin-#{$right}: 0.1875em
+     &:last-child:not(:first-child)
+-      margin-left: 0.1875em
+-      margin-right: -0.375em
++      margin-#{$left}: 0.1875em
++      margin-#{$right}: -0.375em
+     &:first-child:last-child
+-      margin-left: -0.375em
+-      margin-right: -0.375em
++      margin-#{$left}: -0.375em
++      margin-#{$right}: -0.375em
+   // Modifiers
+   &.is-delete
+-    margin-left: $tag-delete-margin
++    margin-#{$left}: $tag-delete-margin
+     padding: 0
+     position: relative
+     width: 2em

resources/preferences.json

@@ -8,4 +8,4 @@
         "toastrPosition": "bottom-right"
     },
     "local": {}
-}
+}

webpack.mix.js

@@ -34,6 +34,8 @@ mix
     .sass('resources/sass/enso.scss', 'public/css')
     .sass('node_modules/@enso-ui/themes/bulma/light.scss', 'public/themes/light/bulma.min.css')
     .sass('node_modules/@enso-ui/themes/bulma/dark.scss', 'public/themes/dark/bulma.min.css')
+    .sass('node_modules/@enso-ui/themes/bulma/light-rtl.scss', 'public/themes-rtl/light/bulma.min.css')
+    .sass('node_modules/@enso-ui/themes/bulma/dark-rtl.scss', 'public/themes-rtl/dark/bulma.min.css')
     .js('resources/js/enso.js', 'public/js')
     .extract([
         '@enso-ui/accessories/bulma', '@enso-ui/bulma', '@enso-ui/card/bulma',