feat: style dropdown arrow of html and list select.

This commit is contained in:
Ahmed Bouhuolia
2020-05-11 23:19:47 +02:00
parent 9168a1b069
commit e56a50c3ff
4 changed files with 47 additions and 6 deletions

View File

@@ -3,12 +3,11 @@ import {Button} from '@blueprintjs/core';
import {Select} from '@blueprintjs/select';
export default function SelectList(props) {
const {buttonLabel, ...rest} = props;
const { buttonLabel, ...rest } = props;
return (
<Select {...rest}>
<Button
rightIcon="caret-down"
fill={true}>
{ buttonLabel }
</Button>

View File

@@ -27,7 +27,6 @@ import { FormattedMessage as T, FormattedHTMLMessage } from 'react-intl';
function AccountsChart({
// #withDashboard
changePageTitle,
@@ -135,14 +134,17 @@ function AccountsChart({
});
}, [inactiveAccount, requestInactiveAccount]);
// Handle activate account click.
const handleActivateAccount = useCallback((account) => {
setActivateAccount(account);
});
// Handle activate account alert cancel.
const handleCancelActivateAccount = useCallback(() => {
setActivateAccount(false);
});
// Handle activate account confirm.
const handleConfirmAccountActivate = useCallback(() => {
requestActivateAccount(activateAccount.id).then(() => {
setActivateAccount(false);
@@ -163,10 +165,12 @@ function AccountsChart({
};
// Handle accounts bulk delete button click.,
const handleBulkDelete = useCallback((accountsIds) => {
setBulkDelete(accountsIds);
}, [setBulkDelete]);
// Handle confirm accounts bulk delete.
const handleConfirmBulkDelete = useCallback(() => {
requestDeleteBulkAccounts(bulkDelete).then(() => {
setBulkDelete(false);
@@ -180,6 +184,7 @@ function AccountsChart({
});
}, [requestDeleteBulkAccounts, bulkDelete]);
// Handle cancel accounts bulk delete.
const handleCancelBulkDelete = useCallback(() => {
setBulkDelete(false);
}, []);

View File

@@ -0,0 +1,12 @@
import {connect} from 'react-redux';
import {
submitMedia,
deleteMedia,
} from 'store/media/media.actions';
export const mapDispatchToProps = (dispatch) => ({
requestSubmitMedia: (form, config) => dispatch(submitMedia({ form, config })),
requestDeleteMedia: (ids) => dispatch(deleteMedia({ ids })),
});
export default connect(null, mapDispatchToProps);

View File

@@ -94,18 +94,43 @@ $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='ht
}
}
.bp3-datepicker-caption select{
.#{$ns}-html-select{
.bp3-icon-double-caret-vertical{
display: none;
}
}
.bp3-datepicker-caption select{
&,
&:hover{
border-color: transparent;
}
}
// Dropdown arrow to html select and select list.
.#{$ns}-html-select::after,
.form-group--select-list .#{$ns}-button::after{
content: '';
display: inline-block;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid #8d8d8d;
position: absolute;
right: 0;
top: 50%;
margin-top: -2px;
margin-right: 12px;
border-radius: 1px;
}
.form-group--select-list{
.#{$ns}-icon-caret-down{
.#{$ns}-button{
color: #8D8D8D;
position: relative;
padding-right: 25px;
}
&.bp3-fill{