From 1fa23961bf1ca27ba487daa6515eddbcee4e7208 Mon Sep 17 00:00:00 2001 From: Viggie1 Date: Mon, 18 Sep 2023 12:50:50 -0400 Subject: [PATCH] Added bookmark to edge tests --- .../components/edge-controls.scss | 12 ++ .../excerpt-content/editor-component.jsx | 22 ++- .../excerpt-content/editor-component.test.js | 16 +-- .../images/icon-bookmark.png | Bin 0 -> 534 bytes .../viewer-component.scss | 135 ++++++++++++++++++ 5 files changed, 170 insertions(+), 15 deletions(-) create mode 100644 packages/obonode/obojobo-chunks-excerpt/images/icon-bookmark.png diff --git a/packages/obonode/obojobo-chunks-excerpt/components/edge-controls.scss b/packages/obonode/obojobo-chunks-excerpt/components/edge-controls.scss index 704e58770..7b15ed13f 100644 --- a/packages/obonode/obojobo-chunks-excerpt/components/edge-controls.scss +++ b/packages/obonode/obojobo-chunks-excerpt/components/edge-controls.scss @@ -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; @@ -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 { diff --git a/packages/obonode/obojobo-chunks-excerpt/components/excerpt-content/editor-component.jsx b/packages/obonode/obojobo-chunks-excerpt/components/excerpt-content/editor-component.jsx index c6a272b8d..676ade542 100644 --- a/packages/obonode/obojobo-chunks-excerpt/components/excerpt-content/editor-component.jsx +++ b/packages/obonode/obojobo-chunks-excerpt/components/excerpt-content/editor-component.jsx @@ -11,7 +11,9 @@ 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': @@ -19,7 +21,9 @@ const getEdgeOptionsForBodyStyle = bodyStyle => { case 'callout-example': case 'callout-hint': case 'none': - return [] + edgeOptions.top = [] + edgeOptions.bottom = [] + return edgeOptions case 'filled-box': case 'bordered-box': @@ -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 } } @@ -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) @@ -86,13 +94,13 @@ const ExcerptContent = props => { onChangeContentValue('topEdge', edgeType)} /> onChangeContentValue('bottomEdge', edgeType)} /> diff --git a/packages/obonode/obojobo-chunks-excerpt/components/excerpt-content/editor-component.test.js b/packages/obonode/obojobo-chunks-excerpt/components/excerpt-content/editor-component.test.js index d3e867263..da8f46a88 100644 --- a/packages/obonode/obojobo-chunks-excerpt/components/excerpt-content/editor-component.test.js +++ b/packages/obonode/obojobo-chunks-excerpt/components/excerpt-content/editor-component.test.js @@ -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']) }) }) diff --git a/packages/obonode/obojobo-chunks-excerpt/images/icon-bookmark.png b/packages/obonode/obojobo-chunks-excerpt/images/icon-bookmark.png new file mode 100644 index 0000000000000000000000000000000000000000..98ee4871d13432ec7e04c50d9acae9bac10c67b8 GIT binary patch literal 534 zcmV+x0_pvUP)idE-P#ar~{k=yCaM7UF zIs&z^l{ku5RN&v}2dK3(w^$pilO$d9RW>*{133SD<0 blockquote { @@ -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); + } + } }