From 37ac877c65f06a86746e3d5adc66748a998fc63b Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 21 Sep 2017 19:07:11 +0900 Subject: [PATCH] Reorganize dropdown.js Closes #11063 - Replace specific components with ones styled with data attirbutions Auditors: Test Plan: 1. Open about:styles 2. Click `dropdowns` 3. Make sure they are properly styled 4. Open about:autofill 5. Click `Add Address` 6. Make sure the country dropdown has 100% width --- .../brave/locales/en-US/styles.properties | 5 +- .../autofill/autofillAddressPanel.js | 9 ++- app/renderer/components/common/commonForm.js | 7 -- app/renderer/components/common/dropdown.js | 19 +---- app/renderer/components/main/braveryPanel.js | 33 +++++++-- .../preferences/payment/enabledContent.js | 7 +- js/about/styles.js | 73 ++++++++++++------- 7 files changed, 87 insertions(+), 66 deletions(-) diff --git a/app/extensions/brave/locales/en-US/styles.properties b/app/extensions/brave/locales/en-US/styles.properties index d2e0b4bccb9..80f1b158fe3 100644 --- a/app/extensions/brave/locales/en-US/styles.properties +++ b/app/extensions/brave/locales/en-US/styles.properties @@ -1,4 +1,7 @@ actionButton=Action Button +adsAllow=Allow Ads and Tracking +adsBlock=Block Ads +adsShowBrave=Show Brave Ads browserButton=Browser Button buttons=Buttons extensionItem=Extension Item @@ -20,4 +23,4 @@ styleGuide=Style Guide subtleButton=Subtle Button switches=Switches titles=Titles -typography=Typography \ No newline at end of file +typography=Typography diff --git a/app/renderer/components/autofill/autofillAddressPanel.js b/app/renderer/components/autofill/autofillAddressPanel.js index ec2b4c04fdf..bac1b2c69fc 100644 --- a/app/renderer/components/autofill/autofillAddressPanel.js +++ b/app/renderer/components/autofill/autofillAddressPanel.js @@ -14,7 +14,7 @@ const { CommonFormLarge, CommonFormSection, CommonFormTitle, - CommonFormFullWidthDropdown, + CommonFormDropdown, CommonFormButtonWrapper, commonFormStyles } = require('../common/commonForm') @@ -241,13 +241,14 @@ class AutofillAddressPanel extends React.Component { />
- {this.countryList} - +
- } -} - class CommonFormTextbox extends ImmutableComponent { render () { return @@ -240,7 +234,6 @@ module.exports = { CommonFormLarge, CommonFormBookmarkHanger, CommonFormDropdown, - CommonFormFullWidthDropdown, CommonFormTextbox, CommonFormClickable, CommonFormSection, diff --git a/app/renderer/components/common/dropdown.js b/app/renderer/components/common/dropdown.js index 9669b94f0a3..3de266ceecd 100644 --- a/app/renderer/components/common/dropdown.js +++ b/app/renderer/components/common/dropdown.js @@ -40,18 +40,6 @@ class SettingDropdown extends ImmutableComponent { } } -class PanelDropdown extends ImmutableComponent { - render () { - return - } -} - -class BraveryPanelDropdown extends ImmutableComponent { - render () { - return - } -} - const selectPadding = '0.4em' const styles = StyleSheet.create({ @@ -95,15 +83,12 @@ const styles = StyleSheet.create({ }, braveryPanel: { - fontSize: '13px', - width: '100%' + fontSize: '13px' } }) module.exports = { Dropdown, FormDropdown, - SettingDropdown, - PanelDropdown, - BraveryPanelDropdown + SettingDropdown } diff --git a/app/renderer/components/main/braveryPanel.js b/app/renderer/components/main/braveryPanel.js index 1b1b0087830..88ea731950e 100644 --- a/app/renderer/components/main/braveryPanel.js +++ b/app/renderer/components/main/braveryPanel.js @@ -11,7 +11,7 @@ const ReduxComponent = require('../reduxComponent') const Dialog = require('../common/dialog') const BrowserButton = require('../common/browserButton') const SwitchControl = require('../common/switchControl') -const {BraveryPanelDropdown} = require('../common/dropdown') +const {FormDropdown} = require('../common/dropdown') // Constants const config = require('../../../../js/constants/config') @@ -506,11 +506,18 @@ class BraveryPanel extends React.Component { !this.props.isCompactBraveryPanel && styles.braveryPanel__body__advanced__control__forms__dropdown, this.props.isCompactBraveryPanel && styles.braveryPanel_compact__body__advanced__control__forms__dropdown )}> - + +
- + +
- + disabled={!this.props.shieldsUp} + > +
- @@ -181,7 +182,7 @@ class EnabledContent extends ImmutableComponent { ) } - +
{ diff --git a/js/about/styles.js b/js/about/styles.js index 730ae9b5ffc..9ec4d94382f 100644 --- a/js/about/styles.js +++ b/js/about/styles.js @@ -15,9 +15,7 @@ const {TextArea, DefaultTextArea} = require('../../app/renderer/components/commo const { Dropdown, FormDropdown, - SettingDropdown, - PanelDropdown, - BraveryPanelDropdown + SettingDropdown } = require('../../app/renderer/components/common/dropdown') const BrowserButton = require('../../app/renderer/components/common/browserButton') @@ -191,6 +189,7 @@ class AboutStyle extends ImmutableComponent { 

             const { '{Dropdown}' } = require('../../app/renderer/components/common/dropdown'){'\n'}
+            {'\n'}
             <Dropdown>{'\n'}
               <option>Select Box</option>{'\n'}
               <option>Second Choice</option>{'\n'}
@@ -208,6 +207,7 @@ class AboutStyle extends ImmutableComponent {
           
           

             const { '{FormDropdown}' } = require('../../app/renderer/components/common/dropdown'){'\n'}
+            {'\n'}
             <FormDropdown>{'\n'}
               <option>Select Box</option>{'\n'}
               <option>Second Choice</option>{'\n'}
@@ -216,6 +216,42 @@ class AboutStyle extends ImmutableComponent {
           

         
 
+        
+          
Dropdown used on Brave Payments; has 180px width (same as Panel Item button below)

+          
+            
+            
+            
+          
+          

+            const { '{FormDropdown}' } = require('../../app/renderer/components/common/dropdown'){'\n'}
+            {'\n'}
+            <FormDropdown data-isPanel>{'\n'}
+              <option>5 USD</option>{'\n'}
+              <option>10 USD</option>{'\n'}
+              <option>15 USD</option>{'\n'}
+            </FormDropdown>
+          

+        
+
+        
+          
Dropdown used on Bravery Panel; has 100% width and 13px font size

+          
+            
+          

+            const { '{FormDropdown}' } = require('../../app/renderer/components/common/dropdown'){'\n'}
+            {'\n'}
+            <FormDropdown data-isFullWidth data-isBraveryPanel>{'\n'}
+              <option data-l10n-id='showBraveAds' data-test-id='showBraveAds' value='showBraveAds' />{'\n'}
+              <option data-l10n-id='blockAds' data-test-id='blockAdsOption' value='blockAds' />{'\n'}
+              <option data-l10n-id='allowAdsAndTracking' data-test-id='showAdsOption' value='allowAdsAndTracking' />{'\n'}
+            </FormDropdown>
+          

+        
+
         
           
Dropdown used mostly in Preferences; has a fixed width

           
@@ -225,6 +261,7 @@ class AboutStyle extends ImmutableComponent {
           
           

             const { '{SettingDropdown}' } = require('../../app/renderer/components/common/dropdown'){'\n'}
+            {'\n'}
             <SettingDropdown>{'\n'}
               <option>Select Box</option>{'\n'}
               <option>Second Choice</option>{'\n'}
@@ -234,36 +271,20 @@ class AboutStyle extends ImmutableComponent {
         
 
         
-          
Dropdown used on Brave Payments; has 180px width (same as Panel Item button below)

-          
-            
-            
-            
-          
-          

-            const { '{PanelDropdown}' } = require('../../app/renderer/components/common/dropdown'){'\n'}
-            <PanelDropdown>{'\n'}
-              <option>5 USD</option>{'\n'}
-              <option>10 USD</option>{'\n'}
-              <option>15 USD</option>{'\n'}
-            </PanelDropdown>
-          

-        
-
-        
-          
Dropdown used mostly on Bravery Panel; has 100% width and 13px font size

-          
+          
Dropdown used on CommonForm

+          
             
             
             
-          
+          
           

-            const { '{BraveryPanelDropdown}' } = require('../../app/renderer/components/common/dropdown'){'\n'}
-            <BraveryPanelDropdown>{'\n'}
+            const { '{CommonFormDropdown}' } = require('../../app/renderer/components/common/commonForm'){'\n'}
+            {'\n'}
+            <CommonFormDropdown>{'\n'}
               <option>Select Box</option>{'\n'}
               <option>Second Choice</option>{'\n'}
               <option>Third Choice</option>{'\n'}
-            </BraveryPanelDropdown>
+            </CommonFormDropdown>