fix(ZNTA-747) WIP: rtl css for suggestion panel

zanata · Oct 18, 2017 · 3ef7623 · 3ef7623
1 parent a4419b9
commit 3ef7623
Show file tree

Hide file tree

Showing 17 changed files with 346 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "babel-core": "stable"
+  }
+}
diff --git a/server/zanata-frontend/src/frontend/app/editor/components/EditorSearchInput/index.js b/server/zanata-frontend/src/frontend/app/editor/components/EditorSearchInput/index.js
@@ -207,7 +207,7 @@ export class EditorSearchInput extends Component {
             value={this.props.search.searchString}
             onChange={this.updateSearchText}
             onClick={this.state.open}
-            className="EditorInputGroup-input u-sizeLineHeight-1_1-4" />
+            className="EditorInputGroup-input u-sizeLineHeight-1_1-4 rtl" />
           {this.clearButtonElement()}
           <span className="EditorInputGroup-addon btn-xs btn-link"
             onClick={this.toggleAdvanced}>
@@ -244,7 +244,7 @@ class AdvancedField extends Component {
     const { id, field, value } = this.props
     const { label, description } = field
     return (
-      <div key={id} title={description} className="u-sPB-1-2">
+      <div key={id} title={description} className="u-sPB-1-2 rtl">
         <label className="u-textSecondary u-sPB-1-4">{label}</label>
         <input ref={id}
           type="text"

diff --git a/server/zanata-frontend/src/frontend/app/editor/components/GlossarySearchInput/index.js b/server/zanata-frontend/src/frontend/app/editor/components/GlossarySearchInput/index.js
@@ -97,7 +97,7 @@ class GlossarySearchInput extends React.Component {
             maxLength="100"
             value={this.props.text}
             onChange={this.props.onTextChange}
-            className="EditorInputGroup-input u-sizeLineHeight-1_1-4" />
+            className="EditorInputGroup-input rtl u-sizeLineHeight-1_1-4" />
         </div>
       </div>
     )

diff --git a/server/zanata-frontend/src/frontend/app/editor/components/GlossaryTerm/index.js b/server/zanata-frontend/src/frontend/app/editor/components/GlossaryTerm/index.js
@@ -61,7 +61,7 @@ class GlossaryTerm extends React.Component {
                 <span className="hide-mdplus u-textMeta">
                   Target
                 </span>
-                {term.target}
+                <span className="rtl">{term.target}</span>
               </span>
             </Button>
           </OverlayTrigger>

diff --git a/server/zanata-frontend/src/frontend/app/editor/components/GlossaryTermModal/component.js b/server/zanata-frontend/src/frontend/app/editor/components/GlossaryTermModal/component.js
@@ -77,13 +77,13 @@ class GlossaryTermModal extends React.Component {
           <Modal.Title><small><span className="u-pullLeft">
           Glossary details</span></small></Modal.Title>
         </Modal.Header>
-        <Modal.Body>
+        <Modal.Body className="rtl">
           <Panel className="split-panel">
-            <h3>Source Term [{sourceLocale}]:</h3>
+            <h3>Source Term : {sourceLocale}</h3>
             <span className="modal-term">{term.source}</span>
           </Panel>
           <Panel className="split-panel">
-            <h3>Target Term [{targetLocale}]:</h3>
+            <h3>Target Term : {targetLocale}</h3>
             <span className="modal-term">{term.target}</span>
           </Panel>
           <br />

diff --git a/server/zanata-frontend/src/frontend/app/editor/components/SplitDropdown/index.css b/server/zanata-frontend/src/frontend/app/editor/components/SplitDropdown/index.css
@@ -28,4 +28,17 @@ not conflict with the other frontend code
 .ButtonGroup--round .ButtonGroup-item:last-child .EditorButton {
   border-top-right-radius: 100px;
   border-bottom-right-radius: 100px;
+  padding-right: 1rem;
+}
+
+.ButtonGroup-item:first-child button {
+  padding-left: 1rem;
+}
+
+.ButtonGroup-item:last-child button {
+  padding-left: 1rem;
+}
+
+button.EditorButton.Button--small.u-rounded.Button--primary.u-sizeWidth-6 {
+  padding-left: 1.3rem;
 }
diff --git a/server/zanata-frontend/src/frontend/app/editor/components/SplitDropdown/index.js b/server/zanata-frontend/src/frontend/app/editor/components/SplitDropdown/index.js
@@ -49,7 +49,7 @@ class SplitDropdown extends React.Component {
     return (
       <div className={className}>
         <div className="ButtonGroup ButtonGroup--hz
-                        ButtonGroup--borderCollapse  ButtonGroup--round">
+                        ButtonGroup--borderCollapse  u-rounded">
           <div className="ButtonGroup-item">
             {this.props.actionButton}
           </div>

diff --git a/server/zanata-frontend/src/frontend/app/editor/components/SuggestionContents/index.js b/server/zanata-frontend/src/frontend/app/editor/components/SuggestionContents/index.js
@@ -59,7 +59,7 @@ class SuggestionContents extends React.Component {
   render () {
     const contents = this.props.contents.map((content, index) => {
       return (
-        <div key={index} className="TransUnit-item">
+        <div key={index} className="TransUnit-item rtl">
           <div className="TransUnit-itemHeader">
             {this.pluralFormLabel(index)}
           </div>

diff --git a/server/zanata-frontend/src/frontend/app/editor/components/TransUnitTranslationFooter.js b/server/zanata-frontend/src/frontend/app/editor/components/TransUnitTranslationFooter.js
@@ -179,7 +179,7 @@ class TransUnitTranslationFooter extends React.Component {
       saveAsMode && statusShortcutKeys[selectedButtonStatus]
     const actionButton = (
       <Button
-        className={cx('Button u-sizeHeight-1_1-4 u-textCapitalize',
+        className={cx('EditorButton u-sizeHeight-1_1-4 u-textCapitalize',
                       buttonClassByStatus[selectedButtonStatus])}
         disabled={isSaving || !translationHasChanged}
         title={selectedButtonTitle}
@@ -199,7 +199,7 @@ class TransUnitTranslationFooter extends React.Component {
 
     const dropdownToggleButton = otherStatuses.length > 0
       ? <Button
-        className={cx('Button Button--snug u-sizeHeight-1_1-4',
+        className={cx('EditorButton Button--snug u-sizeHeight-1_1-4',
                       'Dropdown-toggle',
                       buttonClassByStatus[selectedButtonStatus])}
         title="Save as…">

diff --git a/server/zanata-frontend/src/frontend/app/editor/components/TransUnitTranslationPanel.js b/server/zanata-frontend/src/frontend/app/editor/components/TransUnitTranslationPanel.js
@@ -248,7 +248,7 @@ class TranslationItem extends React.Component {
         {/* TODO translate "Enter a translation..." */}
         <Textarea
           ref={this.setTextArea}
-          className="TransUnit-text"
+          className="TransUnit-text rtl"
           disabled={dropdownIsOpen}
           rows={1}
           value={translation}

diff --git a/server/zanata-frontend/src/frontend/app/editor/containers/MainContent.js b/server/zanata-frontend/src/frontend/app/editor/containers/MainContent.js
@@ -55,7 +55,7 @@ class MainContent extends React.Component {
       <main role="main"
         id="editor-content"
         className={className}>
-        <div className="Editor-translationsWrapper rtl">
+        <div className="Editor-translationsWrapper">
           <ul className="Editor-translations">
             {transUnits}
           </ul>

diff --git a/server/zanata-frontend/src/frontend/app/editor/containers/NavHeader.js b/server/zanata-frontend/src/frontend/app/editor/containers/NavHeader.js
@@ -91,7 +91,7 @@ class NavHeader extends React.Component {
       <nav role="navigation"
         className="Editor-mainNav u-posRelative u-textCenter">
         <div className="u-posAbsoluteLeft">
-          <Row>
+          <Row className="rtl">
             <ProjectVersionLink {...ctx.projectVersion} />
             <div className="u-inlineBlock u-sMH-1-4 u-textInvert
                           u-textMuted u-sm-hidden">

diff --git a/...tend/src/frontend/app/editor/containers/SuggestionDetailsModal/PlainSuggestionContents.js b/...tend/src/frontend/app/editor/containers/SuggestionDetailsModal/PlainSuggestionContents.js
@@ -43,7 +43,7 @@ class PlainSuggestionContents extends Component {
         </div>
         {displayHeader && <span className="TransUnit-targetHeading">
         Translation</span>}
-        <div className="TransUnit-panel TransUnit-translation u-sPV-1-2">
+        <div className="TransUnit-panel TransUnit-translation rtl u-sPV-1-2">
           <SuggestionContents
             plural={sourceContents.length > 1}
             contents={targetContents} />

diff --git a/server/zanata-frontend/src/frontend/app/editor/containers/SuggestionsBody.js b/server/zanata-frontend/src/frontend/app/editor/containers/SuggestionsBody.js
@@ -90,7 +90,7 @@ class SuggestionsBody extends React.Component {
 
   render () {
     return (
-      <div className="Editor-suggestionsBody rtl u-bgHigh">
+      <div className="Editor-suggestionsBody u-bgHigh">
         {this.renderContent()}
       </div>
     )

diff --git a/server/zanata-frontend/src/frontend/app/editor/containers/TranslationInfoPanel/index.js b/server/zanata-frontend/src/frontend/app/editor/containers/TranslationInfoPanel/index.js
@@ -45,7 +45,7 @@ class TranslationInfoPanel extends React.Component {
     } = this.props.selectedPhrase
 
     return (
-      <ul className="SidebarEditor-details">
+      <ul className="SidebarEditor-details rtl">
         {this.detailItem('Resource ID', resId)}
         {this.detailItem('Message Context', msgctxt)}
         {this.detailItem('Reference', sourceReferences)}

diff --git a/server/zanata-frontend/src/frontend/webpack.config.js b/server/zanata-frontend/src/frontend/webpack.config.js
@@ -17,16 +17,12 @@ var postcssCustomMedia = require('postcss-custom-media')
 var postcssEsplit = require('postcss-esplit')
 var ReactIntlAggregatePlugin = require('react-intl-aggregate-webpack-plugin')
 var ReactIntlFlattenPlugin = require('react-intl-flatten-webpack-plugin')
-/* var rtlDetect = require('rtl-detect')
-var localeforrtl = require('./app/editor/config/intl').locale */
 
 /* Helper so we can use ternary with undefined to not specify a key */
 function dropUndef (obj) {
   return _(obj).omitBy(_.isNil).value()
 }
 
-/* var langDir = rtlDetect.getLangDir(localeforrtl) */
-
 var postCssLoader = {
   loader: 'postcss-loader',
   options: {