Niels Lyngsø 367a4b9727 Block Grid Editor (#12826)
* Refactor block list/grid property value editors for code reuse

* Prettify block grid editor data conveter a bit

* correct appearance and colors

* validation should only kick in if value is higher than 0 and not null

* Add copyright notice to code, a little formatting and file scoped namespaces where applicable

* custom views

* custom views for blocks

* Refactor block list min/max validation and reuse for block grid

* Prettify extraction of nested content-and-settings references for block grid

* Fix bad naming

* fix casing

* Refactor block list notification handler and reuse for block grid

* context sensitive ui for Blocks

* Refactor notification handlers for block list and block grid incl. unit tests

* Formatting and review

* Bump number of expected data editors in unit test

* initial progress on column options editor

* column span options UI

* column span UI adjustments

* context aware ui adjustments

* minor border improvement

* get and pick layout stylesheet

* remove random x

* make highlight border standout more

* dedicated context bar

* UI improvements

* remove annoying indication

* copy paste

* UI improvements

* remove div.umb-block-grid__block--view from partial

* show block ui, only hide when hovering area.

* area actions

* UI Adjustments

* Block grid editor localization (#12915)

Co-authored-by: Niels Lyngsø <niels.lyngso@gmail.com>

* fix case of empty value

* use right index

* place border on top of column indication

* heroblock

* userFlowWhenBlockWasCreated

* shorter messages

* overal improvements

* force left/right drag feature

* stylesheet picker localization

* localizations

* space

* unnesecary removal of space

* notes on masonry

* validation form parent skipping + better snapping when drag n drop

* remove icons

* make rows go as minimal as posible

* scale and drop indications

* use item width to determin forceLeft or forceRight

* clean up

* Make clipboard filtering work with block arrays

* readonly mode

* important note

* ask to revert failed paste

* dont allow for backdrop click

* changed wording

* more area actions outside grid container

* droppable indication

* implemented minimal responsive solution.

* add additional data fields about grid clumns

* improved fallback columns width + rows height

* make root element class `umb-block-grid`

* align layout with position relatives, to align visual experience.

* use clientX not screenX

* rename area classes so they dont include the word 'block'

* more renaming

* commit flexbox layout css to repo

* fixes

* fix typo

* only show a broader inline create button if the block is full width.

* simplify css

* remove headline block hover effect

* use some font, to make it look better.

* Drag and drop correctiions/limits

* clean up

* remove log

* make assumptions about proposed distance of target

* slightly white border on validation message for areas to make it standout

* drag n drop seems good at this stage

* force left and right buttons and indication

* correct if

* revert scale handler ui

* If columnSpans is empty we fall back to full width

* Access other PreValues from a PreValue Editor

* maybe temprorary turn of distance drag n' drop condition

* setDirty

* area alias was missing in razor and needed help text

* forceleft forceright translations

* forceLeft / forceRight razor

* correct translation +
remove data- on ng-click

* force placement when moving over edge

* remove unnesecary wrapper element

* show-validation

* red text, might be hard to see, lets see.

* for safety have the border-raduis correct

* better wordings

* Use mouse position to judge if the drop is good before or after.

* fit placeholder when item is begin dragged away

* initial step for finding nearest relation when drag-hovering nothing

* Much better drag n drop experience, must be tested further to prove its not breaking some cases.

* title for scale handler

* new approach + massive drag n drop clean up

* avoid complex CSS transfering of props, instead add the prop in HTML

* adjust placeAfter when in vertical direction mode

* do not scale bigger than the available space to the right

* clean css

* fix numbers

* Fix the case of flickering when hitting an empty area.

* correct placement of code

* package lock

* Adjustment for PreValue Area allowances

* comment on fit in line feature

* fixing scale and drag n drop potential issues

* clean up

* only disallow above max

* outcomment unused code

* clean up

* drag n drop above or below container

* fix for Firefox

* Do not edit block if there is no properties in content

* angularJS form for Entries, to correct validation

* parse layout columns, used to know if block is full width of the layout

* use inherited layout columns

* add this to the example html

* flexbox fix

* highlight if empty area

* comments for undefined column spans

* bring back approvedContainer lock period.

* fix

* Do not edit something without properties

* Remove Force, as thats confusing to read.

* correct localization key

* minor corrections

* Fit within context columns

* Conceptual, inline editor for Grid.

* fix casing

* consider related position in directional conditions

* set default max row span to 1

* update columnSpanOption check for sync

* move Editor to group of Rich Text

* more shift autoScroll

* assume layout columns comes as string

* fix variable name

* force left/right indication

* Inject Areas directly in slot, to enable custom view manipulations of such.

* fix sortableJS mis dropping items

* Overwrite create label

* ability to overwrite root layout create label

* Simplify PreValue editor by hidding options that is not in effect.

* Setup new areas as half width if possible

* Grouping blockTypes

* remove flexbox stylesheet

* Chose groups for area allowance

* ensure a good default width

* improve block active state

* Better contextual sizing

* Comment clean up

* Remove The StarterKit from branch

* Unique group identification for the property editor sortable

* only show avaiable block groups in picker.

* Indication of taget area

* Fallback to root grid columns

* use root layout grid columns, so dont update when layoutColumns change

* Ability to remove block group

* clean up references when removing Group or single Block

* fix drop in same group

* Block picker use contexual create label as headline

* adjust area highlight

* Prevalue editor

* structuralOptions

* Move pre values into tabs for better overview and scope

* Let area grid columns fallback to root grid columns, and let both default to "12" instead of "initial"

* remove input close tag

* Allow in areas

* Move build-in custom views

* only show property-into-button on hover when in group-panel__header

* some height for the show buttons

* filter available block type based on allowInAreas

* remove OnlySpecifiedAllowance

* unsupported block if trouble happend

* move allow at root to allowance group

* easily drop at top or below area if outside. If more than 100px outside then see if there is a parent layout to move into.

* block group validation

* shortcut for opening Areas if areas are defined

* scale label for Areas editor

* Added Legacy name on the old grid layout

* Remove files that come with the starter kit

* Sorting: takeover container detection

* Refactor models + remove unused properties

* Endpoint for creating block grid demo element types

* CTA for getting Block Grid demo blocks

* Refactor block grid sample element creation

* Fix Constants-PropertyEditors spacing

* Fixed unit tests

* Get sample configuration

* Labels for sample blocks

* Improve drag, to swap across unallowed area/root

* improved empty threshold

* hide the after inline-create-button if block is located at right side of area/layout

* clean up

* translations

* danish translations

* move outside edge for forceRight

* Update src/Umbraco.Web.Common/Extensions/BlockGridTemplateExtensions.cs

Co-authored-by: Nikolaj Geisle <70372949+Zeegaan@users.noreply.github.com>

* Review comments

* Remove leftover TODO

* big cleanup

* Hide Sample CTA when installed

* clean up

* correct styling for wrapper + moving Block UI to z-index 3 for visiblity on top of other block

* slightly adjusting inline-create-buttons to avoid collisions

* correct localization for force left/right buttons

* gitignorer update

* Clean up nesting of classes in BlockGridConfiguration

* change gitignorer to include App_Plugin folder

* move default layout stylesheet

* remove specific App_plugin folder

* package-lock

* update sample custom views paths

* add custom views for sample

* Adding sample custom views

* Move sample partial Views and custom views

* Update views to not use ModelsBuilder

* Move sample custom views to wwwroot

* Updated Sample CTA text

* Use localize directory

* Ensure groupKey for items without such to work.

Co-authored-by: kjac <kja@umbraco.dk>
Co-authored-by: Warren Buckley <warren@umbraco.com>
Co-authored-by: Bjarke Berg <mail@bergmania.dk>
Co-authored-by: Nikolaj Geisle <70372949+Zeegaan@users.noreply.github.com>
2022-10-05 13:50:26 +02:00
2022-10-05 12:11:51 +02:00
2022-10-05 13:50:26 +02:00
2022-10-05 13:50:26 +02:00
2022-10-05 12:11:51 +02:00
2022-10-05 12:11:51 +02:00

Umbraco CMS · GitHub license Build status PRs Welcome Twitter Discord

Umbraco is the friendliest, most flexible and fastest growing ASP.NET CMS, and used by more than 500,000 websites worldwide. Our mission is to help you deliver delightful digital experiences by making Umbraco friendly, simpler and social.

Learn more at umbraco.com

Umbraco Logo

See the official Umbraco website for an introduction, core mission and values of the product and team behind it.

Please also see our Code of Conduct.

Getting Started

Umbraco Cloud is the easiest and fastest way to use Umbraco yet, with full support for all your custom .NET code and integrations. You're up and running in less than a minute, and your life will be made easier with automated upgrades and a built-in deployment engine. We offer a free 14-day trial, no credit card needed.

If you want to DIY, then you can download Umbraco either as a ZIP file or via NuGet. It's the same version of Umbraco CMS that powers Umbraco Cloud, but you'll need to find a place to host it yourself, and handling deployments and upgrades will be all up to you.

Documentation

The documentation for Umbraco CMS can be found on Our Umbraco. The source for the Umbraco docs is open source as well and we're happy to look at your documentation contributions.

Join the Umbraco community

Our friendly community is available 24/7 at the community hub, we call "Our Umbraco". Our Umbraco features forums for questions and answers, documentation, downloadable plugins for Umbraco, and a rich collection of community resources.

Besides "Our", we all support each other also via Twitter: Umbraco HQ, Release Updates, #umbraco

Contributing

Umbraco is contribution-focused and community-driven. If you want to contribute back to the Umbraco source code, please check out our guide to contributing.

Description
Umbraco is a free and open source .NET content management system helping you deliver delightful digital experiences.
Readme 448 MiB
Languages
C# 59.5%
TypeScript 39.9%
JavaScript 0.3%
HTML 0.2%