From f648ee907a5302ed219ad84f4b185b401558aa77 Mon Sep 17 00:00:00 2001
From: Michal Kolodziejski <michal.kolodziejski@cern.ch>
Date: Wed, 11 Nov 2020 09:16:01 +0100
Subject: [PATCH] Use Checbkox toggle to enable/disable global pref
---
.../preferences/PreferencesList.jsx | 39 +++++++++++--------
1 file changed, 23 insertions(+), 16 deletions(-)
diff --git a/src/components/preferences/PreferencesList.jsx b/src/components/preferences/PreferencesList.jsx
index 4cef1465..77293f33 100644
--- a/src/components/preferences/PreferencesList.jsx
+++ b/src/components/preferences/PreferencesList.jsx
@@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
-import {Button, Table} from 'semantic-ui-react';
+import {Button, Checkbox, Popup, Table} from 'semantic-ui-react';
import * as preferenceActions from 'actions/preferences';
import AddPreference from 'components/preferences/AddPreference';
@@ -69,21 +69,28 @@ function PreferencesList({
<Table.Cell>{preference.rangeEnd}</Table.Cell>
<Table.Cell>{preference.type}</Table.Cell>
<Table.Cell>
- <Button.Group size="tiny">
- {global && allowToggleEnable && (
- <Button
- icon="check"
- content={isEnabled ? 'Disable' : 'Enable'}
- onClick={() =>
- toggleGlobalPreferenceForChannel(preference.id, channel, !isEnabled)
- }
- color={isEnabled ? 'red' : 'green'}
- />
- )}
- {allowDelete && (
- <Button icon="trash" onClick={() => deletePreferenceById(preference.id)} />
- )}
- </Button.Group>
+ {global && allowToggleEnable && (
+ <Popup
+ trigger={
+ <Checkbox
+ checked={isEnabled}
+ onChange={(_, {checked}) =>
+ toggleGlobalPreferenceForChannel(preference.id, channel, checked)
+ }
+ toggle
+ />
+ }
+ content="Toggle the global preference for this channel"
+ position="right center"
+ />
+ )}
+ {allowDelete && (
+ <Button
+ icon="trash"
+ onClick={() => deletePreferenceById(preference.id)}
+ size="mini"
+ />
+ )}
</Table.Cell>
</Table.Row>
);
--
GitLab