[v6] Rebranded UI to Cohesivo

[mnocon]

Target: 6.0, saas.

Initial UI rebranding pass for v6 docs

Contains only changes to the UI, no content changes.

Example pages:

• cards
• example page
• search
• main page
• note/info
• warning
• tabs
• code samples
• release notes
• update page

References preview are built in separate PR: #3375

• PHP API REF:
  • main
  • class
  • namespace
• REST API REF

To make this work, I've made the Cohesivo logo available on latest already: 591573b...87b51f5

[github-actions]

Preview of modified files

Preview of modified Markdown:

• docs/index.md

[github-actions]

Summary

Status	Count
🔍 Total	751583
🔗 Unique	15057
✅ Successful	6303
⏳ Timeouts	0
🔀 Redirected	0
👻 Excluded	745280
❓ Unknown	0
🚫 Errors	0
⛔ Unsupported	0

Full Github Actions output

[github-actions]

code_samples/ change report

Before (on target branch)	After (in current PR)
code_samples/back_office/calendar/config/packages/calendar.yaml docs/administration/back_office/customize_calendar.md@25:``` yaml hl_lines="6" docs/administration/back_office/customize_calendar.md@26:[[= include_file('code_samples/back_office/calendar/config/packages/calendar.yaml') =]] docs/administration/back_office/customize_calendar.md@27:``` 001⫶ibexa: 002⫶ system: 003⫶ admin_group: 004⫶ calendar: 005⫶ event_types: 006❇️ future_publication:	code_samples/back_office/calendar/config/packages/calendar.yaml docs/administration/back_office/customize_calendar.md@25:``` yaml hl_lines="6" docs/administration/back_office/customize_calendar.md@26:[[= include_file('code_samples/back_office/calendar/config/packages/calendar.yaml') =]] docs/administration/back_office/customize_calendar.md@27:``` 001⫶ibexa: 002⫶ system: 003⫶ admin_group: 004⫶ calendar: 005⫶ event_types: 006❇️ future_publication:
007⫶ color: '#47BEDB'	007⫶ color: '#19628F'
008⫶ actions: 009⫶ reschedule: 010⫶ icon: '/bundles/ibexaadminuiassets/vendors/ids-assets/dist/img/all-icons.svg#alert-error' code_samples/back_office/image_editor/assets/random_dot/random-dot.js docs/content_management/images/extend_image_editor.md@67:``` js docs/content_management/images/extend_image_editor.md@68:[[= include_file('code_samples/back_office/image_editor/assets/random_dot/random-dot.js', 26, 43) =]] docs/content_management/images/extend_image_editor.md@69:``` 001⫶ const drawDot = () => { 002⫶ const ctx = canvas.current.getContext('2d'); 003⫶ const positionX = Math.random() * canvas.current.width; 004⫶ const positionY = Math.random() * canvas.current.height; 005⫶ 006⫶ ctx.save(); 007⫶	008⫶ actions: 009⫶ reschedule: 010⫶ icon: '/bundles/ibexaadminuiassets/vendors/ids-assets/dist/img/all-icons.svg#alert-error' code_samples/back_office/image_editor/assets/random_dot/random-dot.js docs/content_management/images/extend_image_editor.md@67:``` js docs/content_management/images/extend_image_editor.md@68:[[= include_file('code_samples/back_office/image_editor/assets/random_dot/random-dot.js', 26, 43) =]] docs/content_management/images/extend_image_editor.md@69:``` 001⫶ const drawDot = () => { 002⫶ const ctx = canvas.current.getContext('2d'); 003⫶ const positionX = Math.random() * canvas.current.width; 004⫶ const positionY = Math.random() * canvas.current.height; 005⫶ 006⫶ ctx.save(); 007⫶
008⫶ ctx.fillStyle = '#ae1164';	008⫶ ctx.fillStyle = '#4e24a5';
009⫶ 010⫶ ctx.beginPath(); 011⫶ ctx.arc(positionX, positionY, 20, 0, Math.PI * 2, true); 012⫶ ctx.fill(); 013⫶ 014⫶ ctx.restore(); 015⫶ 016⫶ saveInHistory(); 017⫶ }; docs/content_management/images/extend_image_editor.md@75:``` js docs/content_management/images/extend_image_editor.md@76:[[= include_file('code_samples/back_office/image_editor/assets/random_dot/random-dot.js', 17, 26) =]] docs/content_management/images/extend_image_editor.md@77:``` 001⫶ const saveInHistory = () => { 002⫶ const newImage = new Image(); 003⫶ 004⫶ newImage.onload = () => { 005⫶ dispatchImageHistoryAction({ type: 'ADD_TO_HISTORY', image: newImage, additionalData }); 006⫶ }; 007⫶ 008⫶ newImage.src = canvas.current.toDataURL(); 009⫶ }; docs/content_management/images/extend_image_editor.md@81:``` js docs/content_management/images/extend_image_editor.md@82:[[= include_file('code_samples/back_office/image_editor/assets/random_dot/random-dot.js') =]] docs/content_management/images/extend_image_editor.md@83:``` 001⫶import React, { useContext } from 'react'; 002⫶import PropTypes from 'prop-types'; 003⫶ 004⫶import { 005⫶ CanvasContext, 006⫶ ImageHistoryContext, 007⫶ AdditionalDataContext, 008⫶} from '../../vendor/ibexa/image-editor/src/bundle/ui-dev/src/modules/image-editor/image.editor.modules'; 009⫶ 010⫶const { ibexa } = window; 011⫶ 012⫶const IDENTIFIER = 'dot'; 013⫶ 014⫶const Dot = () => { 015⫶ const [canvas, setCanvas] = useContext(CanvasContext); 016⫶ const [imageHistory, dispatchImageHistoryAction] = useContext(ImageHistoryContext); 017⫶ const [additionalData, setAdditionalData] = useContext(AdditionalDataContext); 018⫶ const saveInHistory = () => { 019⫶ const newImage = new Image(); 020⫶ 021⫶ newImage.onload = () => { 022⫶ dispatchImageHistoryAction({ type: 'ADD_TO_HISTORY', image: newImage, additionalData }); 023⫶ }; 024⫶ 025⫶ newImage.src = canvas.current.toDataURL(); 026⫶ }; 027⫶ const drawDot = () => { 028⫶ const ctx = canvas.current.getContext('2d'); 029⫶ const positionX = Math.random() * canvas.current.width; 030⫶ const positionY = Math.random() * canvas.current.height; 031⫶ 032⫶ ctx.save(); 033⫶	009⫶ 010⫶ ctx.beginPath(); 011⫶ ctx.arc(positionX, positionY, 20, 0, Math.PI * 2, true); 012⫶ ctx.fill(); 013⫶ 014⫶ ctx.restore(); 015⫶ 016⫶ saveInHistory(); 017⫶ }; docs/content_management/images/extend_image_editor.md@75:``` js docs/content_management/images/extend_image_editor.md@76:[[= include_file('code_samples/back_office/image_editor/assets/random_dot/random-dot.js', 17, 26) =]] docs/content_management/images/extend_image_editor.md@77:``` 001⫶ const saveInHistory = () => { 002⫶ const newImage = new Image(); 003⫶ 004⫶ newImage.onload = () => { 005⫶ dispatchImageHistoryAction({ type: 'ADD_TO_HISTORY', image: newImage, additionalData }); 006⫶ }; 007⫶ 008⫶ newImage.src = canvas.current.toDataURL(); 009⫶ }; docs/content_management/images/extend_image_editor.md@81:``` js docs/content_management/images/extend_image_editor.md@82:[[= include_file('code_samples/back_office/image_editor/assets/random_dot/random-dot.js') =]] docs/content_management/images/extend_image_editor.md@83:``` 001⫶import React, { useContext } from 'react'; 002⫶import PropTypes from 'prop-types'; 003⫶ 004⫶import { 005⫶ CanvasContext, 006⫶ ImageHistoryContext, 007⫶ AdditionalDataContext, 008⫶} from '../../vendor/ibexa/image-editor/src/bundle/ui-dev/src/modules/image-editor/image.editor.modules'; 009⫶ 010⫶const { ibexa } = window; 011⫶ 012⫶const IDENTIFIER = 'dot'; 013⫶ 014⫶const Dot = () => { 015⫶ const [canvas, setCanvas] = useContext(CanvasContext); 016⫶ const [imageHistory, dispatchImageHistoryAction] = useContext(ImageHistoryContext); 017⫶ const [additionalData, setAdditionalData] = useContext(AdditionalDataContext); 018⫶ const saveInHistory = () => { 019⫶ const newImage = new Image(); 020⫶ 021⫶ newImage.onload = () => { 022⫶ dispatchImageHistoryAction({ type: 'ADD_TO_HISTORY', image: newImage, additionalData }); 023⫶ }; 024⫶ 025⫶ newImage.src = canvas.current.toDataURL(); 026⫶ }; 027⫶ const drawDot = () => { 028⫶ const ctx = canvas.current.getContext('2d'); 029⫶ const positionX = Math.random() * canvas.current.width; 030⫶ const positionY = Math.random() * canvas.current.height; 031⫶ 032⫶ ctx.save(); 033⫶
034⫶ ctx.fillStyle = '#ae1164';	034⫶ ctx.fillStyle = '#4e24a5';
035⫶ 036⫶ ctx.beginPath(); 037⫶ ctx.arc(positionX, positionY, 20, 0, Math.PI * 2, true); 038⫶ ctx.fill(); 039⫶ 040⫶ ctx.restore(); 041⫶ 042⫶ saveInHistory(); 043⫶ }; 044⫶ 045⫶ return ( 046⫶ <div className="c-image-editor-dot"> 047⫶ <button type="button" onClick={drawDot} className="btn btn-secondary"> 048⫶ Add dot 049⫶ </button> 050⫶ </div> 051⫶ ); 052⫶}; 053⫶ 054⫶Dot.propTypes = {}; 055⫶ 056⫶Dot.defaultProps = {}; 057⫶ 058⫶export default Dot; 059⫶ 060⫶ibexa.addConfig( 061⫶ 'imageEditor.actions.dot', 062⫶ { 063⫶ label: 'Dot', 064⫶ component: Dot, 065⫶ icon: ibexa.helpers.icon.getIconPath('form-radio'), 066⫶ identifier: IDENTIFIER, 067⫶ }, 068⫶ true, 069⫶);	035⫶ 036⫶ ctx.beginPath(); 037⫶ ctx.arc(positionX, positionY, 20, 0, Math.PI * 2, true); 038⫶ ctx.fill(); 039⫶ 040⫶ ctx.restore(); 041⫶ 042⫶ saveInHistory(); 043⫶ }; 044⫶ 045⫶ return ( 046⫶ <div className="c-image-editor-dot"> 047⫶ <button type="button" onClick={drawDot} className="btn btn-secondary"> 048⫶ Add dot 049⫶ </button> 050⫶ </div> 051⫶ ); 052⫶}; 053⫶ 054⫶Dot.propTypes = {}; 055⫶ 056⫶Dot.defaultProps = {}; 057⫶ 058⫶export default Dot; 059⫶ 060⫶ibexa.addConfig( 061⫶ 'imageEditor.actions.dot', 062⫶ { 063⫶ label: 'Dot', 064⫶ component: Dot, 065⫶ icon: ibexa.helpers.icon.getIconPath('form-radio'), 066⫶ identifier: IDENTIFIER, 067⫶ }, 068⫶ true, 069⫶);

Download colorized diff