Imported from brave-ui: tweak and add disabled state for shields comp…

…onents
brave · Nov 2, 2018 · 0283a7a · 0283a7a
1 parent e12484c
commit 0283a7a
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 16 deletions.
diff --git a/src/features/shields/button/index.ts b/src/features/shields/button/index.ts
@@ -14,14 +14,15 @@ export const EmptyButton = styled<{}, 'button'>('button')`
   cursor: pointer;
 
   &:disabled {
-    opacity: 0.15;
+    opacity: 0.3;
     pointer-events: none;
   }
 `
 
 export const CloseButton = styled<{}, 'button'>('button')`
   box-sizing: border-box;
   background: transparent;
+  display: flex;
   border: 0;
   padding: 0;
   margin: 0;

diff --git a/src/features/shields/container/index.ts b/src/features/shields/container/index.ts
@@ -41,6 +41,7 @@ export const ResourcesGrid = styled(Grid)`
   height: 100%;
   grid-template-columns: 1fr;
   grid-template-rows: auto auto 1fr;
+  cursor: initial;
 `
 
 // Header
@@ -67,6 +68,10 @@ export const ResourcesSiteInfoFlex = styled(Flex)`
 export const ResourcesSiteInfoGrid = styled(Grid)`
   grid-template-columns: auto 1fr;
   grid-gap: 5px;
+
+  > * {
+    line-height: 1;
+  }
 `
 
 export const EnabledTextGrid = styled(Grid)`
@@ -128,6 +133,7 @@ export const MainFooterLinkFlex = styled(Flex.withComponent('a'))`
   font-size: 13px;
   font-weight: 600;
   text-decoration: none;
