1. 06 May, 2022 1 commit
    • Benjamin Kott's avatar
      [TASK] Polish SvgTree component styling · 5ecfceb4
      Benjamin Kott authored and Georg Ringer's avatar Georg Ringer committed
      This patch is cleaning up a lot of loose ends in the svg tree component.
      It aims to make the component look more clean and polished.
      
      - Unify focus styling with selected, hover and versioning
      - Ensure the whole node looks focused instead of only some text
      - Replace expand icon to match core icon styling
      - Hide expand icon if page tree is stopped
      - Move trigger to enter stopped pagetree to the front
      - Remove blurry lines for background borders
      - Make the edit input fields use as much space as is available
      - Load common icons always on setup to avoid node refresh on initial loads
      - Reposition the locked icon (another editor is editing)
      - Correct keyboard navigation behaviour and focus setting
      - Keep focus after leaving the edit mode without changes
      - Adjust positioning to rely on calculation instead of hardcoded values
      - Align drag delete target
      - Make drag positions more visible to the user when moving a page
      - Improve styling of tooltips when dragging elements
      - Add border to select tree component to make scroll boundaries visible
      
      Affected Areas:
      - PageTree
      - FileTree
      - SelectTree
      
      Releases: main
      Resolves: #97344
      Change-Id: I6034e0cbc1079b93b24c5c1a99e0299946874b2f
      Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/74203
      
      Tested-by: Benjamin Franzke's avatarBenjamin Franzke <bfr@qbus.de>
      Tested-by: core-ci's avatarcore-ci <typo3@b13.com>
      Tested-by: Georg Ringer's avatarGeorg Ringer <georg.ringer@gmail.com>
      Reviewed-by: Benjamin Franzke's avatarBenjamin Franzke <bfr@qbus.de>
      Reviewed-by: Georg Ringer's avatarGeorg Ringer <georg.ringer@gmail.com>
      5ecfceb4
  2. 12 Oct, 2021 1 commit
  3. 28 Sep, 2021 1 commit
  4. 30 Aug, 2021 1 commit
  5. 12 Jul, 2021 1 commit
  6. 23 Apr, 2021 1 commit
  7. 16 Apr, 2021 1 commit
    • Benni Mack's avatar
      [FEATURE] Use SVG Trees in Record Selector · b0b36436
      Benni Mack authored and Benjamin Franzke's avatar Benjamin Franzke committed
      This change adds the SVG-based page tree in the
      record selector and the Page Link picker, replacing
      decade-old clumsy HTML code for generating trees.
      
      This replacement not only unifies the user experience
      across the navigation trees and the Element
      Browser / Link Pickers making the whole look + feel
      very consistent.
      
      It also allows to finally use all the features built
      in the SVG trees:
      
      * A filter across the tree built on the browser and automatic
        refreshing
      * collapse + expand and post-loading is now built with the
        same AJAX endpoints as the navigation components, making
        the general loading much faster
      * Temporary Mount Points now look exactly the same as in the
        navigation area.
      * Keyboard navigation
      * The Content Area inside the Record Selector and the Link
        Pickers is replaced via AJAX calls
      
      Especially the last feature makes it a breeze to use
      the new trees to select items much faster.
      
      All existing features, such as directly selecting a page
      or link to a page within the tree is added as so-called
      SVG-tree "actions" in the right corner when hovering,
      avoiding the additional "play" icon in the tree.
      
      Custom support for Element Browser "mount points" is also
      kept and included.
      
      The SVG tree is added to the following components:
      
      * Database Browser / Record Selector (e.g. choosing storagePid in plugins)
      * File Browser / Record Selector (e.g. selecting an image in the plugin)
      * Folder Browser / Record Selector
      * Link Picker for Pages / Content Elements ("link to a page")
      * Link Picker for Files ("link to a file")
      * Link Picker for Folders ("link to a folder")
      * Link Picker for Records (e.g. news record)
      
      All link picker functionality is available for typolink fields (e.g. tt_content.header_link)
      and when linking inside the Rich Text Editor.
      
      Some technical details under-the-hood:
      * The trees are now built as SVG tree / LIT elements
      * All Element Browser / Link Picker trees are named "Browsable...Tree"
      * The AJAX endpoints for fetching data are used
      * The Page Tree now uses a different configuration URL with a "?readonly=1" parameter, with the main difference to initialize EB mountpoints instead
      * Within the tree: The SVG tree actions is a separate container for elements on the right-hand of the tree
      * The GET parameter "contentOnly" represents to only load parts of the HTML (the content area) when fetching from AJAX
      
      Resolves: #73176
      Resolves: #92430
      Releases: master
      Change-Id: I5ef9534076bd6fa297b51c0ed9e90af91035be80
      Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/67687
      
      Reviewed-by: Richard Haeser's avatarRichard Haeser <richard@richardhaeser.com>
      Reviewed-by: Oliver Bartsch's avatarOliver Bartsch <bo@cedev.de>
      Reviewed-by: Benjamin Franzke's avatarBenjamin Franzke <bfr@qbus.de>
      Tested-by: default avatarTYPO3com <noreply@typo3.com>
      Tested-by: core-ci's avatarcore-ci <typo3@b13.com>
      Tested-by: Richard Haeser's avatarRichard Haeser <richard@richardhaeser.com>
      Tested-by: Jonas Eberle's avatarJonas Eberle <flightvision@googlemail.com>
      Tested-by: Oliver Bartsch's avatarOliver Bartsch <bo@cedev.de>
      Tested-by: Daniel Goerz's avatarDaniel Goerz <daniel.goerz@posteo.de>
      Tested-by: Benjamin Franzke's avatarBenjamin Franzke <bfr@qbus.de>
      b0b36436
  8. 23 Mar, 2021 1 commit
  9. 18 Mar, 2021 1 commit
  10. 10 Mar, 2021 1 commit
  11. 15 Feb, 2021 1 commit
  12. 09 Feb, 2021 2 commits
  13. 02 Feb, 2021 1 commit
  14. 27 Jan, 2021 1 commit
  15. 20 Dec, 2020 1 commit
    • Matthias Stegmann's avatar
      [FEATURE] Introduce Bootstrap v5 for TYPO3 Backend · 793fc121
      Matthias Stegmann authored and Benni Mack's avatar Benni Mack committed
      This changes removes the frontend framework
      Bootstrap 3, and adds Bootstrap 5 beta 1 (we
      expect Bootstrap 5 final by the time we release TYPO3 v11 LTS).
      
      Bootstrap v3 is not supported by the Bootstrap
      team any longer, so an update is critical for TYPO3 Core.
      
      Bootstrap v5 adds a few accessibility improvements
      as well as flexbox for rendering
      containers and grids throughout TYPO3 Backend.
      
      All JS components are not bound to jQuery anymore,
      and have been reworked.
      
      A lot of HTML/CSS changes happened, which we
      slowly migrate (and not in a huge change)
      to TYPO3's templates, in order to keep
      this change managable.
      
      A legacy CSS/SCSS file is added to
      keep some backwards-compatibility classes
      to ease the migration for extension developers
      who have built their own backend modules.
      
      Key features of Bootstrap 5:
      * "rem" instead of "px" is used by default
      * CSS variables are introduced
      * Improved bootstrap focus outline styling (buttons / inputs / links)
      * Simplified grid functionality
      * use new button color mixin to increase contrast:
        Primary, Success and Warning Button color is now dark instead of white
      
      EXT:styleguide was used as a basis for
      upgrading to keep compatibility as much
      as possible, but more changes will be coming
      in the next few minor releases.
      
      Resolves: #92616
      Releases: master
      Change-Id: Iec989f39649b5460b055ec879199faf38e424f2b
      Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/66247
      
      Tested-by: default avatarTYPO3com <noreply@typo3.com>
      Tested-by: Benjamin Franzke's avatarBenjamin Franzke <bfr@qbus.de>
      Tested-by: Oliver Hader's avatarOliver Hader <oliver.hader@typo3.org>
      Tested-by: Oliver Bartsch's avatarOliver Bartsch <bo@cedev.de>
      Tested-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
      Reviewed-by: Benjamin Franzke's avatarBenjamin Franzke <bfr@qbus.de>
      Reviewed-by: Oliver Hader's avatarOliver Hader <oliver.hader@typo3.org>
      Reviewed-by: Oliver Bartsch's avatarOliver Bartsch <bo@cedev.de>
      Reviewed-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
      793fc121
  16. 20 Sep, 2020 1 commit
  17. 25 Mar, 2020 1 commit
  18. 05 Apr, 2019 1 commit
  19. 22 Jan, 2019 1 commit
  20. 03 Sep, 2018 1 commit
  21. 30 Nov, 2017 1 commit
  22. 26 Mar, 2017 1 commit