Skip to content

Commit

Permalink
Added bookmark to edge tests
Browse files Browse the repository at this point in the history
  • Loading branch information
Viggie1 committed Sep 18, 2023
1 parent 73d12b6 commit 1fa2396
Show file tree
Hide file tree
Showing 5 changed files with 170 additions and 15 deletions.
12 changes: 12 additions & 0 deletions packages/obonode/obojobo-chunks-excerpt/components/edge-controls.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,10 @@ $lighter-blue: lighten($color-obojobo-blue, 60%);
transform: translate(-4px);
}

&:nth-child(4) {
transform: translate(-6px);
}

&.is-selected {
background-color: $lighter-blue;
border: 2px solid $color-obojobo-blue;
Expand Down Expand Up @@ -79,6 +83,14 @@ $lighter-blue: lighten($color-obojobo-blue, 60%);
&.is-edge-jagged::after {
background-image: url('../images/icon-jagged-edge.png');
}

&.is-edge-bookmark::after {
background-image: url('../images/icon-bookmark.png');

&.is-bottom-edge-type- {
display: none;
}
}
}

span {
Expand Down
22 changes: 15 additions & 7 deletions packages/obonode/obojobo-chunks-excerpt/components/excerpt-content/editor-component.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,19 @@ import ExcerptEditControls from '../excerpt-edit-controls'
import Common from 'obojobo-document-engine/src/scripts/common'
const { Button } = Common.components

const getEdgeOptionsForBodyStyle = bodyStyle => {
const edgeOptions = {top: [], bottom: []}

const getEdgeOptionsForBodyStyle = (bodyStyle, edgeOptions) => {
switch (bodyStyle) {
case 'callout-try-it':
case 'callout-practice':
case 'callout-do-this':
case 'callout-example':
case 'callout-hint':
case 'none':
return []
edgeOptions.top = []
edgeOptions.bottom = []
return edgeOptions

case 'filled-box':
case 'bordered-box':
Expand All @@ -29,10 +33,14 @@ const getEdgeOptionsForBodyStyle = bodyStyle => {
case 'light-yellow-paper':
case 'dark-yellow-paper':
case 'aged-paper':
return ['normal', 'fade', 'jagged']
edgeOptions.top = ['normal', 'fade', 'jagged', 'bookmark']
edgeOptions.bottom = ['normal', 'fade', 'jagged']
return edgeOptions

default:
return ['normal', 'fade']
edgeOptions.top = ['normal', 'fade']
edgeOptions.bottom = ['normal', 'fade']
return edgeOptions
}
}

Expand Down Expand Up @@ -76,7 +84,7 @@ const ExcerptContent = props => {
return Transforms.removeNodes(props.editor, { at: parentPath })
}

const edgeOptions = getEdgeOptionsForBodyStyle(props.element.content.bodyStyle)
getEdgeOptionsForBodyStyle(props.element.content.bodyStyle, edgeOptions)

const shouldShowEdgeControls = props.selected && Range.isCollapsed(props.editor.selection)

Expand All @@ -86,13 +94,13 @@ const ExcerptContent = props => {
<React.Fragment>
<EdgeControls
position="top"
edges={edgeOptions}
edges={edgeOptions.top}
selectedEdge={props.element.content.topEdge}
onChangeEdge={edgeType => onChangeContentValue('topEdge', edgeType)}
/>
<EdgeControls
position="bottom"
edges={edgeOptions}
edges={edgeOptions.bottom}
selectedEdge={props.element.content.bottomEdge}
onChangeEdge={edgeType => onChangeContentValue('bottomEdge', edgeType)}
/>
Expand Down
16 changes: 8 additions & 8 deletions packages/obonode/obojobo-chunks-excerpt/components/excerpt-content/editor-component.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -352,14 +352,14 @@ describe('Excerpt Content Node', () => {
assertEdgeControlsHaveOptions('callout-example', [])
assertEdgeControlsHaveOptions('callout-hint', [])
assertEdgeControlsHaveOptions('none', [])
assertEdgeControlsHaveOptions('filled-box', ['normal', 'fade', 'jagged'])
assertEdgeControlsHaveOptions('bordered-box', ['normal', 'fade', 'jagged'])
assertEdgeControlsHaveOptions('card', ['normal', 'fade', 'jagged'])
assertEdgeControlsHaveOptions('white-paper', ['normal', 'fade', 'jagged'])
assertEdgeControlsHaveOptions('modern-paper', ['normal', 'fade', 'jagged'])
assertEdgeControlsHaveOptions('light-yellow-paper', ['normal', 'fade', 'jagged'])
assertEdgeControlsHaveOptions('dark-yellow-paper', ['normal', 'fade', 'jagged'])
assertEdgeControlsHaveOptions('aged-paper', ['normal', 'fade', 'jagged'])
assertEdgeControlsHaveOptions('filled-box', ['normal', 'fade', 'jagged', 'bookmark'])
assertEdgeControlsHaveOptions('bordered-box', ['normal', 'fade', 'jagged', 'bookmark'])
assertEdgeControlsHaveOptions('card', ['normal', 'fade', 'jagged', 'bookmark'])
assertEdgeControlsHaveOptions('white-paper', ['normal', 'fade', 'jagged', 'bookmark'])
assertEdgeControlsHaveOptions('modern-paper', ['normal', 'fade', 'jagged', 'bookmark'])
assertEdgeControlsHaveOptions('light-yellow-paper', ['normal', 'fade', 'jagged', 'bookmark'])
assertEdgeControlsHaveOptions('dark-yellow-paper', ['normal', 'fade', 'jagged', 'bookmark'])
assertEdgeControlsHaveOptions('aged-paper', ['normal', 'fade', 'jagged', 'bookmark'])
assertEdgeControlsHaveOptions('', ['normal', 'fade'])
})
})
Binary file added packages/obonode/obojobo-chunks-excerpt/images/icon-bookmark.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
135 changes: 135 additions & 0 deletions packages/obonode/obojobo-chunks-excerpt/viewer-component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,10 @@ since it is not compatible with stylelint's indentation rules

$callout-blue: rgb(29, 119, 252);

$bookmark-border-white: white white white white;
$bookmark-border-yellow: white white white #fffcf8;
$bookmark-border-aged: white white white rgb(237, 220, 192);

position: relative;

> blockquote {
Expand Down Expand Up @@ -1105,4 +1109,135 @@ since it is not compatible with stylelint's indentation rules
background: url(./images/jagged-edge-aged-paper.svg);
}
}

&.is-top-edge-type-bookmark {
/*
stylelint complains about this rule's specificity, but fixing it would
require deconstructing every style hierarchy so we're ignoring it instead
*/
// stylelint-disable-next-line no-descending-specificity
> blockquote > .excerpt-content::before {
content: ' ';
width: 100%;
// this only seems to work at 10px for some reason
// stylelint-disable-next-line unit-disallowed-list
height: 10px;
position: absolute;
left: 0;
top: 0;
outline: none;
}

&.is-body-style-type-bordered-box {
> blockquote > .excerpt-content {
border-top-left-radius: 0;
border-top-right-radius: 0;

&::before {
width: 0;
height: 0;
border-style: solid;
border-width: 1.25em 0 0 1.25em;
border-color: $bookmark-border-white;
position: absolute;
top: -0.12em;
left: -0.12em;
filter: drop-shadow(-0.125em 0.125em 0.063em rgba(0, 0, 0, 0.25));
transform: rotate(-0.25turn);
}
}
}
}

&.is-top-edge-type-bookmark.is-body-style-type-filled-box,
&.is-top-edge-type-bookmark.is-body-style-type-card {
> blockquote > .excerpt-content::before {
width: 0;
height: 0;
border-style: solid;
border-width: 1.25em 0 0 1.25em;
border-color: $bookmark-border-white;
position: absolute;
top: -0.12em;
left: -0.12em;
filter: drop-shadow(-0.125em 0.125em 0.063em rgba(0, 0, 0, 0.25));
transform: rotate(-0.25turn);
}
}

&.is-top-edge-type-bookmark.is-body-style-type-white-paper {
> blockquote > .excerpt-content::before {
width: 0;
height: 0;
border-style: solid;
border-width: 1.25em 0 0 1.25em;
border-color: $bookmark-border-white;
position: absolute;
top: -0.12em;
left: -0.12em;
filter: drop-shadow(-0.125em 0.125em 0.063em rgba(0, 0, 0, 0.25));
transform: rotate(-0.25turn);
}
}

&.is-top-edge-type-bookmark.is-body-style-type-modern-paper {
> blockquote > .excerpt-content::before {
width: 0;
height: 0;
border-style: solid;
border-width: 1.25em 0 0 1.25em;
border-color: $bookmark-border-white;
position: absolute;
top: -0.12em;
left: -0.12em;
filter: drop-shadow(-0.125em 0.125em 0.063em rgba(0, 0, 0, 0.25));
transform: rotate(-0.25turn);
}
}

&.is-top-edge-type-bookmark.is-body-style-type-light-yellow-paper {
> blockquote > .excerpt-content::before {
width: 0;
height: 0;
border-style: solid;
border-width: 1.25em 0 0 1.25em;
border-color: $bookmark-border-yellow;
position: absolute;
top: -0.12em;
left: -0.12em;
filter: drop-shadow(-0.125em 0.125em 0.063em rgba(0, 0, 0, 0.25));
transform: rotate(-0.25turn);
}
}

&.is-top-edge-type-bookmark.is-body-style-type-dark-yellow-paper {
> blockquote > .excerpt-content::before {
width: 0;
height: 0;
border-style: solid;
border-width: 1.25em 0 0 1.25em;
border-color: $bookmark-border-yellow;
position: absolute;
top: -0.12em;
left: -0.12em;
filter: drop-shadow(-0.125em 0.125em 0.063em rgba(0, 0, 0, 0.25));
transform: rotate(-0.25turn);
}
}

&.is-top-edge-type-bookmark.is-body-style-type-aged-paper {
> blockquote > .excerpt-content::before {
width: 0;
height: 0;
border-style: solid;
border-width: 1.25em 0 0 1.25em;
outline: none;
border-color: $bookmark-border-aged;
position: absolute;
top: -0.12em;
left: -0.12em;
filter: drop-shadow(-0.125em 0.125em 0.063em rgba(0, 0, 0, 0.25));
transform: rotate(-0.25turn);
}
}
}

0 comments on commit 1fa2396

Please sign in to comment.