+  line-height: 1;
 
   &:hover {
     color: ${palette.white};
@@ -168,13 +174,14 @@ export const StatFlex = styled(Flex)`
   width: 100%;
   height: 100%;
   font-family: ${p => p.theme.fontFamily.heading};
-  color: ${palette.grey200};
+  color: ${p => p.disabled ? palette.grey500 : palette.grey200};
+  pointer-events: ${p => p.disabled ? 'none' : null};
   font-size: 14px;
   font-weight: 600;
   line-height: 1;
   user-select: none;
   padding: 13px 0;
-`
+  `
 
 export const ToggleGrid = styled(Grid)`
   grid-template-columns: 48px 28px 1fr auto;
@@ -210,7 +217,6 @@ interface SelectGridProps {
 
 export const SelectGrid = styled(ToggleGrid as ComponentType<SelectGridProps>)`
   padding: 0;
-  cursor: pointer;
 
   > *:nth-child(2) {
     height: 46px;

diff --git a/src/features/shields/display/index.ts b/src/features/shields/display/index.ts
@@ -46,7 +46,12 @@ export const DismissOverlay = styled<{}, 'div'>('div')`
   z-index: 1;
 `
 
-export const ClickableEmptySpace = styled<{}, 'div'>('div')`
+interface ClickableEmptySpaceProps {
+  disabled?: boolean
+}
+
+export const ClickableEmptySpace = styled<ClickableEmptySpaceProps, 'div'>('div')`
   width: 25px;
   height: 100%;
+  pointer-events: ${p => p.disabled ? 'none' : null};
 `
diff --git a/src/features/shields/text/index.ts b/src/features/shields/text/index.ts
@@ -97,11 +97,16 @@ export const ResourcesListItem = styled<{}, 'span'>('span')`
   line-height: 1.5;
 `
 
-export const ResourcesSwitchLabel = styled<{}, 'span'>('span')`
+interface ResourcesSwitchLabelProps {
+  disabled?: boolean
+}
+
+export const ResourcesSwitchLabel = styled<ResourcesSwitchLabelProps, 'span'>('span')`
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
   padding: 0 11px;
   user-select: none;
+  pointer-events: ${p => p.disabled ? 'none' : null};
 `
 
 export const ResourcesStatusTitle = styled<{}, 'span'>('span')`

diff --git a/stories/features/shields/components/interfaceControls.tsx b/stories/features/shields/components/interfaceControls.tsx
@@ -108,17 +108,17 @@ export default class InterfaceControls extends React.PureComponent<Props, State>
       <>
         {/* ads toggle */}
           <ToggleGrid>
-            <EmptyButton disabled={true} onClick={this.onToggleTotalAdsTrackersBlocked}><ShowMoreIcon /></EmptyButton>
+            <EmptyButton onClick={this.onToggleTotalAdsTrackersBlocked}><ShowMoreIcon /></EmptyButton>
             <StatFlex onClick={this.onToggleTotalAdsTrackersBlocked}>{data.totalAdsTrackersBlocked}</StatFlex>
             <ResourcesSwitchLabel onClick={this.onToggleTotalAdsTrackersBlocked}>{locale.blockAds}</ResourcesSwitchLabel>
             <ToggleFlex><Toggle id='blockAds' checked={blockAds} onChange={this.onChangeBlockAds} /></ToggleFlex>
           </ToggleGrid>
           {openTotalAdsTrackersBlockedList ? totalAdsTrackersBlockedList(favicon, sitename, this.onToggleTotalAdsTrackersBlocked) : null}
         {/* connections encrypted toggle */}
         <ToggleGrid>
-          <EmptyButton onClick={this.onToggleConnectionsEncrypted}><ShowMoreIcon /></EmptyButton>
-          <StatFlex onClick={this.onToggleConnectionsEncrypted}>{data.connectionsEncrypted}</StatFlex>
-          <ResourcesSwitchLabel onClick={this.onToggleConnectionsEncrypted}>{locale.connectionsEncrypted}</ResourcesSwitchLabel>
+          <EmptyButton disabled={true} onClick={this.onToggleConnectionsEncrypted}><ShowMoreIcon /></EmptyButton>
+          <StatFlex disabled={true} onClick={this.onToggleConnectionsEncrypted}>0</StatFlex>
+          <ResourcesSwitchLabel disabled={true} onClick={this.onToggleConnectionsEncrypted}>{locale.connectionsEncrypted}</ResourcesSwitchLabel>
           <ToggleFlex><Toggle id='connectionsEncrypted' checked={connectionsEncrypted} onChange={this.onChangeConnectionsEncrypted} /></ToggleFlex>
         </ToggleGrid>
         {openConnectionsEncryptedList ? connectionsEncryptedList(favicon, sitename, this.onToggleConnectionsEncrypted) : null}

diff --git a/stories/features/shields/components/privacyControls.tsx b/stories/features/shields/components/privacyControls.tsx
@@ -103,8 +103,8 @@ export default class PrivacyControls extends React.PureComponent<Props, State> {
       <>
         {/* cookies select */}
         <SelectGrid hasUserInteraction={false}>
-          <EmptyButton />
-          <StatFlex />
+          <EmptyButton disabled={true} />
+          <StatFlex disabled={true} />
           <SelectBox onChange={this.onChangeBlockCookies}>
             <option value='block_third_party'>{locale.block3partyCookies}</option>
             <option value='block'>{locale.blockAllCookies}</option>
@@ -125,15 +125,15 @@ export default class PrivacyControls extends React.PureComponent<Props, State> {
           {openScriptsBlockedList ? scriptsBlockedList(favicon, sitename, this.onToggleScriptsBlocked) : null}
         </SelectGrid>
         {/* fingerprinting select */}
-        <SelectGrid hasUserInteraction={true}>
-          <EmptyButton onClick={this.onToggleDeviceRecognition}><ShowMoreIcon /></EmptyButton>
-          <StatFlex onClick={this.onToggleDeviceRecognition}>{data.thirdPartyDeviceRecognitionBlocked}</StatFlex>
+        <SelectGrid hasUserInteraction={false}>
+          <EmptyButton disabled={true} onClick={this.onToggleDeviceRecognition}><ShowMoreIcon /></EmptyButton>
+          <StatFlex disabled={true} onClick={this.onToggleDeviceRecognition}>0</StatFlex>
           <SelectBox onChange={this.onChangeBlockDeviceRecognition}>
             <option value='block_third_party'>{locale.block3partyFingerprinting}</option>
             <option value='block'>{locale.blockAllFingerprinting}</option>
             <option value='allow'>{locale.allowAllFingerprinting}</option>
           </SelectBox>
-          <ClickableEmptySpace onClick={this.onToggleDeviceRecognition} />
+          <ClickableEmptySpace disabled={true} onClick={this.onToggleDeviceRecognition} />
           {openDeviceRecognitionList ? deviceRecognitionList(favicon, sitename, this.onToggleDeviceRecognition) : null}
         </SelectGrid>
       </>