Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support/apply booystrap4 adjust checkbox #1663

Merged
merged 16 commits into from Mar 5, 2020
Merged

Support/apply booystrap4 adjust checkbox #1663

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
ef26289
override variables of checkbox
Feb 13, 2020
f95c531
use custom input
Feb 13, 2020
ff44db6
Merge branch 'support/apply-bootstrap4' into support/apply-booystrap4…
Feb 20, 2020
38e7f81
Merge branch 'support/apply-bootstrap4' into support/apply-booystrap4…
Feb 25, 2020
b163527
add css for custom-checkbox each theme-color
Feb 25, 2020
1c81e4c
Merge branch 'support/apply-bootstrap4' into support/apply-booystrap4…
Feb 27, 2020
d9e0989
none shadow around checkbox
Feb 27, 2020
6442388
Merge branch 'support/apply-bootstrap4' into support/apply-booystrap4…
Mar 4, 2020
e2f6ddf
tin label
Mar 4, 2020
518cc96
change help-blcok
Mar 4, 2020
3247785
remove miss
Mar 4, 2020
806a45c
Revert "remove miss"
Mar 4, 2020
a7b176f
adjust
Mar 4, 2020
3dd7986
apply custom-checkbox
Mar 4, 2020
07d9fdb
add variable for custom-checkbox design
Mar 4, 2020
f2eb447
change checkbox design
Mar 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
52 changes: 31 additions & 21 deletions ...client/js/components/Admin/ImportData/GrowiArchive/ImportCollectionConfigurationModal.jsx
View file
Open in desktop
Expand Up @@ -67,82 +67,91 @@ class ImportCollectionConfigurationModal extends React.Component {
/* eslint-disable react/no-unescaped-entities */
return (
<>
<div className="checkbox checkbox-warning">
<div className="custom-control custom-checkbox custom-checkbox-warning">
<input
id="cbOpt4"
type="checkbox"
className="custom-control-input"
checked={option.isOverwriteAuthorWithCurrentUser || false} // add ' || false' to avoid uncontrolled input warning
onChange={() => this.changeHandler({ isOverwriteAuthorWithCurrentUser: !option.isOverwriteAuthorWithCurrentUser })}
/>
<label htmlFor="cbOpt4">
<label htmlFor="cbOpt4" className="custom-control-label">
{t(`${translationBase}.overwrite_author.label`)}
<p className="help-block mt-0" dangerouslySetInnerHTML={{ __html: t(`${translationBase}.overwrite_author.desc`) }} />
<p className="form-text text-muted mt-0" dangerouslySetInnerHTML={{ __html: t(`${translationBase}.overwrite_author.desc`) }} />
</label>
</div>
<div className="checkbox checkbox-warning">
<div className="custom-control custom-checkbox custom-checkbox-warning">
<input
id="cbOpt1"
type="checkbox"
className="custom-control-input"
checked={option.makePublicForGrant2 || false} // add ' || false' to avoid uncontrolled input warning
onChange={() => this.changeHandler({ makePublicForGrant2: !option.makePublicForGrant2 })}
/>
<label htmlFor="cbOpt1">
<label htmlFor="cbOpt1" className="custom-control-label">
{t(`${translationBase}.set_public_to_page.label`, { from: t('Anyone with the link') })}
<p
className="help-block mt-0"
className="form-text text-muted mt-0"
dangerouslySetInnerHTML={{ __html: t(`${translationBase}.set_public_to_page.desc`, { from: t('Anyone with the link') }) }}
/>
</label>
</div>
<div className="checkbox checkbox-warning">
<div className="custom-control custom-checkbox custom-checkbox-warning">
<input
id="cbOpt2"
type="checkbox"
className="custom-control-input"
checked={option.makePublicForGrant4 || false} // add ' || false' to avoid uncontrolled input warning
onChange={() => this.changeHandler({ makePublicForGrant4: !option.makePublicForGrant4 })}
/>
<label htmlFor="cbOpt2">
<label htmlFor="cbOpt2" className="custom-control-label">
{t(`${translationBase}.set_public_to_page.label`, { from: t('Just me') })}
<p className="help-block mt-0" dangerouslySetInnerHTML={{ __html: t(`${translationBase}.set_public_to_page.desc`, { from: t('Just me') }) }} />
<p
className="form-text text-muted mt-0"
dangerouslySetInnerHTML={{ __html: t(`${translationBase}.set_public_to_page.desc`, { from: t('Just me') }) }}
/>
</label>
</div>
<div className="checkbox checkbox-warning">
<div className="custom-control custom-checkbox custom-checkbox-warning">
<input
id="cbOpt3"
type="checkbox"
className="custom-control-input"
checked={option.makePublicForGrant5 || false} // add ' || false' to avoid uncontrolled input warning
onChange={() => this.changeHandler({ makePublicForGrant5: !option.makePublicForGrant5 })}
/>
<label htmlFor="cbOpt3">
<label htmlFor="cbOpt3" className="custom-control-label">
{t(`${translationBase}.set_public_to_page.label`, { from: t('Only inside the group') })}
<p
className="help-block mt-0"
className="form-text text-muted mt-0"
dangerouslySetInnerHTML={{ __html: t(`${translationBase}.set_public_to_page.desc`, { from: t('Only inside the group') }) }}
/>
</label>
</div>
<div className="checkbox checkbox-default">
<div className="custom-control custom-checkbox custom-checkbox-warning">
<input
id="cbOpt5"
type="checkbox"
className="custom-control-input"
checked={option.initPageMetadatas || false} // add ' || false' to avoid uncontrolled input warning
onChange={() => this.changeHandler({ initPageMetadatas: !option.initPageMetadatas })}
/>
<label htmlFor="cbOpt5">
<label htmlFor="cbOpt5" className="custom-control-label">
{t(`${translationBase}.initialize_meta_datas.label`)}
<p className="help-block mt-0" dangerouslySetInnerHTML={{ __html: t(`${translationBase}.initialize_meta_datas.desc`) }} />
<p className="form-text text-muted mt-0" dangerouslySetInnerHTML={{ __html: t(`${translationBase}.initialize_meta_datas.desc`) }} />
</label>
</div>
<div className="checkbox checkbox-default">
<div className="custom-control custom-checkbox custom-checkbox-warning">
<input
id="cbOpt6"
type="checkbox"
className="custom-control-input"
checked={option.initHackmdDatas || false} // add ' || false' to avoid uncontrolled input warning
onChange={() => this.changeHandler({ initHackmdDatas: !option.initHackmdDatas })}
/>
<label htmlFor="cbOpt6">
<label htmlFor="cbOpt6" className="custom-control-label">
{t(`${translationBase}.initialize_hackmd_related_datas.label`)}
<p className="help-block mt-0" dangerouslySetInnerHTML={{ __html: t(`${translationBase}.initialize_hackmd_related_datas.desc`) }} />
<p className="form-text text-muted mt-0" dangerouslySetInnerHTML={{ __html: t(`${translationBase}.initialize_hackmd_related_datas.desc`) }} />
</label>
</div>
</>
Expand All @@ -159,16 +168,17 @@ class ImportCollectionConfigurationModal extends React.Component {
/* eslint-disable react/no-unescaped-entities */
return (
<>
<div className="checkbox checkbox-warning">
<div className="custom-control custom-checkbox custom-checkbox-warning">
<input
id="cbOpt1"
type="checkbox"
className="custom-control-input"
checked={option.isOverwriteAuthorWithCurrentUser || false} // add ' || false' to avoid uncontrolled input warning
onChange={() => this.changeHandler({ isOverwriteAuthorWithCurrentUser: !option.isOverwriteAuthorWithCurrentUser })}
/>
<label htmlFor="cbOpt1">
<label htmlFor="cbOpt1" className="custom-control-label">
{t(`${translationBase}.overwrite_author.label`)}
<p className="help-block mt-0" dangerouslySetInnerHTML={{ __html: t(`${translationBase}.overwrite_author.desc`) }} />
<p className="form-text text-muted mt-0" dangerouslySetInnerHTML={{ __html: t(`${translationBase}.overwrite_author.desc`) }} />
</label>
</div>
</>
Expand Down
10 changes: 4 additions & 6 deletions src/client/js/components/Admin/ImportData/GrowiArchive/ImportCollectionItem.jsx
View file
Open in desktop
Expand Up @@ -83,18 +83,18 @@ export default class ImportCollectionItem extends React.Component {
} = this.props;

return (
<div className="checkbox checkbox-info my-0">
<div className="custom-control custom-checkbox custom-checkbox-info my-0">
<input
type="checkbox"
id={collectionName}
name={collectionName}
className="form-check-input"
className="custom-control-input"
value={collectionName}
checked={isSelected}
disabled={isImporting}
onChange={this.changeHandler}
/>
<label className="text-capitalize form-check-label" htmlFor={collectionName}>
<label className="text-capitalize custom-control-label" htmlFor={collectionName}>
{collectionName}
</label>
</div>
Expand Down Expand Up @@ -205,9 +205,7 @@ export default class ImportCollectionItem extends React.Component {
<div className="card-header bg-light">
<div className="d-flex justify-content-between align-items-center">
{/* left */}
<div className="pl-4">
{this.renderCheckbox()}
</div>
{this.renderCheckbox()}
{/* right */}
<span className="d-flex align-items-center">
{this.renderModeSelector()}
Expand Down
4 changes: 4 additions & 0 deletions src/client/styles/scss/_admin.scss
View file
Open in desktop
Expand Up @@ -156,6 +156,10 @@
background-color: rgba($info, 0.1);
}
}

label.custom-control-label {
font-weight: normal;
}
}

.admin-navigation > a + a {
Expand Down
5 changes: 5 additions & 0 deletions src/client/styles/scss/_override-bootstrap-variables.scss
View file
Open in desktop
Expand Up @@ -103,3 +103,8 @@ $progress-height: 4px;
$progress-border-radius: 0;
$progress-bg: #f0f0f0;
$progress-box-shadow: none;

//== Custom Checkbox
$custom-checkbox-indicator-border-radius: 0px;
$custom-control-indicator-focus-box-shadow: none;
$custom-control-indicator-size: 1.2rem;
40 changes: 30 additions & 10 deletions src/client/styles/scss/theme/_apply-colors.scss
View file
Open in desktop
Expand Up @@ -3,27 +3,49 @@
//
@import '~bootstrap/scss/bootstrap-reboot';

@each $color,
$value in $theme-colors {
@each $color, $value in $theme-colors {
@include bg-variant('.bg-#{$color}', $value);
}

@each $color,
$value in $theme-colors {
@each $color, $value in $theme-colors {
.btn-#{$color} {
@include button-variant($value, $value);
}
}

@each $color,
$value in $theme-colors {
@each $color, $value in $theme-colors {
.btn-outline-#{$color} {
@include button-outline-variant($value);
}
}

@each $theme-color,
$color in $theme-colors {
@each $theme-color, $color in $theme-colors {
.custom-checkbox-#{$theme-color} {
.custom-control-label::before {
border-color: #d7d7d7;
transition: 0.3s ease-in-out;
}
.custom-control-input:checked + .custom-control-label::before {
background-color: $color;
border-color: $color;
}
.custom-control-input:checked + .custom-control-label::after {
color: white;
}
.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
color: white;
background-color: $color;
border-color: $color;
}
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
color: white;
background-color: white;
border-color: #d7d7d7;
}
}
}

@each $theme-color, $color in $theme-colors {
.alert.alert-#{$theme-color} {
color: white;
background: $color;
Expand Down Expand Up @@ -56,7 +78,6 @@

// Dropdown
.dropdown-item {

&.active,
&:active {
@include gradient-bg($dropdown-link-active-bg);
Expand Down Expand Up @@ -89,7 +110,6 @@ body {
}

.logo {

// set transition for fill
svg * {
transition: fill 0.8s ease-out;
Expand Down