feat(xo-web/backup-ng/new): make the smart mode's toggle more visible (…

…#3255) See #2711
vatesfr · Aug 6, 2018 · 38e1c08 · 38e1c08
1 parent ae71ac3
commit 38e1c08
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,8 @@
 
 ### Enhancements
 
+- [Backup NG form] Make the smart mode's toggle more visible [#2711](https://github.com/vatesfr/xen-orchestra/issues/2711) (PR [#3255](https://github.com/vatesfr/xen-orchestra/pull/3255))
+
 ### Bug fixes
 
 ### Released packages

diff --git a/packages/xo-web/src/xo-app/backup-ng/new/index.js b/packages/xo-web/src/xo-app/backup-ng/new/index.js
@@ -18,7 +18,7 @@ import { Card, CardBlock, CardHeader } from 'card'
 import { constructSmartPattern, destructSmartPattern } from 'smart-backup'
 import { Container, Col, Row } from 'grid'
 import { injectState, provideState } from '@julien-f/freactal'
-import { Number, Toggle } from 'form'
+import { Number } from 'form'
 import { SelectRemote, SelectSr, SelectVm } from 'select-objects'
 import {
   cloneDeep,
@@ -318,10 +318,6 @@ export default [
           },
         },
       }),
-      toggleSmartMode: (_, smartMode) => state => ({
-        ...state,
-        smartMode,
-      }),
       setName: (_, { target: { value } }) => state => ({
         ...state,
         name: value,
@@ -597,14 +593,16 @@ export default [
               <Card>
                 <CardHeader>
                   {_('backupName')}*
-                  <Tooltip content={_('smartBackupModeTitle')}>
-                    <Toggle
-                      className='pull-right'
-                      onChange={effects.toggleSmartMode}
-                      value={state.smartMode}
-                      iconSize={1}
-                    />
-                  </Tooltip>
+                  <ActionButton
+                    className='pull-right'
+                    data-mode='smartMode'
+                    handler={effects.toggleMode}
+                    icon={state.smartMode ? 'toggle-on' : 'toggle-off'}
+                    iconColor={state.smartMode ? 'text-success' : undefined}
+                    size='small'
+                  >
+                    {_('smartBackupModeTitle')}
+                  </ActionButton>
                 </CardHeader>
                 <CardBlock>
                   <FormGroup>