diff --git a/src/link/images/article-black.svg b/src/link/images/article-black.svg new file mode 100644 index 0000000..42eec45 --- /dev/null +++ b/src/link/images/article-black.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/link/images/article-white.svg b/src/link/images/article-white.svg new file mode 100644 index 0000000..b67a40e --- /dev/null +++ b/src/link/images/article-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/link/images/change-black.svg b/src/link/images/change-black.svg deleted file mode 100644 index 3cad1b8..0000000 --- a/src/link/images/change-black.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/link/images/change.svg b/src/link/images/change.svg deleted file mode 100644 index 753adb6..0000000 --- a/src/link/images/change.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/link/images/remove.svg b/src/link/images/remove-white.svg similarity index 100% rename from src/link/images/remove.svg rename to src/link/images/remove-white.svg diff --git a/src/link/images/search-black.svg b/src/link/images/search-black.svg new file mode 100644 index 0000000..738bbc6 --- /dev/null +++ b/src/link/images/search-black.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/link/images/search-white.svg b/src/link/images/search-white.svg new file mode 100644 index 0000000..41e86fb --- /dev/null +++ b/src/link/images/search-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/link/images/search.svg b/src/link/images/search.svg deleted file mode 100644 index e9fb880..0000000 --- a/src/link/images/search.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/link/popover.js b/src/link/popover.js index 083ed8b..b11dca2 100644 --- a/src/link/popover.js +++ b/src/link/popover.js @@ -69,7 +69,7 @@ export const WikipediaPreviewPopover = ( { ) } { viewingPreview && ( { const [ previewHtml, setPreviewHtml ] = useState( null ); + const [ selectingSection, setSelectingSection ] = useState( false ); const [ showControllersMenu, setShowControllersMenu ] = useState( true ); const toggleControllersMenu = () => { /* eslint-disable-next-line no-shadow */ setShowControllersMenu( ( showControllersMenu ) => ! showControllersMenu ); }; + const showSections = () => { + setSelectingSection( true ); + }; + useEffect( () => { const { title, lang } = activeAttributes; if ( title && lang ) { @@ -81,13 +87,19 @@ export const PreviewEditUI = ( { }, [ previewHtml ] ); return ( -
-
- { previewHtml && showControllersMenu && ( - +
+ { ! selectingSection ? ( +
+
+ { previewHtml && showControllersMenu && ( + + ) } +
+ ) : ( + ) }
); @@ -101,22 +113,38 @@ const isPopoverExpanded = () => { return hasPreviewPopup && hasExpandedClass; }; -const ControllerEditUI = ( { onEdit, onRemove } ) => { +const ControllerEditUI = ( { onEditTopic, onEditSection, onRemove } ) => { return (
+
+
+ { __( 'Topic', 'wikipedia-preview' ) } +
+
+
- { __( 'Change', 'wikipedia-preview' ) } +
+
+ { __( 'Sections', 'wikipedia-preview' ) } +
- { __( 'Remove', 'wikipedia-preview' ) } +
+
+ { __( 'Remove', 'wikipedia-preview' ) } +
); diff --git a/src/link/sections.js b/src/link/sections.js new file mode 100644 index 0000000..d49ce19 --- /dev/null +++ b/src/link/sections.js @@ -0,0 +1,7 @@ +export const Sections = ( {} ) => { + return ( +
+

Sections

+
+ ); +}; diff --git a/src/link/style.scss b/src/link/style.scss index 0854f19..bd25d54 100644 --- a/src/link/style.scss +++ b/src/link/style.scss @@ -40,7 +40,7 @@ body { } &-icon { - background-image: url(./images/search.svg); + background-image: url(./images/search-black.svg); width: 20px; height: 20px; position: absolute; @@ -242,7 +242,7 @@ body { } &-search-icon { - background-image: url(./images/search.svg); + background-image: url(./images/search-black.svg); width: 20px; height: 20px; position: absolute; @@ -348,12 +348,13 @@ body { } &-controllers { - width: 52px; - height: 136px; + width: 73px; + height: 194px; background-color: #000; display: flex; flex-direction: column; justify-content: space-around; + align-items: center; font-size: 12px; color: #fff; border-top-right-radius: 4px; @@ -364,29 +365,36 @@ body { cursor: pointer; } - &-change { - - &::before { - position: relative; - content: url(./images/change.svg); - width: 20px; - height: 20px; - left: 14px; + &-option { + display: flex; + flex-direction: column; + align-items: center; + &-icon { + &-change { + width: 20px; + height: 20px; + margin-bottom: 5px; + content: url(./images/search-white.svg); + } + &-sections { + width: 20px; + height: 20px; + margin-bottom: 5px; + content: url(./images/article-white.svg); + } + &-remove { + width: 20px; + height: 20px; + margin-bottom: 5px; + content: url(./images/remove-white.svg); + } } - } - - &-remove { - &::before { - position: relative; - content: url(./images/remove.svg); - width: 20px; + &-message { + width: 100%; height: 20px; - left: 15px; - } - } } @@ -455,23 +463,22 @@ body { cursor: pointer; } - &-change { - text-align: center; - - &::before { - content: url(./images/change-black.svg); - left: -7px; - top: 5px; - } - } - - &-remove { - text-align: center; - - &::before { - content: url(./images/remove-black.svg); - left: -7px; - top: 5px; + &-option { + flex-direction: row; + width: 100%; + &-icon { + &-change { + margin: 0 5px 0 5px; + content: url(./images/search-black.svg); + } + &-sections { + margin: 0 5px 0 5px; + content: url(./images/article-black.svg); + } + &-remove { + margin: 0 5px 0 5px; + content: url(./images/remove-black.svg); + } } } } @@ -496,6 +503,15 @@ body { } } + .wikipediapreview-edit-sections { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; + width: 100%; + border: papayawhip ; + } + &.rtl { .wikipediapreview-edit-inline {