From 5f97d91115e3401d2cc5fc77aea4d0d79037b521 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20G=C3=BCnther?= Date: Sat, 27 May 2023 22:45:46 +0200 Subject: [PATCH 01/57] Add lookbook example --- Gemfile | 3 ++ Gemfile.lock | 18 +++++++++ config/initializers/lookbook.rb | 38 +++++++++++++++++++ config/routes.rb | 4 ++ spec/components/docs/overview.md.erb | 17 +++++++++ .../previews/advanced_filters_preview.rb | 0 .../advanced_filters_preview/default.html.erb | 11 ++++++ 7 files changed, 91 insertions(+) create mode 100644 config/initializers/lookbook.rb create mode 100644 spec/components/docs/overview.md.erb create mode 100644 spec/components/previews/advanced_filters_preview.rb create mode 100644 spec/components/previews/advanced_filters_preview/default.html.erb diff --git a/Gemfile b/Gemfile index cbab7e2b4e69..939afb487dac 100644 --- a/Gemfile +++ b/Gemfile @@ -269,6 +269,9 @@ group :development do gem 'livingstyleguide', '~> 2.1.0' gem 'sassc-rails' + # Lookbook + gem 'lookbook', '~> 2.0.3' + gem 'colored2' end diff --git a/Gemfile.lock b/Gemfile.lock index 0e88c6fc89dd..792d16624802 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -364,6 +364,8 @@ GEM crack (0.4.5) rexml crass (1.0.6) + css_parser (1.14.0) + addressable daemons (1.4.1) dalli (3.2.4) date (3.3.3) @@ -514,7 +516,9 @@ GEM html-pipeline (2.14.3) activesupport (>= 2) nokogiri (>= 1.4) + htmlbeautifier (1.4.2) htmldiff (0.0.1) + htmlentities (4.3.4) http-accept (1.7.0) http-cookie (1.0.5) domain_name (~> 0.5) @@ -577,6 +581,18 @@ GEM loofah (2.21.3) crass (~> 1.0.2) nokogiri (>= 1.12.0) + lookbook (2.0.3) + activemodel + css_parser + htmlbeautifier (~> 1.3) + htmlentities (~> 4.3.4) + marcel (~> 1.0) + railties (>= 5.0) + redcarpet (~> 3.5) + rouge (>= 3.26, < 5.0) + view_component (>= 2.0) + yard (~> 0.9.25) + zeitwerk (~> 2.5) mail (2.8.1) mini_mime (>= 0.1.1) net-imap @@ -957,6 +973,7 @@ GEM activerecord (>= 4.2) xpath (3.2.0) nokogiri (~> 1.8) + yard (0.9.34) zeitwerk (2.6.8) PLATFORMS @@ -1030,6 +1047,7 @@ DEPENDENCIES listen (~> 3.8.0) livingstyleguide (~> 2.1.0) lograge (~> 0.12.0) + lookbook (~> 2.0.3) mail (= 2.8.1) matrix (~> 0.4.2) md_to_pdf! diff --git a/config/initializers/lookbook.rb b/config/initializers/lookbook.rb new file mode 100644 index 000000000000..43df19db0aad --- /dev/null +++ b/config/initializers/lookbook.rb @@ -0,0 +1,38 @@ +OpenProject::Application.configure do + config.view_component.generate.preview_path = Rails.root.join("spec/components/previews").to_s + config.view_component.preview_paths << Rails.root.join("spec/components/previews").to_s + config.lookbook.project_name = "OpenProject Lookbook" + config.lookbook.page_paths = [Rails.root.join("spec/components/docs/").to_s] + config.lookbook.ui_theme = "blue" + + config.to_prepare do + next unless Rails.env.development? + SecureHeaders::Configuration.named_append(:lookbook) do + { + script_src: %w('unsafe-eval' 'unsafe-inline') + } + end + + module LookbookCspExtender + extend ActiveSupport::Concern + + included do + before_action do + use_content_security_policy_named_append :lookbook + end + end + end + + [ + Lookbook::ApplicationController, + Lookbook::PreviewController, + Lookbook::PreviewsController, + Lookbook::PageController, + Lookbook::PagesController, + Lookbook::InspectorController, + Lookbook::EmbedsController, + ].each do |controller| + controller.include LookbookCspExtender + end + end +end diff --git a/config/routes.rb b/config/routes.rb index 5f2b06ff1e1f..9677da29e8a6 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -582,4 +582,8 @@ # Routes for design related documentation and examples pages get '/design/styleguide' => redirect('/assets/styleguide.html') + + if Rails.env.development? + mount Lookbook::Engine, at: "/design/lookbook" + end end diff --git a/spec/components/docs/overview.md.erb b/spec/components/docs/overview.md.erb new file mode 100644 index 000000000000..4904df1e86fa --- /dev/null +++ b/spec/components/docs/overview.md.erb @@ -0,0 +1,17 @@ +--- +title: An example page +label: Nice example +--- + +This is an example page. If it has a `.md.erb` file extension its +contents will be run through a Markdown parser/renderer before display. + +Fenced code blocks are fully supported and will be highlighted appropriately. + +ERB can be used in here. +The template will be rendered **before** being parsed as Markdown. + +You can can access data about the page using the `@page` variable. +The title of this page is "<%= @page.title %>". + + diff --git a/spec/components/previews/advanced_filters_preview.rb b/spec/components/previews/advanced_filters_preview.rb new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/spec/components/previews/advanced_filters_preview/default.html.erb b/spec/components/previews/advanced_filters_preview/default.html.erb new file mode 100644 index 000000000000..493fa633b419 --- /dev/null +++ b/spec/components/previews/advanced_filters_preview/default.html.erb @@ -0,0 +1,11 @@ +<%= render TooltipComponent.new do |component| %> + <% component.with_trigger do %> + Hover me to see the tooltip + <% end %> + + <% component.with_body do %> + + Content of the tooltip + + <% end %> +<% end %> From 907795fb70c86f675686a4adab452c39ad3b81b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20G=C3=BCnther?= Date: Sun, 28 May 2023 18:04:52 +0200 Subject: [PATCH 02/57] Convert docs --- config/initializers/lookbook.rb | 15 +- spec/components/docs/01_design-system.md.erb | 62 +++++ .../docs/02_devices-and-accessibility.md.erb | 25 ++ spec/components/docs/03-how-to-use.md.erb | 65 +++++ spec/components/docs/overview.md.erb | 17 -- .../docs/styles/01-typography.md.erb | 97 +++++++ spec/components/docs/styles/02-colors.md.erb | 237 ++++++++++++++++++ .../components/docs/styles/03-spacings.md.erb | 58 +++++ spec/components/docs/styles/04-shadows.md.erb | 95 +++++++ spec/components/docs/styles/05-focus.md.erb | 9 + spec/components/docs/styles/06-icons.md.erb | 88 +++++++ 11 files changed, 744 insertions(+), 24 deletions(-) create mode 100644 spec/components/docs/01_design-system.md.erb create mode 100644 spec/components/docs/02_devices-and-accessibility.md.erb create mode 100644 spec/components/docs/03-how-to-use.md.erb delete mode 100644 spec/components/docs/overview.md.erb create mode 100644 spec/components/docs/styles/01-typography.md.erb create mode 100644 spec/components/docs/styles/02-colors.md.erb create mode 100644 spec/components/docs/styles/03-spacings.md.erb create mode 100644 spec/components/docs/styles/04-shadows.md.erb create mode 100644 spec/components/docs/styles/05-focus.md.erb create mode 100644 spec/components/docs/styles/06-icons.md.erb diff --git a/config/initializers/lookbook.rb b/config/initializers/lookbook.rb index 43df19db0aad..54e204baacf7 100644 --- a/config/initializers/lookbook.rb +++ b/config/initializers/lookbook.rb @@ -1,18 +1,19 @@ OpenProject::Application.configure do + next unless Rails.env.development? + config.view_component.generate.preview_path = Rails.root.join("spec/components/previews").to_s config.view_component.preview_paths << Rails.root.join("spec/components/previews").to_s config.lookbook.project_name = "OpenProject Lookbook" config.lookbook.page_paths = [Rails.root.join("spec/components/docs/").to_s] config.lookbook.ui_theme = "blue" - config.to_prepare do - next unless Rails.env.development? - SecureHeaders::Configuration.named_append(:lookbook) do - { - script_src: %w('unsafe-eval' 'unsafe-inline') - } - end + SecureHeaders::Configuration.named_append(:lookbook) do + { + script_src: %w('unsafe-eval' 'unsafe-inline') + } + end + Rails.application.reloader.to_prepare do module LookbookCspExtender extend ActiveSupport::Concern diff --git a/spec/components/docs/01_design-system.md.erb b/spec/components/docs/01_design-system.md.erb new file mode 100644 index 000000000000..cdb3402f81ce --- /dev/null +++ b/spec/components/docs/01_design-system.md.erb @@ -0,0 +1,62 @@ +--- +title: Design System +--- + +At OpenProject, we use a design system to help ensure that our design delivers a consistent experience to users. The system describes the styles, components and patterns that come together to build the foundation for a consistent user experience. To do this, we provide documentation explaining how each element should be used, the different states, variations and options it offers, along with code examples. + +Our goal is to reach a point where every view in OpenProject is built with our design system principles and patterns in mind. However, we are aware that reaching this goal will take time for a tool as complex and layered as OpenProject. + +As such, the design system is still in its infancy and will grow with each release. + +## Purpose (what it is and what it's not) + +This Storybook-based design system documentation only seeks to describe the actual reusable components; it does not seek to document features where these components are used. + +**The purpose of the design system is to:** + +- Ensure that OpenProject has a beautiful, usable and delightful design +- Improve consistency and predictability by defining standards that are reused or extended when there is a need for deviations or alternate versions +- Improve quality (a component that is reused is likely to have gone through more testing and adjustment with each reuse and testing cycle) +- Make design assets easier to maintain (change once to change all) +- Improve accessibility by taking accessibility requirements into account when designing components and patterns + +**The purpose of this document is to:** + +- Maintain a singular reference on what reusable components and patterns look like, how they behave and what options they provide +- Allow product designers and front-end developers to have a shared understanding of how these common elements are designed and how/when they should be used +- Provide quality assurance personnel a common base of reference when testing features that use these reusable components and patterns (and there is a doubt about an unnecessary deviation) +- Give developers important context about available components and how to use them. We want to enable both team and community members to compose and develop complex interfaces easily, preventing fragmentation and technical debt where possible. + +**This document does not:** + +- Define every single component in OpenProject +- Define specific features or implementation details +- Define how things *should* look like; the stories contained here will only describe things as they are currently implemented +- Define possible exceptions or variations made within a feature (if necessary) +- Seek to serve as a central documentation for QA testing of features +- Seek to be exhaustive at any point; it will remain a living document that require maintenance as changes are made + + +## SPOT + +Our design system is referred to simply as "OpenProject Design System". + +You will often see the `spot-` prefix used in code; this is primarily to distinguish newer refactored components from older elements that have the `op-` prefix. + +## Approach + +OpenProject is a complex, powerful tool. One of its key strengths is its customisability and its ability to adapt to a range of different needs. This includes complex filtering options, custom types and statuses, custom fields and a wide range of options to configure views and work package forms. + +Nevertheless, it is very important that OpenProject be intuitive for new users who might not necessarily need that complexity, or indeed be overwhelmed by it. + +Our design approach aims to strike the right balance between powerful and accessible with a two-tiered approach: apply sane defaults and present the most common options, and allow advanced users the option (via an additional click) to customise and fine-tune. + +## The UX of Open Source + +As an open source project with a considerably long history and a large number of contributors, different parts of OpenProject have evolved at different paces, sometimes with completely different technology. Similar components are sometimes implemented somewhat differently in different parts of the software, and there are even multiple implementations of the same basic design. + +This is quite normal for a large open-source project that has not had a dedicated design team for most of its conception. + +One of the goals of the design system is to introduce more coherence and introduce a more modern design language. Whilst we would naturally prefer to be able to update everything at the same time and push the new design system to the entire software, we recognise the need for a more pragmatic approach. The design system will be rolled out in phases, with a careful study of the consequences of updating each component or pattern, and the potential dependencies that will be affected. + +_We recognise that UI/UX has not always been the highest priority for open-source projects. This is somewhat understandable given how open source projects have relatively fewer design resources dedicated to it than commercial products. Our goal is to do our part to improve that situation as much as we can and document our process._ diff --git a/spec/components/docs/02_devices-and-accessibility.md.erb b/spec/components/docs/02_devices-and-accessibility.md.erb new file mode 100644 index 000000000000..b06b989b518e --- /dev/null +++ b/spec/components/docs/02_devices-and-accessibility.md.erb @@ -0,0 +1,25 @@ +--- +title: Devices and Accessbility +--- + +## Desktop-first + +OpenProject is not primarily designed for mobile use or with a mobile-first approach, despite most parts of the software adapting fairly well to smaller screens. The majority of features and views are designed to take advantage of larger screens and more complex interactions, including keyboard shortcuts. + +Nevertheless,  certain features are particularly useful in a mobile context. These include accessing notifications on the go, viewing work packages, reading and responding to comments and viewing attachments and linked files. These features will be given particular attention and optimised for mobile use. + +We do not consider project planning, complex scheduling and team planning to be priority use cases on mobile. + +## Accessibility + +We recognise the importance of accessibility and are aware that OpenProject still has a fair bit of progress to make in this regard. We intend to initially focus on improving contrast, ensuring UI elements have meaningful alt-text and descriptions and expanding the support for keyboard shortcuts. + +We will incrementally evaluate ways to improve our design to better serve users with visual, auditory or motor impairment. + +## Localisation and internationalisation + +OpenProject supports several languages. Our designs must take internalisation into account, notably in terms of string length and spacing. + +The primary design language is English. Our Figma prototypes are always designed first with strings in English and, when relevant, tested with German, French and Spanish translations. This covers our largest user base. + +For other languages, we rely on our translators and our community on \[Crowdin\](https://crowdin.com/translate/openproject/) for their help. If there are design-specific issues that are present in certain languages, we encourage the community to file bug reports so we may fix them. diff --git a/spec/components/docs/03-how-to-use.md.erb b/spec/components/docs/03-how-to-use.md.erb new file mode 100644 index 000000000000..bd5aecfe4964 --- /dev/null +++ b/spec/components/docs/03-how-to-use.md.erb @@ -0,0 +1,65 @@ +--- +title: Using this resource +--- + +We use this lookbook to document our design system. You will find defined styles, components and patterns in the relevant sections. + +You will not find _all_ elements in Storybook yet. The design system at OpenProject is a work in progress; many parts of the software still use older elements that have not been standardised and defined. + +As we work through defining and coumenting each new component, we will find them here. + +## Other resources + +All of the components described here also exist in our Figma libraries: + +- [Foundation styles](https://www.figma.com/file/vOw6PEVIyzaQOIgf02VZFW/Foundations-Library?node-id=228%3A2) +- [Components](https://www.figma.com/file/XhCsrvs6rePifqbBpKYRWD/Components-Library?node-id=386%3A3606) + +_You might find examples of some older elements in the older [Living Style Guide](http://spike.openproject-stage.com:4200/assets/styleguide.html#forms). This will eventually be replaced by Storybook, but this will require time._ + + +## Semantics + +When describing components, we use certain words in very particular ways: + +### Disabled + +_Disabled_ is when no interaction is possible. A disabled element can itself have multiple states: a checkbox can be checked and disabled, a switch can be ON and disabled, a dropdown might have a value but but disabled. + +The opposite of disabled is _enabled_. All elements are described in their enabled state unless explicitly mentioned. + +### Focused and active + +Focus simply refers to when an element has the current object in DOM that has the input focus. In OpenProject, elements that are focused generally have a blue outline. + +The opposite of _in focus_ (or focused) is _not in focus_ (or focused). + +_Active_ is a similar state as focused, but not entirely the same. For example, in the date picker, the start date can be "active" (meaning that clicking on a date in the mini-calendar will change the start date) but not in focus (because the mouse has clicked outside of the field). + +The opposite of active is _inactive_. + +### Checked and on + +Checkboxes can be _checked_ (true) or _unchecked_ (false) + +Radio options can also be "checked" (as in, in a set of three options, only one can be checked) despite this not being the technically correct word. This isi to to distinguish it from "selected" (which refers to selecting an element or an area with the cursor). + +Switches can be _ON_ (true) or _OFF_ (false). + +## Browsing through the docs + +This Storybook is divided in three sections: + +**Styles** include foundational elements like typography, colour, spacing and shadows. All other elements are defined using these base styles. + +**Components** are individual elements (like checkboxes, buttons or text fields), each of which has its own states, variants and behaviour. + +**Patterns** are larger, recurring UI elements made up of a set of different components. Each component used in a pattern still retains its own specificities (options, variatns), but can also have certiain behaviour at the level of the pattern itself. (For example, an action bar can have two or three buttons, which can either be on the left side or the right side). + +## To be added: + +- What the left-side menu includes (and does not include) +- How to find linked/dependent elements +- Contributing: + - As a developer + - As a designer diff --git a/spec/components/docs/overview.md.erb b/spec/components/docs/overview.md.erb deleted file mode 100644 index 4904df1e86fa..000000000000 --- a/spec/components/docs/overview.md.erb +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: An example page -label: Nice example ---- - -This is an example page. If it has a `.md.erb` file extension its -contents will be run through a Markdown parser/renderer before display. - -Fenced code blocks are fully supported and will be highlighted appropriately. - -ERB can be used in here. -The template will be rendered **before** being parsed as Markdown. - -You can can access data about the page using the `@page` variable. -The title of this page is "<%= @page.title %>". - - diff --git a/spec/components/docs/styles/01-typography.md.erb b/spec/components/docs/styles/01-typography.md.erb new file mode 100644 index 000000000000..9982bb49bc3b --- /dev/null +++ b/spec/components/docs/styles/01-typography.md.erb @@ -0,0 +1,97 @@ +--- +title: Typography +--- + +OpenProject uses the "[Lato Sans](https://github.com/latofonts/lato-source)" typeface created by Adam Twardoch, Botio Nikoltchev, and Łukasz Dziedzic (released with the [SIL Open Font license](https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL)). + +There are 7 sizes, each with between three and eight variations. + +## Considerations + +A few things to keep in mind: + +### Black text + +“Black” text in OpenProject does not use the standard black HEX code (#000000); instead, black is defined as Grey-1 (#333333). + +### Line height + +The default line height is 16px, which corresponds to 1 REM with our Spacing baseline. + +For each style, line height is specified with a slash. For example, for Header Small Bold, 24/32 represents 1.5 REM font size and 2 REM line height. + +## Header Big + +This is a larger header than the default, used in rare occasions where a header is needed for a containing element to a page. To be used only if absolutely necessary. Prefer "Header small" as much as possible. + +So far, zero recorded use. Might get removed if this style is not used in until mid-2022. + +> Code example here + +## Header Small + +This is the default type used for page headers. "Bold" is default and is almost always preferred, unless there is a need to use regular to distinguish additional or supporting information. + +> Code example here + +## Subheader Big + +Very rarely used. Used if we need a header small than the regular header but still distinct from body text. + +So far, zero recorded use. Might get removed if this style is not used in until mid-2022. + +> Code example here + +## Subheader Small + +Very rarely used. Used if we need a header small than the regular header but still distinct from body text. + +## Subheader Extra Small + +This is really an alias of _Body Small/Bold_ when this style is used as a header (in some modals) instead of body text. + +> Code example here + +## Body Big + +Used occasionally (where?) + +> Code example here + +## Body Small + +This is the default style for most text on OpenProject. This goes for labels but also input text. By far the most used style style in the application. + +The regular version is used, among other places, on: +- Button text +- Drop down select +- Text fields +- Table text +- Card: work package title +- Sidebar element + +The bold version is used in: + +- Table headers +- Calendar header +- Sidebar header + +> Code example here + +## Caption + +The caption is used for indications and auxiliary information that usually adds context to a view, but are not primary elements. They are also used on elements where space is limited (like the date information on Team planner or Board cards). + +The regular version is used, among other places, in: + +- Chips +- Toast text +- Tooltips +- Card: project name and ID + +The bold version is used in: + +- Sidebar tabs + +> Code example here + diff --git a/spec/components/docs/styles/02-colors.md.erb b/spec/components/docs/styles/02-colors.md.erb new file mode 100644 index 000000000000..3c1e2692b261 --- /dev/null +++ b/spec/components/docs/styles/02-colors.md.erb @@ -0,0 +1,237 @@ +--- +title: Colors +--- + +**Note**: This section is a work-in-progress. If you are unsure about which colour to use, please get in touch with the UX team. + +Because OpenProject can be customised with custom colour schemes, our foundation library only describe the colour palette of the default OpenProject theme. + +Colours are organised in this format: **Category/_name_**. + +There there are six categories: + +- **Basic** +- **Main** +- **Accent** +- **Danger** +- **Indication** +- **Feedback** + +## Basic + +The basic colour set include eight shades of gray used mostly for basic text and backgrounds. The shades do not have additional semantic significance are are simply a continuum between **Basic/_Black_** and **Basic/_White_**. + +The choice of which gray to use depends on the colourspace. + +Note: **Basic/_Gray-1_** is the default colour for "black" text. Pure black (_Basic/Black_) is generally not used in OpenProject. + +> Code example here (Black, Gray-1, Gray-2, Gray-3, Gray-4, Gray-5, Gray-6, White) + +## Main + +The **Main/** colourset is a set of three shades of the OpenProject blue. + +**Main/_Main_** + +> Example + +This is the primary blue used for all main interactions and action buttons, including text links. + +It is also used in the background of the header. + +**Main/_Main Dark_** + +> Example + +This darker version of the main blue is mainly used: + +- to communicate state information (a hover or a pressed state of a button, for example) +- when the use of **Main/_Main_** does not provide enough contrast (for a border colour, for example) + +**Main/_Main Light_** + +> Example + +This lighter version of the main blue is used: + +- to communicate state information (hover on dop-down list or indicating selected toggle element, for example) +- as a background colour of interactive elements (tooltip, toast or information banners) + +## Accent + +> Example + +The **Accent/** colourset is a set of three shades of green that is used to accent certain special functions. This colour should be used sparingly, so that when it is used, it draws the user’s eye. + +**Accent/_Accent_** + +> Example + +This is the primary accent green, used for example in the default state of an accent button. + +**Accent/_Accent Dark_** + +> Example + +This darker version is mainly used: + +- to communicate state information (a hover or a pressed state of a button, for example) +- when the use of **Accent/Main** does not provide enough contrast (for a border colour, for example) + + +**Accent/_Accent Light_** + +> Example + +This lighter version of the main green is used: + +- to communicate state information (hover on dop-down list or indicating selected toggle element, for example) +- as a background colour of interactive elements (tooltip, toast or information banners) + +## Danger + +The **Danger/** colourset is a set of three shades of red used to communicate potential danger to the user, or to warn them of a problem. + +It should also be used to indicate potential destructive actions (actions like delete account or delete user) and exceptionally also used to indicate information (like in a notification badge) when the Indication/ colours cannot be used. + +**Danger/_Danger_** + +> Example + +This is the primary danger red, used for example in the default state of an accent button. + +**Danger/_Danger Dark_** + +> Example + +This darker version is mainly used: + +- to communicate state information (a hover or a pressed state of a button, for example) +- when the use of **Danger/Danger** does not provide enough contrast (for a border colour, for example) + +**Danger/_Danger Light_** + +> Example + +This darker version of the main danger red is used: + +- to communicate state information (hover on dop-down list or indicating selected toggle element, for example) +- as a background colour of interactive elements (tooltip, toast or information banners) + +## Indication + +Indication colours are used to indicate certain special states. + +**Indication/_Flagged_** + +> Example + +This colour is used when “flagging” work packages. It is a teal colour meant to be distinct from **Indication/_Attention_**. + +**Indication/_Current date_** + +> Example + +This colour is used to indicate the current date (today) in a calendar. + +**Indication/_Enterprise_** + +> Example + +This colour is used to indicate that a certain feature or module requires the Enterprise plan to use. + +**Indication/Focus** + +> Example + +This is the colour used to indicate which element has keyboard focus. + +## Feedback + +The **Feedback/**- colors are used to communicate for user feedback: + +- Error +- Warning +- Info +- Success + +Each of these has two versions (Dark and Light), the dark one usually used for the foreground text and icons and the light one for the background. + +These are typically used in toast messages. + +**Feedback/_Error_** + +> Example, Error Light and Dark + +This colour indicates that a response that is different from what the user would have expected. The user flow is usually interrupted when they see an error of this type. + +**Feedback/_Warning_** + +> Example, Warning Light and Dark + +The warning is information that suggests something requires attention (and that could cause a problem), but that no error has been caused, and that the expected user flow can continue. + +**Feedback/_Info_** + +> Example, Info Light and Dark + +This colour is used to indicate additional information that could be of interest to the user. (Like a toast that says “Loading...”, indicating something is happening in the background) + +**Feedback/_Success_** + +> Example, Success Light and Dark + +This colour indicates that the requested user action was successful. It should be used sparingly and only when such a feedback is absolutely required. + +
+ +<% +tokens = JSON.parse File.read(Rails.root.join('frontend/src/app/spot/styles/tokens/dist/tokens.json')) +tokens.select { |k, v| k.start_with?('spot-color-') }.each do |name, value| + %> + +
+
+
<%= name %>
+
<%= value %>
+
+<% end %> + +
+ + diff --git a/spec/components/docs/styles/03-spacings.md.erb b/spec/components/docs/styles/03-spacings.md.erb new file mode 100644 index 000000000000..048cbadd5949 --- /dev/null +++ b/spec/components/docs/styles/03-spacings.md.erb @@ -0,0 +1,58 @@ +--- +title: Spacings +--- + +If I write some explanatory text around these spacings. + +
+<% +tokens = JSON.parse File.read(Rails.root.join('frontend/src/app/spot/styles/tokens/dist/tokens.json')) +tokens + .select { |k, v| k.start_with?('spot-spacing-') } + .sort_by { |k, | k.split('-')[2].gsub('_', '.').to_f } + .each do |name, value| + %> +
+
<%= name %>
+
<%= value %>
+
+
+<% end %> +
+ + diff --git a/spec/components/docs/styles/04-shadows.md.erb b/spec/components/docs/styles/04-shadows.md.erb new file mode 100644 index 000000000000..816ed4bed19f --- /dev/null +++ b/spec/components/docs/styles/04-shadows.md.erb @@ -0,0 +1,95 @@ +--- +title: Shadows +--- + +# Shadows + +Shadows are important when certain components are displayed on top of other components. This is usually the case with contextual menus, drop-downs or dialogues that supplement or expand an existing view. + +Although it is best to avoid layering beyond two levels (a base screen + an overlay), it is sometimes necessary and indeed unavoidable. + +We use different shadows to communicate depth and allow the user to intuitively understand what is "on top". + +Our shadows definitions divided between Light and Hard and three levels of elevation. The shadow is always based on a black #000000 transparency level, a X and Y px value and a spread px value. + +<% +cols = ['Low', 'Mid', 'High'] +rows = ['Light', 'Hard'] +tokens = JSON.parse File.read(Rails.root.join('frontend/src/app/spot/styles/tokens/dist/tokens.json')) +tokens = tokens + .select { |k, v| k.start_with?('spot-shadow-') } + .sort_by { |k, | k.split('-')[2].gsub('_', '.').to_f } + .to_h + %> + + + + + + <% cols.each do |col| %> + + <% end %> + + <% rows.each do |row| %> + + + <% cols.each do |col| %> + <% key = "spot-shadow-#{row.downcase}-#{col.downcase}" %> + + <% end %> + +<% end %> + +
<%= col %>
<%= row %> +
+
<%= key %>
+
<%= tokens[key] %>
+
+
+ + + diff --git a/spec/components/docs/styles/05-focus.md.erb b/spec/components/docs/styles/05-focus.md.erb new file mode 100644 index 000000000000..6d0139ca20a6 --- /dev/null +++ b/spec/components/docs/styles/05-focus.md.erb @@ -0,0 +1,9 @@ +--- +title: Focus state +--- + +Focus state in OpenProject is represented by a 2-pixel outline with colour _Indication/Focus_ around the focused element. + +> Example of some elements with the focus state simulated + +**Note**: _Active_ is a similar state as focused, but not entirely the same. For example, in the date picker, the start date can be "active" (meaning that clicking on a date in the mini-calendar will change the start date) but not in focus (because the mouse pointer has clicked outside of the field and the focus is technically outside the field). diff --git a/spec/components/docs/styles/06-icons.md.erb b/spec/components/docs/styles/06-icons.md.erb new file mode 100644 index 000000000000..11e3323a9693 --- /dev/null +++ b/spec/components/docs/styles/06-icons.md.erb @@ -0,0 +1,88 @@ +--- +title: Icons +--- + +# Icons + +Icons are used as visual indicators or small illustrations. They provide additional context when necessary. + + + +## Design notes + +Icons should generally not be used on its own without a label, especially on interactive elements, where their function might be ambiguous. + +There are notable examples: if the meaning of the button is abundantly clear without a label and space is limited (or repetitive elements), an icon-only interactive element is possible (for example, the "Mark as read" button on each notification element). + +However, icon-only buttons or links should never be used for critical primary functions like Save, Confirm, Remove and Delete. + +## Usage + +Icons are a CSS class only. To use them, apply the `spot-icon` BEM block on a generic inline element like `span`. + +## Options + +There are four pre-defined dimensions for icons: 12×12, 16×16, 20×20 and 24×24. + +The default size is 16×16. + + + + + +## Available icons + +<% +icons = JSON.parse File.read(Rails.root.join('frontend/src/app/spot/icon-font/icons.json')) +%> + +
+<% icons.each do |name| %> +
+
+ +
+
<%= name %>
+
+<% end %> +
; + + From c647fa39ef6c585c21145348ad7b0da39837d2c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20G=C3=BCnther?= Date: Sun, 28 May 2023 13:49:14 +0200 Subject: [PATCH 03/57] Add preview paths to view component --- config/initializers/view_component.rb | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 config/initializers/view_component.rb diff --git a/config/initializers/view_component.rb b/config/initializers/view_component.rb new file mode 100644 index 000000000000..087ebd47e6ec --- /dev/null +++ b/config/initializers/view_component.rb @@ -0,0 +1,5 @@ +OpenProject::Application.configure do + config.view_component.generate.preview_path = Rails.root.join("spec/components/previews").to_s + config.view_component.preview_paths << Rails.root.join("spec/components/previews").to_s + config.view_component.generate.preview = true +end From d1a17006e3919d6f9c725aa7ea7da6a1ec3953b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20G=C3=BCnther?= Date: Sun, 28 May 2023 21:49:55 +0200 Subject: [PATCH 04/57] Add icon component / doc and separate spot bundle --- app/components/icon_component.rb | 12 +++++++ app/helpers/frontend_asset_helper.rb | 6 ++++ app/views/layouts/component_preview.html.erb | 36 +++++++++++++++++++ config/initializers/view_component.rb | 1 + frontend/angular.json | 4 +++ frontend/src/spot.scss | 9 +++++ spec/components/docs/styles/06-icons.md.erb | 18 ++++++++-- spec/components/icon_component_spec.rb | 15 ++++++++ .../previews/icon_component_preview.rb | 15 ++++++++ 9 files changed, 113 insertions(+), 3 deletions(-) create mode 100644 app/components/icon_component.rb create mode 100644 app/views/layouts/component_preview.html.erb create mode 100644 frontend/src/spot.scss create mode 100644 spec/components/icon_component_spec.rb create mode 100644 spec/components/previews/icon_component_preview.rb diff --git a/app/components/icon_component.rb b/app/components/icon_component.rb new file mode 100644 index 000000000000..99a2a622b607 --- /dev/null +++ b/app/components/icon_component.rb @@ -0,0 +1,12 @@ +# frozen_string_literal: true + +class IconComponent < ViewComponent::Base + def initialize(name:, classnames: '') + @name = name + @classnames = classnames + end + + def call + helpers.spot_icon @name, classnames: @classnames + end +end diff --git a/app/helpers/frontend_asset_helper.rb b/app/helpers/frontend_asset_helper.rb index a19b69c3da73..664c7c88d29b 100644 --- a/app/helpers/frontend_asset_helper.rb +++ b/app/helpers/frontend_asset_helper.rb @@ -54,6 +54,12 @@ def include_frontend_assets end end + def include_spot_assets + capture do + concat stylesheet_link_tag variable_asset_path("spot.css"), media: :all, skip_pipeline: true + end + end + private def angular_cli_asset(path) diff --git a/app/views/layouts/component_preview.html.erb b/app/views/layouts/component_preview.html.erb new file mode 100644 index 000000000000..8444f6a13a5b --- /dev/null +++ b/app/views/layouts/component_preview.html.erb @@ -0,0 +1,36 @@ +<%#-- copyright +OpenProject is an open source project management software. +Copyright (C) 2012-2023 the OpenProject GmbH + +This program is free software; you can redistribute it and/or +modify it under the terms of the GNU General Public License version 3. + +OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows: +Copyright (C) 2006-2013 Jean-Philippe Lang +Copyright (C) 2010-2013 the ChiliProject Team + +This program is free software; you can redistribute it and/or +modify it under the terms of the GNU General Public License +as published by the Free Software Foundation; either version 2 +of the License, or (at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU General Public License for more details. + +You should have received a copy of the GNU General Public License +along with this program; if not, write to the Free Software +Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + +See COPYRIGHT and LICENSE files for more details. + +++#%> + + + <%= include_frontend_assets %> + + +<%= yield %> + + diff --git a/config/initializers/view_component.rb b/config/initializers/view_component.rb index 087ebd47e6ec..88f219239bc6 100644 --- a/config/initializers/view_component.rb +++ b/config/initializers/view_component.rb @@ -2,4 +2,5 @@ config.view_component.generate.preview_path = Rails.root.join("spec/components/previews").to_s config.view_component.preview_paths << Rails.root.join("spec/components/previews").to_s config.view_component.generate.preview = true + config.view_component.default_preview_layout = "component_preview" end diff --git a/frontend/angular.json b/frontend/angular.json index 265c4e82bf29..7a1e579627ff 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -40,6 +40,10 @@ "src/assets" ], "styles": [ + { + "input": "src/spot.scss", + "bundleName": "spot" + }, "src/styles.scss", "node_modules/codemirror/lib/codemirror.css", "node_modules/jquery-ui/themes/base/core.css", diff --git a/frontend/src/spot.scss b/frontend/src/spot.scss new file mode 100644 index 000000000000..d20d5913082a --- /dev/null +++ b/frontend/src/spot.scss @@ -0,0 +1,9 @@ +// SPOT variables +@import "src/assets/sass/_helpers.sass"; + +// Fonts +@import "src/global_styles/fonts/_index.sass"; + +// SPOT styles +@import "app/spot/styles/sass/common"; +@import "app/spot/styles/sass/components"; diff --git a/spec/components/docs/styles/06-icons.md.erb b/spec/components/docs/styles/06-icons.md.erb index 11e3323a9693..607dd3212af7 100644 --- a/spec/components/docs/styles/06-icons.md.erb +++ b/spec/components/docs/styles/06-icons.md.erb @@ -2,11 +2,17 @@ title: Icons --- +<%= include_spot_assets %> + # Icons Icons are used as visual indicators or small illustrations. They provide additional context when necessary. - + + + + + ## Design notes @@ -26,9 +32,15 @@ There are four pre-defined dimensions for icons: 12×12, 16×16, 20×20 and 24× The default size is 16×16. - + - + + This is a spot-link + + ## Available icons diff --git a/spec/components/icon_component_spec.rb b/spec/components/icon_component_spec.rb new file mode 100644 index 000000000000..eac713d91160 --- /dev/null +++ b/spec/components/icon_component_spec.rb @@ -0,0 +1,15 @@ +# frozen_string_literal: true + +require "rails_helper" + +RSpec.describe IconComponent, type: :component do + pending "add some examples to (or delete) #{__FILE__}" + + # it "renders something useful" do + # expect( + # render_inline(described_class.new(attr: "value")) { "Hello, components!" }.css("p").to_html + # ).to include( + # "Hello, components!" + # ) + # end +end diff --git a/spec/components/previews/icon_component_preview.rb b/spec/components/previews/icon_component_preview.rb new file mode 100644 index 000000000000..b418b6083c14 --- /dev/null +++ b/spec/components/previews/icon_component_preview.rb @@ -0,0 +1,15 @@ +# frozen_string_literal: true + +class IconComponentPreview < ViewComponent::Preview + + # Icon component + # ------------ + # Wrap an icon with the given name + # See [Icon page](/lookbook/pages/styles/icons) for available icons + # + # @param name + # @param classnames + def default(name: 'help1', classnames: '') + render(IconComponent.new(name:, classnames:)) + end +end From 0b6f980ae86af69822c0b60d7f3eb6ec3d9cc481 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20G=C3=BCnther?= Date: Mon, 29 May 2023 13:14:47 +0200 Subject: [PATCH 05/57] Add logo --- app/assets/images/icon_logo.svg | 56 +++++++++++++++++++ app/assets/images/icon_logo_white.svg | 6 ++ config/initializers/lookbook.rb | 4 +- .../default.html.erb | 0 4 files changed, 65 insertions(+), 1 deletion(-) create mode 100644 app/assets/images/icon_logo.svg create mode 100644 app/assets/images/icon_logo_white.svg create mode 100644 spec/components/previews/tooltip_component_preview/default.html.erb diff --git a/app/assets/images/icon_logo.svg b/app/assets/images/icon_logo.svg new file mode 100644 index 000000000000..8cfeda1fe4fb --- /dev/null +++ b/app/assets/images/icon_logo.svg @@ -0,0 +1,56 @@ + + + + + + image/svg+xml + + + + + + + + + diff --git a/app/assets/images/icon_logo_white.svg b/app/assets/images/icon_logo_white.svg new file mode 100644 index 000000000000..8cec02cbf056 --- /dev/null +++ b/app/assets/images/icon_logo_white.svg @@ -0,0 +1,6 @@ + + + + diff --git a/config/initializers/lookbook.rb b/config/initializers/lookbook.rb index 54e204baacf7..0ab0d67884b3 100644 --- a/config/initializers/lookbook.rb +++ b/config/initializers/lookbook.rb @@ -3,7 +3,9 @@ config.view_component.generate.preview_path = Rails.root.join("spec/components/previews").to_s config.view_component.preview_paths << Rails.root.join("spec/components/previews").to_s - config.lookbook.project_name = "OpenProject Lookbook" + config.lookbook.project_name = "OpenProject Design System" + config.lookbook.project_logo = File.read Rails.root.join('app/assets/images/icon_logo_white.svg') + config.lookbook.ui_favicon = File.read Rails.root.join('app/assets/images/icon_logo.svg') config.lookbook.page_paths = [Rails.root.join("spec/components/docs/").to_s] config.lookbook.ui_theme = "blue" diff --git a/spec/components/previews/tooltip_component_preview/default.html.erb b/spec/components/previews/tooltip_component_preview/default.html.erb new file mode 100644 index 000000000000..e69de29bb2d1 From 00e9dca8345e9bf1e30d8796bb0ef5324f44c3c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20G=C3=BCnther?= Date: Mon, 29 May 2023 13:14:55 +0200 Subject: [PATCH 06/57] Add tooltip component --- app/components/tooltip_component.html.erb | 6 ++++++ app/components/tooltip_component.rb | 10 ++++++++++ .../previews/tooltip_component_preview.rb | 6 ++++++ .../tooltip_component_preview/default.html.erb | 11 +++++++++++ spec/components/tooltip_component_spec.rb | 15 +++++++++++++++ 5 files changed, 48 insertions(+) create mode 100644 app/components/tooltip_component.html.erb create mode 100644 app/components/tooltip_component.rb create mode 100644 spec/components/previews/tooltip_component_preview.rb create mode 100644 spec/components/tooltip_component_spec.rb diff --git a/app/components/tooltip_component.html.erb b/app/components/tooltip_component.html.erb new file mode 100644 index 000000000000..e2ea57c9319a --- /dev/null +++ b/app/components/tooltip_component.html.erb @@ -0,0 +1,6 @@ + + <%= trigger %> +
+ <%= body %> +
+ diff --git a/app/components/tooltip_component.rb b/app/components/tooltip_component.rb new file mode 100644 index 000000000000..ba3d7d7f1ae0 --- /dev/null +++ b/app/components/tooltip_component.rb @@ -0,0 +1,10 @@ +# frozen_string_literal: true + +class TooltipComponent < ViewComponent::Base + renders_one :trigger + renders_one :body + + def initialize(alignment: 'bottom-center') + @alignment = alignment + end +end diff --git a/spec/components/previews/tooltip_component_preview.rb b/spec/components/previews/tooltip_component_preview.rb new file mode 100644 index 000000000000..e69a220cba5c --- /dev/null +++ b/spec/components/previews/tooltip_component_preview.rb @@ -0,0 +1,6 @@ +# frozen_string_literal: true + +class TooltipComponentPreview < ViewComponent::Preview + def default + end +end diff --git a/spec/components/previews/tooltip_component_preview/default.html.erb b/spec/components/previews/tooltip_component_preview/default.html.erb index e69de29bb2d1..493fa633b419 100644 --- a/spec/components/previews/tooltip_component_preview/default.html.erb +++ b/spec/components/previews/tooltip_component_preview/default.html.erb @@ -0,0 +1,11 @@ +<%= render TooltipComponent.new do |component| %> + <% component.with_trigger do %> + Hover me to see the tooltip + <% end %> + + <% component.with_body do %> + + Content of the tooltip + + <% end %> +<% end %> diff --git a/spec/components/tooltip_component_spec.rb b/spec/components/tooltip_component_spec.rb new file mode 100644 index 000000000000..dfa1e7586b2b --- /dev/null +++ b/spec/components/tooltip_component_spec.rb @@ -0,0 +1,15 @@ +# frozen_string_literal: true + +require "rails_helper" + +RSpec.describe TooltipComponent, type: :component do + pending "add some examples to (or delete) #{__FILE__}" + + # it "renders something useful" do + # expect( + # render_inline(described_class.new(attr: "value")) { "Hello, components!" }.css("p").to_html + # ).to include( + # "Hello, components!" + # ) + # end +end From 9fc4dd8c0c51878ec7d84a247cf57f86a4c740f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20G=C3=BCnther?= Date: Mon, 29 May 2023 16:56:40 +0200 Subject: [PATCH 07/57] Advanced filters preview --- .../content/_advanced_filters.lsg | 343 ----------------- .../previews/advanced_filters_preview.rb | 4 + .../advanced_filters_preview/default.html.erb | 348 +++++++++++++++++- 3 files changed, 341 insertions(+), 354 deletions(-) delete mode 100644 frontend/src/global_styles/content/_advanced_filters.lsg diff --git a/frontend/src/global_styles/content/_advanced_filters.lsg b/frontend/src/global_styles/content/_advanced_filters.lsg deleted file mode 100644 index d44da69818ec..000000000000 --- a/frontend/src/global_styles/content/_advanced_filters.lsg +++ /dev/null @@ -1,343 +0,0 @@ -# Advanced filters - -``` -@full-width - -
- Selected filters -
    -
  • - -
    - -
    -
    -
    - - - - - Enable multiselect - - - -
    -
    -
    - - - - Delete - - - -
    -
    • -
  • - -
    - -
    -
    -
    - - - - Enable multiselect - - - -
    -
    -
    - - - - Delete - - - -
    -
    • -
  • - -
    - -
    -
    -
    - -
    -
    -
    - - - - Delete - - - -
    -
    • -
  • - -
    - -
    -
    -
    - -
    -
    -
    - - - - Delete - - - -
    -
    • -
  • - -
    - -
    -
    -
    - - - - Disable multiselect - - - -
    -
    -
    - - - - Delete - - - -
    -
    • -
  • - -
    - -
    -
    -
    - - - - Enable multiselect - - - -
    -
    -
    - - - - Delete - - - -
    -
    • -
  • - -
    - -
    -
    -
    - - -
    -
    -
    - - - - Delete - - - -
    -
    • -
  • -
  • - -
    - -
    -
    • -
-
-``` diff --git a/spec/components/previews/advanced_filters_preview.rb b/spec/components/previews/advanced_filters_preview.rb index e69de29bb2d1..f5232c64c68d 100644 --- a/spec/components/previews/advanced_filters_preview.rb +++ b/spec/components/previews/advanced_filters_preview.rb @@ -0,0 +1,4 @@ +class AdvancedFiltersPreview < Lookbook::Preview + def default + end +end diff --git a/spec/components/previews/advanced_filters_preview/default.html.erb b/spec/components/previews/advanced_filters_preview/default.html.erb index 493fa633b419..081891fa21e0 100644 --- a/spec/components/previews/advanced_filters_preview/default.html.erb +++ b/spec/components/previews/advanced_filters_preview/default.html.erb @@ -1,11 +1,337 @@ -<%= render TooltipComponent.new do |component| %> - <% component.with_trigger do %> - Hover me to see the tooltip - <% end %> - - <% component.with_body do %> - - Content of the tooltip - - <% end %> -<% end %> +
+ Selected filters +
    +
  • + +
    + +
    +
    +
    + + + + + Enable multiselect + + + +
    +
    +
    + + + + Delete + + + +
    +
    • +
  • + +
    + +
    +
    +
    + + + + Enable multiselect + + + +
    +
    +
    + + + + Delete + + + +
    +
    • +
  • + +
    + +
    +
    +
    + +
    +
    +
    + + + + Delete + + + +
    +
    • +
  • + +
    + +
    +
    +
    + +
    +
    +
    + + + + Delete + + + +
    +
    • +
  • + +
    + +
    +
    +
    + + + + Disable multiselect + + + +
    +
    +
    + + + + Delete + + + +
    +
    • +
  • + +
    + +
    +
    +
    + + + + Enable multiselect + + + +
    +
    +
    + + + + Delete + + + +
    +
    • +
  • + +
    + +
    +
    +
    + + +
    +
    +
    + + + + Delete + + + +
    +
    • +
  • +
  • + +
    + +
    +
    • +
+
From f9da3fd302e4db0a9c62e98bbdc9eca88b7ac93f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20G=C3=BCnther?= Date: Mon, 29 May 2023 17:06:42 +0200 Subject: [PATCH 08/57] Toolbar preview --- .../src/global_styles/layout/_toolbar.lsg | 143 ------------------ .../previews/toolbar_component_preview.rb | 16 ++ .../default.html.erb | 21 +++ .../with_form_elements.html.erb | 38 +++++ .../with_labelled_form_elements.html.erb | 36 +++++ 5 files changed, 111 insertions(+), 143 deletions(-) delete mode 100644 frontend/src/global_styles/layout/_toolbar.lsg create mode 100644 spec/components/previews/toolbar_component_preview.rb create mode 100644 spec/components/previews/toolbar_component_preview/default.html.erb create mode 100644 spec/components/previews/toolbar_component_preview/with_form_elements.html.erb create mode 100644 spec/components/previews/toolbar_component_preview/with_labelled_form_elements.html.erb diff --git a/frontend/src/global_styles/layout/_toolbar.lsg b/frontend/src/global_styles/layout/_toolbar.lsg deleted file mode 100644 index daa8f28f23c6..000000000000 --- a/frontend/src/global_styles/layout/_toolbar.lsg +++ /dev/null @@ -1,143 +0,0 @@ -# Toolbar - -A toolbar that can and should be used for actions on the current view. Initially designed for the Work package list, this can be reused throughout the application. - -## Standard Button Bar - -``` -@full-width -
-
-
-

Title of the page

-
- -
-
-``` - -## Toolbar with form elements - -``` -@full-width -
-
-
-

Dragonball Z characters

-
-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - - - Add - -
    • -
-
-

now with extremely long subtitle: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste consequatur doloribus suscipit nemo temporibus deserunt alias incidunt doloremque officia rerum, nobis fuga, recusandae voluptatibus voluptatem tenetur repellendus itaque et. Eum.

-
-``` - -## Toolbar with affix form elements - -``` -@full-width -
-
-
-

Checkout information

-
-
    -
  • -
    - git clone -
    - -
    • -
  • - -
    - Read + Write -
    -
    • -
-
-
-``` - -## Toolbar with labelled form elements - -``` -@full-width -
-
-
-

Dragonball Z characters

-
-
    -
  • -
    - -
    - -
    • -
  • -
    - -
    - -
    • -
-
-

now with extremely long subtitle: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste consequatur doloribus suscipit nemo temporibus deserunt alias incidunt doloremque officia rerum, nobis fuga, recusandae voluptatibus voluptatem tenetur repellendus itaque et. Eum.

-
-``` diff --git a/spec/components/previews/toolbar_component_preview.rb b/spec/components/previews/toolbar_component_preview.rb new file mode 100644 index 000000000000..2d1938ceded0 --- /dev/null +++ b/spec/components/previews/toolbar_component_preview.rb @@ -0,0 +1,16 @@ +# frozen_string_literal: true + +class ToolbarComponentPreview < Lookbook::Preview + + # A toolbar that can and should be used for actions on the current view. + # Initially designed for the Work package list, this can be reused throughout the application. + + def default + end + + def with_form_elements + end + + def with_labelled_form_elements + end +end diff --git a/spec/components/previews/toolbar_component_preview/default.html.erb b/spec/components/previews/toolbar_component_preview/default.html.erb new file mode 100644 index 000000000000..635b2c7cb56f --- /dev/null +++ b/spec/components/previews/toolbar_component_preview/default.html.erb @@ -0,0 +1,21 @@ +
+
+
+

Title of the page

+
+ +
+
diff --git a/spec/components/previews/toolbar_component_preview/with_form_elements.html.erb b/spec/components/previews/toolbar_component_preview/with_form_elements.html.erb new file mode 100644 index 000000000000..d206baf26000 --- /dev/null +++ b/spec/components/previews/toolbar_component_preview/with_form_elements.html.erb @@ -0,0 +1,38 @@ +
+
+
+

Dragonball Z characters

+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + + + Add + +
    • +
+
+

now with extremely long subtitle: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste consequatur doloribus suscipit nemo temporibus deserunt alias incidunt doloremque officia rerum, nobis fuga, recusandae voluptatibus voluptatem tenetur repellendus itaque et. Eum.

+
diff --git a/spec/components/previews/toolbar_component_preview/with_labelled_form_elements.html.erb b/spec/components/previews/toolbar_component_preview/with_labelled_form_elements.html.erb new file mode 100644 index 000000000000..982dd29c8c12 --- /dev/null +++ b/spec/components/previews/toolbar_component_preview/with_labelled_form_elements.html.erb @@ -0,0 +1,36 @@ +
+
+
+

Dragonball Z characters

+
+
    +
  • +
    + +
    + +
    • +
  • +
    + +
    + +
    • +
+
+

now with extremely long subtitle: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste consequatur doloribus suscipit nemo temporibus deserunt alias incidunt doloremque officia rerum, nobis fuga, recusandae voluptatibus voluptatem tenetur repellendus itaque et. Eum.

+
From 148ed8ad71c25784f2d1ac1c20cdff0252da0ee7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20G=C3=BCnther?= Date: Mon, 29 May 2023 17:54:04 +0200 Subject: [PATCH 09/57] Font examples --- frontend/src/global_styles/fonts/_index.lsg | 8 - frontend/src/global_styles/fonts/_lato.lsg | 20 -- .../fonts/_openproject_icon_font.lsg | 297 ------------------ .../docs/styles/01-typography.md.erb | 112 ++++++- 4 files changed, 105 insertions(+), 332 deletions(-) delete mode 100644 frontend/src/global_styles/fonts/_index.lsg delete mode 100644 frontend/src/global_styles/fonts/_lato.lsg delete mode 100644 frontend/src/global_styles/fonts/_openproject_icon_font.lsg diff --git a/frontend/src/global_styles/fonts/_index.lsg b/frontend/src/global_styles/fonts/_index.lsg deleted file mode 100644 index 99cc225054f2..000000000000 --- a/frontend/src/global_styles/fonts/_index.lsg +++ /dev/null @@ -1,8 +0,0 @@ -# Typography - -Typography is divided into content and UI, depending on where the styles are applied. - -Content refers to user generated information, such as wiki-syntax based entries, e.g. the description of a work package - -UI is everything relating to the application itself. - diff --git a/frontend/src/global_styles/fonts/_lato.lsg b/frontend/src/global_styles/fonts/_lato.lsg deleted file mode 100644 index eb0f71857ed8..000000000000 --- a/frontend/src/global_styles/fonts/_lato.lsg +++ /dev/null @@ -1,20 +0,0 @@ -# Fonts - -## Lato - -*Lato* for headlines: - -~~~ -@font-example 32px Lato -ABCDEFGHIJKLMNOPQRSTUVWXYZÄÖÜ -~~~ - -*Lato* for normal/small text: - -~~~ -@font-example bold 14px Lato -~~~ - -~~~ -@font-example 14px Lato -~~~ diff --git a/frontend/src/global_styles/fonts/_openproject_icon_font.lsg b/frontend/src/global_styles/fonts/_openproject_icon_font.lsg deleted file mode 100644 index 824ec6ccd03b..000000000000 --- a/frontend/src/global_styles/fonts/_openproject_icon_font.lsg +++ /dev/null @@ -1,297 +0,0 @@ -## OpenProject Icon Font - -*OpenProject Icon Font* for icons: - -
    -
  • accessibility
    • -
  • accountable
    • -
  • activity-history
    • -
  • add-attachment
    • -
  • add-link
    • -
  • add
    • -
  • align-center
    • -
  • align-justify
    • -
  • align-left
    • -
  • align-right
    • -
  • arrow-down1
    • -
  • arrow-down2
    • -
  • arrow-left-right
    • -
  • arrow-left1
    • -
  • arrow-left2
    • -
  • arrow-left3
    • -
  • arrow-left4
    • -
  • arrow-right2
    • -
  • arrow-right3
    • -
  • arrow-right4
    • -
  • arrow-right5
    • -
  • arrow-right6
    • -
  • arrow-right7
    • -
  • arrow-thin
    • -
  • arrow-up1
    • -
  • arrow-up2
    • -
  • assigned-to-me
    • -
  • assigned
    • -
  • attachment
    • -
  • attention
    • -
  • back-up
    • -
  • backlogs
    • -
  • baseline
    • -
  • bcf
    • -
  • bell
    • -
  • billing-information
    • -
  • boards
    • -
  • bold
    • -
  • budget
    • -
  • bug
    • -
  • calendar
    • -
  • calendar2
    • -
  • camera
    • -
  • cancel-circle
    • -
  • cancel
    • -
  • cart
    • -
  • changeset-down
    • -
  • changeset-up
    • -
  • changeset
    • -
  • chart1
    • -
  • chart2
    • -
  • chart3
    • -
  • checkmark-circle
    • -
  • checkmark
    • -
  • close
    • -
  • code-tag
    • -
  • color-text
    • -
  • color-underline
    • -
  • column-left
    • -
  • column-right
    • -
  • columns
    • -
  • compare2
    • -
  • concept
    • -
  • console-light
    • -
  • console
    • -
  • contacts
    • -
  • copy
    • -
  • cost-reports
    • -
  • cost-types
    • -
  • cursor
    • -
  • custom-development
    • -
  • custom-fields
    • -
  • cut
    • -
  • date-alert
    • -
  • date-alerts
    • -
  • delete-folder
    • -
  • delete
    • -
  • dependency
    • -
  • design
    • -
  • double-arrow-left
    • -
  • double-arrow-right
    • -
  • download-arrow
    • -
  • download
    • -
  • drag-handle
    • -
  • dropdown-open
    • -
  • dropdown
    • -
  • duplicate
    • -
  • edit
    • -
  • email-alert
    • -
  • enterprise-addons
    • -
  • enterprise
    • -
  • enumerations
    • -
  • error
    • -
  • export-atom
    • -
  • export-bcf
    • -
  • export-csv
    • -
  • export-pdf-descr
    • -
  • export-pdf-with-descriptions
    • -
  • export-pdf
    • -
  • export-xls-descr
    • -
  • export-xls-with-descriptions
    • -
  • export-xls-with-relations
    • -
  • export-xls
    • -
  • export
    • -
  • external-link
    • -
  • faq
    • -
  • file-doc
    • -
  • file-form
    • -
  • file-presentation
    • -
  • file-sheet
    • -
  • file-text
    • -
  • filter
    • -
  • flag
    • -
  • folder-add
    • -
  • folder-locked
    • -
  • folder-open
    • -
  • folder-remove
    • -
  • folder
    • -
  • forums
    • -
  • from-fullscreen
    • -
  • getting-started
    • -
  • glossar
    • -
  • google-plus
    • -
  • group-by
    • -
  • group
    • -
  • hamburger
    • -
  • headline1
    • -
  • headline2
    • -
  • headline3
    • -
  • headset
    • -
  • help
    • -
  • help1
    • -
  • help2
    • -
  • hierarchy
    • -
  • home
    • -
  • hosting
    • -
  • ifc
    • -
  • image1
    • -
  • image2
    • -
  • import
    • -
  • inbox
    • -
  • info1
    • -
  • info2
    • -
  • input-disabled
    • -
  • installation-services
    • -
  • italic
    • -
  • key
    • -
  • link
    • -
  • loading1
    • -
  • loading2
    • -
  • location
    • -
  • locked
    • -
  • logout
    • -
  • mail1
    • -
  • mail2
    • -
  • maintenance-support
    • -
  • mark-all-read
    • -
  • mark-read
    • -
  • medal
    • -
  • meetings
    • -
  • mention
    • -
  • menu
    • -
  • merge-branch
    • -
  • microphone
    • -
  • milestone
    • -
  • minus1
    • -
  • minus2
    • -
  • mobile
    • -
  • modules
    • -
  • more
    • -
  • move
    • -
  • movie
    • -
  • music
    • -
  • new-planning-element
    • -
  • news
    • -
  • nextcloud-circle
    • -
  • nextcloud
    • -
  • no-hierarchy
    • -
  • no-zen-mode
    • -
  • not-supported
    • -
  • notes
    • -
  • openid
    • -
  • openproject
    • -
  • ordered-list
    • -
  • outline
    • -
  • paragraph-left
    • -
  • paragraph-right
    • -
  • paragraph
    • -
  • payment-history
    • -
  • phone
    • -
  • pin
    • -
  • play
    • -
  • plugins
    • -
  • plus
    • -
  • pre
    • -
  • presentation
    • -
  • preview
    • -
  • print
    • -
  • priority
    • -
  • project-types
    • -
  • projects
    • -
  • publish
    • -
  • pulldown-up
    • -
  • pulldown
    • -
  • quote
    • -
  • quote2
    • -
  • redo
    • -
  • relation-follows
    • -
  • relation-new-child
    • -
  • relation-precedes
    • -
  • relations
    • -
  • reload
    • -
  • reminder
    • -
  • remove-link
    • -
  • remove
    • -
  • rename
    • -
  • reported-by-me
    • -
  • resizer-bottom-right
    • -
  • resizer-vertical-lines
    • -
  • roadmap
    • -
  • rss
    • -
  • rubber
    • -
  • save
    • -
  • search
    • -
  • select-all
    • -
  • send-mail
    • -
  • server-key
    • -
  • settings
    • -
  • settings2
    • -
  • settings3
    • -
  • settings4
    • -
  • shortcuts
    • -
  • show-all-projects
    • -
  • show-more-horizontal
    • -
  • show-more
    • -
  • slack
    • -
  • sort-ascending
    • -
  • sort-by
    • -
  • sort-descending
    • -
  • sort-down
    • -
  • sort-up
    • -
  • square
    • -
  • star
    • -
  • status-reporting
    • -
  • status
    • -
  • strike-through
    • -
  • team-planner
    • -
  • text
    • -
  • ticket-checked
    • -
  • ticket-down
    • -
  • ticket-edit
    • -
  • ticket-minus
    • -
  • ticket-note
    • -
  • ticket
    • -
  • time
    • -
  • to-fullscreen
    • -
  • training-consulting
    • -
  • two-factor-authentication
    • -
  • types
    • -
  • underline
    • -
  • undo
    • -
  • unit
    • -
  • unlocked
    • -
  • unordered-list
    • -
  • unwatched
    • -
  • upload-arrow
    • -
  • upload
    • -
  • user-minus
    • -
  • user-plus
    • -
  • user
    • -
  • view-card
    • -
  • view-fullscreen
    • -
  • view-list
    • -
  • view-model
    • -
  • view-split-viewer-table
    • -
  • view-split
    • -
  • view-split2
    • -
  • view-timeline
    • -
  • warning
    • -
  • watched
    • -
  • watching
    • -
  • wiki-edit
    • -
  • wiki
    • -
  • wiki2
    • -
  • work-packages
    • -
  • workflow
    • -
  • yes
    • -
  • zen-mode
    • -
  • zoom-auto
    • -
  • zoom-in
    • -
  • zoom-out
    • -
diff --git a/spec/components/docs/styles/01-typography.md.erb b/spec/components/docs/styles/01-typography.md.erb index 9982bb49bc3b..f6fade140af8 100644 --- a/spec/components/docs/styles/01-typography.md.erb +++ b/spec/components/docs/styles/01-typography.md.erb @@ -2,6 +2,8 @@ title: Typography --- +<%= include_spot_assets %> + OpenProject uses the "[Lato Sans](https://github.com/latofonts/lato-source)" typeface created by Adam Twardoch, Botio Nikoltchev, and Łukasz Dziedzic (released with the [SIL Open Font license](https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL)). There are 7 sizes, each with between three and eight variations. @@ -26,13 +28,37 @@ This is a larger header than the default, used in rare occasions where a header So far, zero recorded use. Might get removed if this style is not used in until mid-2022. -> Code example here +
+

+ Aa +
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ +
+ abcdefghijklmnopqrstuvwxyz +
+ 0123456789 ! ? & / ( ) € $ £ ¥ ¢ = @ ; : , . +

+
+ + ## Header Small This is the default type used for page headers. "Bold" is default and is almost always preferred, unless there is a need to use regular to distinguish additional or supporting information. -> Code example here +
+

+ Aa +
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ +
+ abcdefghijklmnopqrstuvwxyz +
+ 0123456789 ! ? & / ( ) € $ £ ¥ ¢ = @ ; : , . +

+
+ + ## Subheader Big @@ -40,23 +66,71 @@ Very rarely used. Used if we need a header small than the regular header but sti So far, zero recorded use. Might get removed if this style is not used in until mid-2022. -> Code example here +
+

+ Aa +
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ +
+ abcdefghijklmnopqrstuvwxyz +
+ 0123456789 ! ? & / ( ) € $ £ ¥ ¢ = @ ; : , . +

+
+ + ## Subheader Small Very rarely used. Used if we need a header small than the regular header but still distinct from body text. +
+

+ Aa +
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ +
+ abcdefghijklmnopqrstuvwxyz +
+ 0123456789 ! ? & / ( ) € $ £ ¥ ¢ = @ ; : , . +

+
+ + + ## Subheader Extra Small This is really an alias of _Body Small/Bold_ when this style is used as a header (in some modals) instead of body text. -> Code example here +
+

+ Aa +
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ +
+ abcdefghijklmnopqrstuvwxyz +
+ 0123456789 ! ? & / ( ) € $ £ ¥ ¢ = @ ; : , . +

+
+ + ## Body Big Used occasionally (where?) -> Code example here +
+

+ Aa +
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ +
+ abcdefghijklmnopqrstuvwxyz +
+ 0123456789 ! ? & / ( ) € $ £ ¥ ¢ = @ ; : , . +

+
## Body Small @@ -76,7 +150,19 @@ The bold version is used in: - Calendar header - Sidebar header -> Code example here +**Example** + +
+

+ Aa +
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ +
+ abcdefghijklmnopqrstuvwxyz +
+ 0123456789 ! ? & / ( ) € $ £ ¥ ¢ = @ ; : , . +

+
## Caption @@ -93,5 +179,17 @@ The bold version is used in: - Sidebar tabs -> Code example here +**Example** + +
+

+ Aa +
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ +
+ abcdefghijklmnopqrstuvwxyz +
+ 0123456789 ! ? & / ( ) € $ £ ¥ ¢ = @ ; : , . +

+
From 0a01a5f5eee4c348cc142b336931d36d5d45f9a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20G=C3=BCnther?= Date: Mon, 29 May 2023 17:57:27 +0200 Subject: [PATCH 10/57] Remove unneeded lsgs --- frontend/src/global_styles/content/_user.lsg | 26 -- frontend/src/global_styles/content/_wiki.lsg | 358 ---------------- .../work_packages/tabs/_activities.lsg | 389 ------------------ .../previews/widget_component_preview.rb | 16 + .../widget_component_preview/default.html.erb | 11 + 5 files changed, 27 insertions(+), 773 deletions(-) delete mode 100644 frontend/src/global_styles/content/_user.lsg delete mode 100644 frontend/src/global_styles/content/_wiki.lsg delete mode 100644 frontend/src/global_styles/content/work_packages/tabs/_activities.lsg create mode 100644 spec/components/previews/widget_component_preview.rb create mode 100644 spec/components/previews/widget_component_preview/default.html.erb diff --git a/frontend/src/global_styles/content/_user.lsg b/frontend/src/global_styles/content/_user.lsg deleted file mode 100644 index deda13d98832..000000000000 --- a/frontend/src/global_styles/content/_user.lsg +++ /dev/null @@ -1,26 +0,0 @@ -# User Avatars - -``` - -Standard:
- -

-Standard Mini:
- -

-Default:
-
OA
-

-Default Medium:
-
OA
-

-Default Mini:
-
OA
-

-Gravatar:
- -

-Gravatar Mini:
- - -``` diff --git a/frontend/src/global_styles/content/_wiki.lsg b/frontend/src/global_styles/content/_wiki.lsg deleted file mode 100644 index d8fbd25e410b..000000000000 --- a/frontend/src/global_styles/content/_wiki.lsg +++ /dev/null @@ -1,358 +0,0 @@ -# Wiki - -Wiki-syntax is used for most textarea-fields within OpenProject. The users have several options to style text. - -## Container - -``` -
- -
-``` - -## Paragraph - -``` -
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit sed cum quam obcaecati eius nisi tenetur tempora odio minus nulla rerum hic, itaque nam dolorum vel fuga quibusdam, praesentium unde!

- -

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

- -

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

- -

Right aligned - Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

- -

Centered - Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

-
-``` - -## Headings - -``` -
-

- Headline H1 - -

- -

- Headline H2 - -

- -

- Headline H3 - -

- -

- Headline H4 - -

- -
- Headline H5 -
- -
- Headline H6 -
-
-``` - -Note: Only headings to level ***three*** are supported in the wiki toolbar at the moment. Up to level ***four***, an anchor link is added. - -## Table of contents - -``` -
-
- - Table of Contents - -
- -
-
-
-``` - - -Note: Only headings to level ***four*** are considered in the table of contents. - - -## Font styles - -``` -
-

- Strong -

-

- Emphasis -

-

- Inserted -

-

- Deleted -

-

- StrongEmphasis -

-

- Bold -

-

- Italic -

-

- Citation -

-

- Superscript -

-

- Subscript -

-
-``` - -## Inline code - -``` -
- - function Y(f) { - var p = function(h) { - return function(x) { - return f(h(h))(x); - }; - }; - return p(p); - } - -
-``` - -## Preformatted Text - -``` -
- 
-  This     is      very
-
-          formatted
-              text
-
-
-``` - -## Unordered List - -``` -
-
    -
  • Item 1
    • -
  • Item 2 -
      -
    • Subitem 1
      • -
    • - Subitem 2 - -
        -
      • Subsubitem 1
        • -
      • Subsubitem 2
        • -
      • Subsubitem 3
        • -
      -
      • -
    -
    • -
  • Item 3
    • -
-
-``` - -## Ordered List - -``` -
-
    -
  1. Item
    2. -
  2. Item -
      -
    1. Subitem
      2. -
    2. SubItem -
        -
      1. Subsubitem
        2. -
      2. SubsubItem
        3. -
      3. SubsubItem
        4. -
      -
      3. -
    3. SubItem
      4. -
    -
    3. -
  3. Item
    4. -
-
-``` - -## Blockquote - -``` -
-
-

- The good news is that you're going to live. The bad news is that he is here to kill you. -

-
-
-``` - -## Link - -``` -
-

External link

-

Internal link

-

Wiki link

-

Version link

-

Message link

-

Project link

-

Changeset link

-

Attachment link

-

Source download link

-

Source link

-
-``` - -Links to work packages come in various alternatives: - -* only the ID - -``` -
-

#56

-
-``` - -* ID with a description - -``` -
-

Bug #56 on hold: Work Package link without description 2015-03-27 – 2015-04-30

-
-``` - -* ID with description, assignee and responsible and additionally parts of the description - -``` -
-

Bug #56 on hold: Work Package link with description 2015-03-27 – 2015-04-30

-
Responsible: Ulices Volkman
Assignee: Danika O'Keefe
-

Accedo asporto cicuta cribro canto totam molestias quis. Speculum arma desolo nam volo. Vorago explicabo aut arx. Adficio voluptates qui voluptas. Crur annus consequatur cedo vestrum comminor. Demum sollers bis arcesso dolores agnitio defaeco curso. Copia adversus via appono damno ut territo sed.

-
-``` - -## Image - -``` - - -
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit sed cum quam obcaecati eius nisi tenetur tempora odio minus nulla rerum hic, itaque nam dolorum vel fuga quibusdam, praesentium unde!

- -
- -
- -

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

-
-``` - -## Table - -``` -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 		Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
-
-``` diff --git a/frontend/src/global_styles/content/work_packages/tabs/_activities.lsg b/frontend/src/global_styles/content/work_packages/tabs/_activities.lsg deleted file mode 100644 index a05beb038a1e..000000000000 --- a/frontend/src/global_styles/content/work_packages/tabs/_activities.lsg +++ /dev/null @@ -1,389 +0,0 @@ -# Work Packages - [Details Pane] - Activities - -``` -
-
-

- March 19, 2014 - - Show activities with comments only - -

-
- Avatar - - OpenProject Admin - - - updated on - - 03/19/2014 - 4:38 PM - - -
- - #1 - -
- - -
-
-
- - - -
    -
  • - - Custom Integer - changed from - 12442234 - to - 34 - -
    • -
-
-
-
-
-

- April 30, 2014 -

-
- Avatar - - OpenProject Admin - - - updated on - - 04/30/2014 - 9:40 AM - - -
- - #2 - -
- - -
-
-
- - - -
    -
  • - - Type - changed from - Support - to - Bug - -
    • -
-
-
-
-
-

- July 11, 2014 -

-
- Avatar - - OpenProject Admin - - - updated on - - 07/11/2014 - 4:27 PM - - -
- - #3 - -
- - -
-
-
- - -

This is an example wiki text.

- - -
-
-
-
-
- Avatar - - OpenProject Admin - - - updated on - - 07/11/2014 - 4:27 PM - - -
- - #4 - -
- - -
-
-
- - - -
    -
  • - - Description - set (Details) - -
    • -
-
-
-
-
-

- August 21, 2014 -

-
- Avatar - - OpenProject Admin - - - updated on - - 08/21/2014 - 11:03 AM - - -
- - #5 - -
- - -
-
-
- - - -
    -
  • - - Parent - set to - molestias officia beatae aut et sunt ut labore - -
    • -
-
-
-
-
-
- Avatar - - OpenProject Admin - - - updated on - - 08/21/2014 - 11:05 AM - - -
- - #6 - -
- - -
-
-
- - - -
    -
  • - - Parent - deleted ( - molestias officia beatae aut et sunt ut labore - ) - -
    • -
-
-
-
-
-

- September 2, 2014 -

-
- Avatar - - OpenProject Admin - - - updated on - - 09/02/2014 - 8:50 AM - - -
- - #12 - -
- - -
-
-
- - - -
    -
  • - - Subject - changed from - Nothing important - to - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed felis metus, lobortis eget nisi id, scelerisque sagittis eros. Duis eget tempor risus, id sagittis nisi. In accumsan sapien sed scelerisque mattis. Sed bibendum condimentum magna eget vestibulum. Etiam bibendum, justo vitae efficitur placerat, justo lorem bibendum eros, et mattis diam diam eget urna. Aenean id magna pharetra, auctor dui ut, ultrices turpis. Duis eu massa non libero dictum vestibulum et consectetur diam. Sed varius nisl leo, vitae auctor velit imperdiet in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse at odio lorem. In at iaculis dui, a convallis nibh. Vivamus rhoncus arcu quis purus euismod rutrum. Morbi a metus vitae metus finibus venenatis. - -
    • -
-
-
-
-
-
- Avatar - - OpenProject Admin - - - updated on - - 09/02/2014 - 8:51 AM - - -
- - #13 - -
- - -
-
-
- - - -
    -
  • - - Custom User - set to - Zena Labadie - -
    • -
  • - - Custom Description - changed from - QUAS - to - QUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUAS QUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUAS - -
    • -
-
-
-
-
-

- September 12, 2014 -

-
- Avatar - - OpenProject Admin - - - updated on - - 09/12/2014 - 8:49 AM - - -
- - #14 - -
- - -
-
-
- - - -
    -
  • - - Description - changed (Details) - -
    • -
  • - - Assignee - set to - Deron Feil - -
    • -
  • - - Responsible - set to - Zena Labadie - -
    • -
-
-
-
-``` diff --git a/spec/components/previews/widget_component_preview.rb b/spec/components/previews/widget_component_preview.rb new file mode 100644 index 000000000000..2d1938ceded0 --- /dev/null +++ b/spec/components/previews/widget_component_preview.rb @@ -0,0 +1,16 @@ +# frozen_string_literal: true + +class ToolbarComponentPreview < Lookbook::Preview + + # A toolbar that can and should be used for actions on the current view. + # Initially designed for the Work package list, this can be reused throughout the application. + + def default + end + + def with_form_elements + end + + def with_labelled_form_elements + end +end diff --git a/spec/components/previews/widget_component_preview/default.html.erb b/spec/components/previews/widget_component_preview/default.html.erb new file mode 100644 index 000000000000..493fa633b419 --- /dev/null +++ b/spec/components/previews/widget_component_preview/default.html.erb @@ -0,0 +1,11 @@ +<%= render TooltipComponent.new do |component| %> + <% component.with_trigger do %> + Hover me to see the tooltip + <% end %> + + <% component.with_body do %> + + Content of the tooltip + + <% end %> +<% end %> From 3ba4c7eb77fb7e73363e58980ab815e2220cb67b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20G=C3=BCnther?= Date: Mon, 29 May 2023 17:57:32 +0200 Subject: [PATCH 11/57] Add widget preview --- .../src/global_styles/content/_widget_box.lsg | 108 ----------------- .../previews/widget_component_preview.rb | 13 +- .../widget_component_preview/default.html.erb | 111 ++++++++++++++++-- 3 files changed, 102 insertions(+), 130 deletions(-) delete mode 100644 frontend/src/global_styles/content/_widget_box.lsg diff --git a/frontend/src/global_styles/content/_widget_box.lsg b/frontend/src/global_styles/content/_widget_box.lsg deleted file mode 100644 index 497f1c05b1e9..000000000000 --- a/frontend/src/global_styles/content/_widget_box.lsg +++ /dev/null @@ -1,108 +0,0 @@ -# Widget Boxes - -``` -@full-width - -
-
- - -
-

-
-

Widget Box

-
-

-

This widget box can be used to display content belonging to one subject.

- -
- - -
-

-
-

Widget Box 2

-
-

- -
- - -
-

-
-

Widget Box 3

-
-

-
-

- Lorem ipsum dolor sit amet, his ei propriae suscipit. - Sit in atqui accumsan ponderum, eum ut luptatum lobortis, has ei tota illud detraxit. -

-
-
- - - Edit - -
-
- - -
-

-
-

Widget Box 4

-
-

-
    -
  • Enum1
    • -
  • Enum2
    • -
  • Enum3
    • -
-
- - - Add - - - View all - -
-
- -
-
-``` diff --git a/spec/components/previews/widget_component_preview.rb b/spec/components/previews/widget_component_preview.rb index 2d1938ceded0..28638b3f2212 100644 --- a/spec/components/previews/widget_component_preview.rb +++ b/spec/components/previews/widget_component_preview.rb @@ -1,16 +1,7 @@ # frozen_string_literal: true -class ToolbarComponentPreview < Lookbook::Preview - - # A toolbar that can and should be used for actions on the current view. - # Initially designed for the Work package list, this can be reused throughout the application. - +# @label Widget boxes +class WidgetComponentPreview < Lookbook::Preview def default end - - def with_form_elements - end - - def with_labelled_form_elements - end end diff --git a/spec/components/previews/widget_component_preview/default.html.erb b/spec/components/previews/widget_component_preview/default.html.erb index 493fa633b419..9970042f8751 100644 --- a/spec/components/previews/widget_component_preview/default.html.erb +++ b/spec/components/previews/widget_component_preview/default.html.erb @@ -1,11 +1,100 @@ -<%= render TooltipComponent.new do |component| %> - <% component.with_trigger do %> - Hover me to see the tooltip - <% end %> - - <% component.with_body do %> - - Content of the tooltip - - <% end %> -<% end %> +
+ + +
+

+
+

Widget Box

+
+

+

This widget box can be used to display content belonging to one subject.

+ +
+ + +
+

+
+

Widget Box 2

+
+

+ +
+ + +
+

+
+

Widget Box 3

+
+

+
+

+ Lorem ipsum dolor sit amet, his ei propriae suscipit. + Sit in atqui accumsan ponderum, eum ut luptatum lobortis, has ei tota illud detraxit. +

+
+
+ + + Edit + +
+
+ + +
+

+
+

Widget Box 4

+
+

+
    +
  • Enum1
    • +
  • Enum2
    • +
  • Enum3
    • +
+
+ + + Add + + + View all + +
+
+ +
From 498b6661614b346019ab2913df6f5251ac1777cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20G=C3=BCnther?= Date: Mon, 29 May 2023 20:27:29 +0200 Subject: [PATCH 12/57] Add switch component --- app/components/switch_component.html.erb | 8 ++++++++ app/components/switch_component.rb | 9 +++++++++ frontend/src/app/core/setup/init-locale.ts | 8 ++++---- .../src/app/core/top-menu/top-menu.service.ts | 18 ++++++++++-------- .../components/switch/switch.component.html | 2 +- .../spot/components/switch/switch.component.ts | 17 ++++++++++++++++- frontend/src/main.ts | 4 ++-- .../previews/switch_component_preview.rb | 17 +++++++++++++++++ spec/components/switch_component_spec.rb | 15 +++++++++++++++ 9 files changed, 82 insertions(+), 16 deletions(-) create mode 100644 app/components/switch_component.html.erb create mode 100644 app/components/switch_component.rb create mode 100644 spec/components/previews/switch_component_preview.rb create mode 100644 spec/components/switch_component_spec.rb diff --git a/app/components/switch_component.html.erb b/app/components/switch_component.html.erb new file mode 100644 index 000000000000..0eca0c64768e --- /dev/null +++ b/app/components/switch_component.html.erb @@ -0,0 +1,8 @@ +<%= helpers.angular_component_tag( + 'spot-switch', + inputs: { + name: @name, + checked: @checked, + disabled: @disabled + }.compact + ) -%> diff --git a/app/components/switch_component.rb b/app/components/switch_component.rb new file mode 100644 index 000000000000..03830955e3eb --- /dev/null +++ b/app/components/switch_component.rb @@ -0,0 +1,9 @@ +# frozen_string_literal: true + +class SwitchComponent < ViewComponent::Base + def initialize(checked: false, disabled: false, name: nil) + @checked = checked + @disabled = disabled + @name = name + end +end diff --git a/frontend/src/app/core/setup/init-locale.ts b/frontend/src/app/core/setup/init-locale.ts index 9dd9e0df175d..2df19e53854f 100644 --- a/frontend/src/app/core/setup/init-locale.ts +++ b/frontend/src/app/core/setup/init-locale.ts @@ -29,10 +29,10 @@ import * as moment from 'moment'; export function initializeLocale() { - const meta = document.querySelector('meta[name=openproject_initializer]') as HTMLMetaElement; - const locale = meta.dataset.locale || 'en'; - const firstDayOfWeek = parseInt(meta.dataset.firstdayofweek || '', 10); // properties of meta.dataset are exposed in lowercase - const firstWeekOfYear = parseInt(meta.dataset.firstweekofyear || '', 10); // properties of meta.dataset are exposed in lowercase + const meta = document.querySelector('meta[name=openproject_initializer]'); + const locale = meta?.dataset.locale || 'en'; + const firstDayOfWeek = parseInt(meta?.dataset.firstdayofweek || '', 10); // properties of meta.dataset are exposed in lowercase + const firstWeekOfYear = parseInt(meta?.dataset.firstweekofyear || '', 10); // properties of meta.dataset are exposed in lowercase I18n.locale = locale; diff --git a/frontend/src/app/core/top-menu/top-menu.service.ts b/frontend/src/app/core/top-menu/top-menu.service.ts index c37ff62f7cea..a8998f3af7a2 100644 --- a/frontend/src/app/core/top-menu/top-menu.service.ts +++ b/frontend/src/app/core/top-menu/top-menu.service.ts @@ -44,7 +44,7 @@ export class TopMenuService { private menuIsOpen = false; - private menuContainer = this.document.querySelector('.op-app-header') as HTMLElement; + private menuContainer = this.document.querySelector('.op-app-header'); private active$ = new BehaviorSubject(null); @@ -73,7 +73,7 @@ export class TopMenuService { private skipContentClickListener():void { // Skip menu on content const skipLink = this.document.querySelector('#skip-navigation--content') as HTMLElement; - skipLink.addEventListener('click', () => { + skipLink?.addEventListener('click', () => { // Skip to the breadcrumb or the first link in the toolbar or the first link in the content (homescreen) const selectors = '.first-breadcrumb-element a, .toolbar-container a:first-of-type, #content a:first-of-type'; const visibleLink = jQuery(selectors) @@ -114,12 +114,12 @@ export class TopMenuService { private stopHover():void { this.hover = false; - this.menuContainer.classList.remove('hover'); + this.menuContainer?.classList.remove('hover'); } private startHover():void { this.hover = true; - this.menuContainer.classList.add('hover'); + this.menuContainer?.classList.add('hover'); } private closeAllItems():void { @@ -141,12 +141,14 @@ export class TopMenuService { }, true); } - private openDropdowns():NodeListOf { - return this.menuContainer.querySelectorAll('.op-app-menu--item_dropdown-open'); + private openDropdowns():HTMLElement[] { + const elements = this.menuContainer?.querySelectorAll('.op-app-menu--item_dropdown-open'); + return elements ? Array.from(elements) : []; } - private dropdowns():NodeListOf { - return this.menuContainer.querySelectorAll('.op-app-menu--item_has-dropdown'); + private dropdowns():HTMLElement[] { + const elements = this.menuContainer?.querySelectorAll('.op-app-menu--item_has-dropdown'); + return elements ? Array.from(elements) : []; } private setupDropdownClick():void { diff --git a/frontend/src/app/spot/components/switch/switch.component.html b/frontend/src/app/spot/components/switch/switch.component.html index 637a1c81a4ff..b05590ffb64f 100644 --- a/frontend/src/app/spot/components/switch/switch.component.html +++ b/frontend/src/app/spot/components/switch/switch.component.html @@ -5,7 +5,7 @@ [disabled]="disabled" [tabindex]="tabindex" [ngModel]="checked" - (ngModelChange)="onToggle($event)" + (change)="onToggle($event)" #input /> ('meta[name="openproject_initializer"]'); +const ASSET_HOST = initializer?.dataset.assetHost ? `//${initializer.dataset.assetHost}` : ''; // Ensure to set the asset base for dynamic code loading // https://webpack.js.org/guides/public-path/ diff --git a/spec/components/previews/switch_component_preview.rb b/spec/components/previews/switch_component_preview.rb new file mode 100644 index 000000000000..36a43aea8650 --- /dev/null +++ b/spec/components/previews/switch_component_preview.rb @@ -0,0 +1,17 @@ +# frozen_string_literal: true + +class SwitchComponentPreview < ViewComponent::Preview + + # This component describes only the actual switch, without the label. + # For the full component, please refer to Selector field component, which provides a label. + # @param checked toggle + # @param disabled toggle + def default(checked: false, disabled: false) + render(SwitchComponent.new(checked:, disabled:)) + end + + # @param checked toggle + def disabled(checked: true) + render(SwitchComponent.new(checked:, disabled: true)) + end +end diff --git a/spec/components/switch_component_spec.rb b/spec/components/switch_component_spec.rb new file mode 100644 index 000000000000..6f7fbbd2ab74 --- /dev/null +++ b/spec/components/switch_component_spec.rb @@ -0,0 +1,15 @@ +# frozen_string_literal: true + +require "rails_helper" + +RSpec.describe SwitchComponent, type: :component do + pending "add some examples to (or delete) #{__FILE__}" + + # it "renders something useful" do + # expect( + # render_inline(described_class.new(attr: "value")) { "Hello, components!" }.css("p").to_html + # ).to include( + # "Hello, components!" + # ) + # end +end From 75c8daae59dd193090229c60cc0abce9bf2f997a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20G=C3=BCnther?= Date: Mon, 29 May 2023 20:30:49 +0200 Subject: [PATCH 13/57] Show notes first --- config/initializers/lookbook.rb | 2 ++ 1 file changed, 2 insertions(+) diff --git a/config/initializers/lookbook.rb b/config/initializers/lookbook.rb index 0ab0d67884b3..0c445c19a8e4 100644 --- a/config/initializers/lookbook.rb +++ b/config/initializers/lookbook.rb @@ -7,6 +7,8 @@ config.lookbook.project_logo = File.read Rails.root.join('app/assets/images/icon_logo_white.svg') config.lookbook.ui_favicon = File.read Rails.root.join('app/assets/images/icon_logo.svg') config.lookbook.page_paths = [Rails.root.join("spec/components/docs/").to_s] + # Show notes first, all other panels next + config.lookbook.preview_inspector.drawer_panels = [:notes, "*"] config.lookbook.ui_theme = "blue" SecureHeaders::Configuration.named_append(:lookbook) do From 208e46b6ea5aef13ca6238722bb9626efff9c192 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20G=C3=BCnther?= Date: Mon, 29 May 2023 20:44:32 +0200 Subject: [PATCH 14/57] Add some padding to previews --- app/views/layouts/component_preview.html.erb | 6 ++++-- frontend/src/global_styles/layout/_index.sass | 3 +++ .../src/global_styles/layout/_viewcomponent_previews.sass | 3 +++ 3 files changed, 10 insertions(+), 2 deletions(-) create mode 100644 frontend/src/global_styles/layout/_viewcomponent_previews.sass diff --git a/app/views/layouts/component_preview.html.erb b/app/views/layouts/component_preview.html.erb index 8444f6a13a5b..161be9fab865 100644 --- a/app/views/layouts/component_preview.html.erb +++ b/app/views/layouts/component_preview.html.erb @@ -30,7 +30,9 @@ See COPYRIGHT and LICENSE files for more details. <%= include_frontend_assets %> - -<%= yield %> + +
+ <%= yield %> +
diff --git a/frontend/src/global_styles/layout/_index.sass b/frontend/src/global_styles/layout/_index.sass index 83a5a6a4891d..f038ab076f3e 100644 --- a/frontend/src/global_styles/layout/_index.sass +++ b/frontend/src/global_styles/layout/_index.sass @@ -48,3 +48,6 @@ // Print layout @import print + +// View component preview styles +@import viewcomponent_previews diff --git a/frontend/src/global_styles/layout/_viewcomponent_previews.sass b/frontend/src/global_styles/layout/_viewcomponent_previews.sass new file mode 100644 index 000000000000..a403a62ca0c2 --- /dev/null +++ b/frontend/src/global_styles/layout/_viewcomponent_previews.sass @@ -0,0 +1,3 @@ +.viewcomponent-preview + &--content + margin: 1rem From 4dead4145df8495a3c9b450e32f11e598e44d8bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20G=C3=BCnther?= Date: Wed, 31 May 2023 22:21:20 +0200 Subject: [PATCH 15/57] Try to include primer into lookbook --- Gemfile | 2 + Gemfile.lock | 7 + app/views/homescreen/index.html.erb | 3 + app/views/layouts/_common_head.html.erb | 1 + config/application.rb | 3 + config/initializers/lookbook.rb | 4 +- config/initializers/view_component.rb | 1 + frontend/angular.json | 3 +- frontend/package-lock.json | 212 ++++++++++++++++++++++++ frontend/package.json | 1 + 10 files changed, 234 insertions(+), 3 deletions(-) diff --git a/Gemfile b/Gemfile index 939afb487dac..20c7d9c0e350 100644 --- a/Gemfile +++ b/Gemfile @@ -348,3 +348,5 @@ gemfiles.each do |file| # don't use eval_gemfile(file) here as it will break dependabot! send(:eval_gemfile, file) if File.readable?(file) end + +gem "primer_view_components", "~> 0.1.9" diff --git a/Gemfile.lock b/Gemfile.lock index 792d16624802..8449af44f1a7 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -634,6 +634,7 @@ GEM nokogiri (1.15.2) mini_portile2 (~> 2.8.2) racc (~> 1.4) + octicons (19.1.0) oj (3.14.3) okcomputer (1.18.4) omniauth-saml (1.10.3) @@ -685,6 +686,11 @@ GEM ttfunk (~> 1.7) prawn-table (0.2.2) prawn (>= 1.3.0, < 3.0.0) + primer_view_components (0.1.9) + actionview (>= 5.0.0) + activesupport (>= 5.0.0) + octicons (>= 18.0.0) + view_component (> 2.0, < 4.0) pry (0.14.2) coderay (~> 1.1) method_source (~> 1.0) @@ -1093,6 +1099,7 @@ DEPENDENCIES plaintext (~> 0.3.2) posix-spawn (~> 0.3.13) prawn (~> 2.2) + primer_view_components (~> 0.1.9) pry-byebug (~> 3.10.0) pry-rails (~> 0.3.6) pry-rescue (~> 1.5.2) diff --git a/app/views/homescreen/index.html.erb b/app/views/homescreen/index.html.erb index 1006e5337519..693cc1e942b7 100644 --- a/app/views/homescreen/index.html.erb +++ b/app/views/homescreen/index.html.erb @@ -26,6 +26,8 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. See COPYRIGHT and LICENSE files for more details. ++#%> +<%= render(Primer::Beta::Button.new(size: :small)) { "Small" } %> + <% breadcrumb_paths(nil) %>

<%= organization_icon %> @@ -58,4 +60,5 @@ See COPYRIGHT and LICENSE files for more details. <% end %> + <%= call_hook :homescreen_after_links %> diff --git a/app/views/layouts/_common_head.html.erb b/app/views/layouts/_common_head.html.erb index 25fe7b680c45..59cca706b4f9 100644 --- a/app/views/layouts/_common_head.html.erb +++ b/app/views/layouts/_common_head.html.erb @@ -2,6 +2,7 @@ <%= output_title_and_meta_tags %> <%= appsignal_frontend_tag %> +<%= javascript_include_tag("primer_view_components") %> <% relative_url_root = OpenProject::Configuration['rails_relative_url_root'] || '' %> diff --git a/config/application.rb b/config/application.rb index 1d9f183ed37b..4b7b2c5f14da 100644 --- a/config/application.rb +++ b/config/application.rb @@ -32,6 +32,9 @@ require 'active_support' require 'active_support/dependencies' require 'core_extensions' +require "view_component" +require "primer/view_components" +require "primer/view_components/engine" # Silence deprecations early on for testing on CI and production ActiveSupport::Deprecation.silenced = diff --git a/config/initializers/lookbook.rb b/config/initializers/lookbook.rb index 0c445c19a8e4..5e1764b666f1 100644 --- a/config/initializers/lookbook.rb +++ b/config/initializers/lookbook.rb @@ -1,13 +1,13 @@ OpenProject::Application.configure do next unless Rails.env.development? - config.view_component.generate.preview_path = Rails.root.join("spec/components/previews").to_s - config.view_component.preview_paths << Rails.root.join("spec/components/previews").to_s config.lookbook.project_name = "OpenProject Design System" config.lookbook.project_logo = File.read Rails.root.join('app/assets/images/icon_logo_white.svg') config.lookbook.ui_favicon = File.read Rails.root.join('app/assets/images/icon_logo.svg') config.lookbook.page_paths = [Rails.root.join("spec/components/docs/").to_s] # Show notes first, all other panels next + config.lookbook.component_paths << Primer::ViewComponents::Engine.root.join("app", "components").to_s + config.view_component.preview_paths << Primer::ViewComponents::Engine.root.join("previews").to_s config.lookbook.preview_inspector.drawer_panels = [:notes, "*"] config.lookbook.ui_theme = "blue" diff --git a/config/initializers/view_component.rb b/config/initializers/view_component.rb index 88f219239bc6..fc77b9d988f7 100644 --- a/config/initializers/view_component.rb +++ b/config/initializers/view_component.rb @@ -1,6 +1,7 @@ OpenProject::Application.configure do config.view_component.generate.preview_path = Rails.root.join("spec/components/previews").to_s config.view_component.preview_paths << Rails.root.join("spec/components/previews").to_s + config.view_component.generate.preview = true config.view_component.default_preview_layout = "component_preview" end diff --git a/frontend/angular.json b/frontend/angular.json index 7a1e579627ff..52e37c153746 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -49,7 +49,8 @@ "node_modules/jquery-ui/themes/base/core.css", "node_modules/jquery-ui/themes/base/datepicker.css", "node_modules/jquery-ui/themes/base/dialog.css", - "node_modules/flatpickr/dist/flatpickr.min.css" + "node_modules/flatpickr/dist/flatpickr.min.css", + "node_modules/@primer/css/core/index.scss" ], "stylePreprocessorOptions": { "includePaths": [ diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 7caa971e403d..8fd4eb074a62 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -42,6 +42,7 @@ "@ngneat/content-loader": "^6.1.0", "@ngx-formly/core": "^5.10.19", "@openproject/reactivestates": "^3.0.1", + "@primer/css": "^21.0.2", "@uirouter/angular": "^11.1.0", "@uirouter/core": "^6.0.8", "@uirouter/rx": "^1.0.0", @@ -4591,6 +4592,67 @@ "version": "1.1.3", "license": "MIT" }, + "node_modules/@github/auto-check-element": { + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/@github/auto-check-element/-/auto-check-element-5.4.0.tgz", + "integrity": "sha512-yCAnw+3H5eyyzWeaPx8uD0P9fzSQ8SjhQ0dmSvFzPStJC6cG9kbIqu8hBlmC+TRONd9eJj+z0oIwbbeAHKpo6w==", + "dependencies": { + "@github/mini-throttle": "^2.1.0" + } + }, + "node_modules/@github/auto-complete-element": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/@github/auto-complete-element/-/auto-complete-element-3.5.0.tgz", + "integrity": "sha512-ZxGm9hlaK01FUlV7lP8PFxLov3HFdLIbM6zMPSTrPp0RPrub6gWXRplAPShh/MAECVYTwXKGPL9oOWhTt53mMg==", + "dependencies": { + "@github/combobox-nav": "^2.1.7" + } + }, + "node_modules/@github/catalyst": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@github/catalyst/-/catalyst-1.6.0.tgz", + "integrity": "sha512-u8A+DameixqpeyHzvnJWTGj+wfiskQOYHzSiJscCWVfMkIT3rxnbHMtGh3lMthaRY21nbUOK71WcsCnCrXhBJQ==" + }, + "node_modules/@github/clipboard-copy-element": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@github/clipboard-copy-element/-/clipboard-copy-element-1.1.2.tgz", + "integrity": "sha512-L6CMrcA5we0udafvoSuRCE/Ci/3xrLWKYRGup2IlhxF771bQYsQ2EB1of182pI8ZWM4oxgwzu37+igMeoZjN/A==" + }, + "node_modules/@github/combobox-nav": { + "version": "2.1.7", + "resolved": "https://registry.npmjs.org/@github/combobox-nav/-/combobox-nav-2.1.7.tgz", + "integrity": "sha512-Webx0W5iTpkk5Chy9dB/1BEUORQ0qrwui8HaaVBiy75W2VOJg96WTuKj1rXENAJ3XTMhdEF53bn0LYfvP0EKvg==" + }, + "node_modules/@github/details-menu-element": { + "version": "1.0.13", + "resolved": "https://registry.npmjs.org/@github/details-menu-element/-/details-menu-element-1.0.13.tgz", + "integrity": "sha512-gMkii86w/oUP5dq8yOWZn1sgbgtFj3AYETxxtpsqRggZktgd8te4+npAn4Hm+936c/lxmEzXqfjARL/CzGR4+w==" + }, + "node_modules/@github/image-crop-element": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@github/image-crop-element/-/image-crop-element-5.0.0.tgz", + "integrity": "sha512-Vgm2OwWAs1ESoib/t5sjxsAYo6YTOxxAjWDRxswX7qrqoyCejTZ3hshdo4Ep5e+Mz/GVTZC3rdMtg06dk/eT4g==" + }, + "node_modules/@github/include-fragment-element": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@github/include-fragment-element/-/include-fragment-element-6.1.1.tgz", + "integrity": "sha512-JTRVhMJlgcojYjj/bBuWKaYa2EQL3CvmdIkEiOeZUuu1xjutBaSEhpONL1MBAT77zUOy6VwniKjZGQn1IT7dbg==" + }, + "node_modules/@github/mini-throttle": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@github/mini-throttle/-/mini-throttle-2.1.0.tgz", + "integrity": "sha512-iEeR2OdVCPkdIPUszL8gJnKNu4MR8ANh7y0u/LPyaatYezgaWxUZEzhFntloqQq+HE6MZkFy+cl+xzCNuljOdw==" + }, + "node_modules/@github/relative-time-element": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@github/relative-time-element/-/relative-time-element-4.3.0.tgz", + "integrity": "sha512-+tFjX9//HRS1HnBa5cNgfEtE52arwiutYg1TOF+Trk40SPxst9Q8Rtc3BKD6aKsvfbtub68vfhipgchGjj9o7g==" + }, + "node_modules/@github/tab-container-element": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/@github/tab-container-element/-/tab-container-element-3.2.0.tgz", + "integrity": "sha512-to5ZJuywKK3KX53X1ifOcWjvUTQcBGdQ6Qkhm8L97xQ3ovICag1048M3YMpc+QSdr8xWeCBMnLeMnENqotB0Og==" + }, "node_modules/@hotwired/stimulus": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/@hotwired/stimulus/-/stimulus-3.2.1.tgz", @@ -5266,6 +5328,11 @@ "node": "^14.17.0 || ^16.13.0 || >=18.0.0" } }, + "node_modules/@oddbird/popover-polyfill": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@oddbird/popover-polyfill/-/popover-polyfill-0.1.1.tgz", + "integrity": "sha512-X9gxiwKtN1ZumOoe9KRLpe37nshLtwHm/IJflIxgjanXz/FqKb0DQ7BlWu+iqUn/O0/jWYgkKnTLtsC9JlgwQg==" + }, "node_modules/@openproject/reactivestates": { "version": "3.0.1", "dependencies": { @@ -5280,6 +5347,47 @@ "dev": true, "license": "MIT" }, + "node_modules/@primer/behaviors": { + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.3.4.tgz", + "integrity": "sha512-j6PhkDD1IdL9xrlKbUQ3YEM74B7Fgr1mIZJ6JaYJjM1Mvdutd/nBouM8SnwFZdBBbS+ZRfGhnx3plr833Pvf1Q==" + }, + "node_modules/@primer/css": { + "version": "21.0.2", + "resolved": "https://registry.npmjs.org/@primer/css/-/css-21.0.2.tgz", + "integrity": "sha512-rIwqua1LgjMTMFx9whghPEHF1B4RdVA6meMu5ByeqLYWmWrCStwk2jZvk9yNSn2MnkJ7zuuo3jTlIX1SVmjF7Q==", + "dependencies": { + "@primer/primitives": "^7.11.10", + "@primer/view-components": "^0.1.0" + }, + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + } + }, + "node_modules/@primer/primitives": { + "version": "7.11.11", + "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.11.tgz", + "integrity": "sha512-5McPeE83AGcYm2uHbQEIOOa6JPv2SUFPDjYbf2I5QnvmNm9ZUbS446zWC3ygNi54uks7znuTDFrU325vpnze7g==" + }, + "node_modules/@primer/view-components": { + "version": "0.1.9", + "resolved": "https://registry.npmjs.org/@primer/view-components/-/view-components-0.1.9.tgz", + "integrity": "sha512-LtqJBkTMS+odYXqKhOZxBvyAAlXTA+C6o3eXDQN8Nwmja48SKAlFrwb+HpXLvgpbbDg1eY2LKmypokv44dl0Uw==", + "dependencies": { + "@github/auto-check-element": "^5.2.0", + "@github/auto-complete-element": "^3.3.4", + "@github/catalyst": "^1.6.0", + "@github/clipboard-copy-element": "^1.1.2", + "@github/details-menu-element": "^1.0.12", + "@github/image-crop-element": "^5.0.0", + "@github/include-fragment-element": "^6.1.1", + "@github/mini-throttle": "^2.1.0", + "@github/relative-time-element": "^4.0.0", + "@github/tab-container-element": "^3.1.2", + "@oddbird/popover-polyfill": "^0.1.1", + "@primer/behaviors": "^1.3.4" + } + }, "node_modules/@schematics/angular": { "version": "15.2.8", "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-15.2.8.tgz", @@ -33493,6 +33601,67 @@ "@gar/promisify": { "version": "1.1.3" }, + "@github/auto-check-element": { + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/@github/auto-check-element/-/auto-check-element-5.4.0.tgz", + "integrity": "sha512-yCAnw+3H5eyyzWeaPx8uD0P9fzSQ8SjhQ0dmSvFzPStJC6cG9kbIqu8hBlmC+TRONd9eJj+z0oIwbbeAHKpo6w==", + "requires": { + "@github/mini-throttle": "^2.1.0" + } + }, + "@github/auto-complete-element": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/@github/auto-complete-element/-/auto-complete-element-3.5.0.tgz", + "integrity": "sha512-ZxGm9hlaK01FUlV7lP8PFxLov3HFdLIbM6zMPSTrPp0RPrub6gWXRplAPShh/MAECVYTwXKGPL9oOWhTt53mMg==", + "requires": { + "@github/combobox-nav": "^2.1.7" + } + }, + "@github/catalyst": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@github/catalyst/-/catalyst-1.6.0.tgz", + "integrity": "sha512-u8A+DameixqpeyHzvnJWTGj+wfiskQOYHzSiJscCWVfMkIT3rxnbHMtGh3lMthaRY21nbUOK71WcsCnCrXhBJQ==" + }, + "@github/clipboard-copy-element": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@github/clipboard-copy-element/-/clipboard-copy-element-1.1.2.tgz", + "integrity": "sha512-L6CMrcA5we0udafvoSuRCE/Ci/3xrLWKYRGup2IlhxF771bQYsQ2EB1of182pI8ZWM4oxgwzu37+igMeoZjN/A==" + }, + "@github/combobox-nav": { + "version": "2.1.7", + "resolved": "https://registry.npmjs.org/@github/combobox-nav/-/combobox-nav-2.1.7.tgz", + "integrity": "sha512-Webx0W5iTpkk5Chy9dB/1BEUORQ0qrwui8HaaVBiy75W2VOJg96WTuKj1rXENAJ3XTMhdEF53bn0LYfvP0EKvg==" + }, + "@github/details-menu-element": { + "version": "1.0.13", + "resolved": "https://registry.npmjs.org/@github/details-menu-element/-/details-menu-element-1.0.13.tgz", + "integrity": "sha512-gMkii86w/oUP5dq8yOWZn1sgbgtFj3AYETxxtpsqRggZktgd8te4+npAn4Hm+936c/lxmEzXqfjARL/CzGR4+w==" + }, + "@github/image-crop-element": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@github/image-crop-element/-/image-crop-element-5.0.0.tgz", + "integrity": "sha512-Vgm2OwWAs1ESoib/t5sjxsAYo6YTOxxAjWDRxswX7qrqoyCejTZ3hshdo4Ep5e+Mz/GVTZC3rdMtg06dk/eT4g==" + }, + "@github/include-fragment-element": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@github/include-fragment-element/-/include-fragment-element-6.1.1.tgz", + "integrity": "sha512-JTRVhMJlgcojYjj/bBuWKaYa2EQL3CvmdIkEiOeZUuu1xjutBaSEhpONL1MBAT77zUOy6VwniKjZGQn1IT7dbg==" + }, + "@github/mini-throttle": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@github/mini-throttle/-/mini-throttle-2.1.0.tgz", + "integrity": "sha512-iEeR2OdVCPkdIPUszL8gJnKNu4MR8ANh7y0u/LPyaatYezgaWxUZEzhFntloqQq+HE6MZkFy+cl+xzCNuljOdw==" + }, + "@github/relative-time-element": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@github/relative-time-element/-/relative-time-element-4.3.0.tgz", + "integrity": "sha512-+tFjX9//HRS1HnBa5cNgfEtE52arwiutYg1TOF+Trk40SPxst9Q8Rtc3BKD6aKsvfbtub68vfhipgchGjj9o7g==" + }, + "@github/tab-container-element": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/@github/tab-container-element/-/tab-container-element-3.2.0.tgz", + "integrity": "sha512-to5ZJuywKK3KX53X1ifOcWjvUTQcBGdQ6Qkhm8L97xQ3ovICag1048M3YMpc+QSdr8xWeCBMnLeMnENqotB0Og==" + }, "@hotwired/stimulus": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/@hotwired/stimulus/-/stimulus-3.2.1.tgz", @@ -33953,6 +34122,11 @@ } } }, + "@oddbird/popover-polyfill": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@oddbird/popover-polyfill/-/popover-polyfill-0.1.1.tgz", + "integrity": "sha512-X9gxiwKtN1ZumOoe9KRLpe37nshLtwHm/IJflIxgjanXz/FqKb0DQ7BlWu+iqUn/O0/jWYgkKnTLtsC9JlgwQg==" + }, "@openproject/reactivestates": { "version": "3.0.1", "requires": { @@ -33963,6 +34137,44 @@ "version": "1.0.0-next.15", "dev": true }, + "@primer/behaviors": { + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.3.4.tgz", + "integrity": "sha512-j6PhkDD1IdL9xrlKbUQ3YEM74B7Fgr1mIZJ6JaYJjM1Mvdutd/nBouM8SnwFZdBBbS+ZRfGhnx3plr833Pvf1Q==" + }, + "@primer/css": { + "version": "21.0.2", + "resolved": "https://registry.npmjs.org/@primer/css/-/css-21.0.2.tgz", + "integrity": "sha512-rIwqua1LgjMTMFx9whghPEHF1B4RdVA6meMu5ByeqLYWmWrCStwk2jZvk9yNSn2MnkJ7zuuo3jTlIX1SVmjF7Q==", + "requires": { + "@primer/primitives": "^7.11.10", + "@primer/view-components": "^0.1.0" + } + }, + "@primer/primitives": { + "version": "7.11.11", + "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.11.tgz", + "integrity": "sha512-5McPeE83AGcYm2uHbQEIOOa6JPv2SUFPDjYbf2I5QnvmNm9ZUbS446zWC3ygNi54uks7znuTDFrU325vpnze7g==" + }, + "@primer/view-components": { + "version": "0.1.9", + "resolved": "https://registry.npmjs.org/@primer/view-components/-/view-components-0.1.9.tgz", + "integrity": "sha512-LtqJBkTMS+odYXqKhOZxBvyAAlXTA+C6o3eXDQN8Nwmja48SKAlFrwb+HpXLvgpbbDg1eY2LKmypokv44dl0Uw==", + "requires": { + "@github/auto-check-element": "^5.2.0", + "@github/auto-complete-element": "^3.3.4", + "@github/catalyst": "^1.6.0", + "@github/clipboard-copy-element": "^1.1.2", + "@github/details-menu-element": "^1.0.12", + "@github/image-crop-element": "^5.0.0", + "@github/include-fragment-element": "^6.1.1", + "@github/mini-throttle": "^2.1.0", + "@github/relative-time-element": "^4.0.0", + "@github/tab-container-element": "^3.1.2", + "@oddbird/popover-polyfill": "^0.1.1", + "@primer/behaviors": "^1.3.4" + } + }, "@schematics/angular": { "version": "15.2.8", "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-15.2.8.tgz", diff --git a/frontend/package.json b/frontend/package.json index ade02989bd20..d391584141a1 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -115,6 +115,7 @@ "@ngneat/content-loader": "^6.1.0", "@ngx-formly/core": "^5.10.19", "@openproject/reactivestates": "^3.0.1", + "@primer/css": "^21.0.2", "@uirouter/angular": "^11.1.0", "@uirouter/core": "^6.0.8", "@uirouter/rx": "^1.0.0", From 79d7c72f3421b6263ae09fb80216222f55e4bdfa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20G=C3=BCnther?= Date: Mon, 19 Jun 2023 15:10:56 +0200 Subject: [PATCH 16/57] Try to load primer css --- app/views/homescreen/index.html.erb | 6 ++++++ frontend/package-lock.json | 13 +++++++------ frontend/package.json | 1 + frontend/src/spot.scss | 3 +++ 4 files changed, 17 insertions(+), 6 deletions(-) diff --git a/app/views/homescreen/index.html.erb b/app/views/homescreen/index.html.erb index 693cc1e942b7..c988eb0818d2 100644 --- a/app/views/homescreen/index.html.erb +++ b/app/views/homescreen/index.html.erb @@ -28,6 +28,11 @@ See COPYRIGHT and LICENSE files for more details. ++#%> <%= render(Primer::Beta::Button.new(size: :small)) { "Small" } %> + + <% breadcrumb_paths(nil) %>

<%= organization_icon %> @@ -62,3 +67,4 @@ See COPYRIGHT and LICENSE files for more details. <%= call_hook :homescreen_after_links %> + diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 8fd4eb074a62..80d40aa0c954 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -43,6 +43,7 @@ "@ngx-formly/core": "^5.10.19", "@openproject/reactivestates": "^3.0.1", "@primer/css": "^21.0.2", + "@primer/primitives": "^7.11.12", "@uirouter/angular": "^11.1.0", "@uirouter/core": "^6.0.8", "@uirouter/rx": "^1.0.0", @@ -5365,9 +5366,9 @@ } }, "node_modules/@primer/primitives": { - "version": "7.11.11", - "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.11.tgz", - "integrity": "sha512-5McPeE83AGcYm2uHbQEIOOa6JPv2SUFPDjYbf2I5QnvmNm9ZUbS446zWC3ygNi54uks7znuTDFrU325vpnze7g==" + "version": "7.11.12", + "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.12.tgz", + "integrity": "sha512-AvTiuLHvvby2KPZbwwJ7GrtRJYgWyepF6XAOMw7G7Kc2iP3E32OHmaFukwh3gY+OqwcxY7st2tHWll2brk1vfQ==" }, "node_modules/@primer/view-components": { "version": "0.1.9", @@ -34152,9 +34153,9 @@ } }, "@primer/primitives": { - "version": "7.11.11", - "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.11.tgz", - "integrity": "sha512-5McPeE83AGcYm2uHbQEIOOa6JPv2SUFPDjYbf2I5QnvmNm9ZUbS446zWC3ygNi54uks7znuTDFrU325vpnze7g==" + "version": "7.11.12", + "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.12.tgz", + "integrity": "sha512-AvTiuLHvvby2KPZbwwJ7GrtRJYgWyepF6XAOMw7G7Kc2iP3E32OHmaFukwh3gY+OqwcxY7st2tHWll2brk1vfQ==" }, "@primer/view-components": { "version": "0.1.9", diff --git a/frontend/package.json b/frontend/package.json index d391584141a1..dbeea2d903fa 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -116,6 +116,7 @@ "@ngx-formly/core": "^5.10.19", "@openproject/reactivestates": "^3.0.1", "@primer/css": "^21.0.2", + "@primer/primitives": "^7.11.12", "@uirouter/angular": "^11.1.0", "@uirouter/core": "^6.0.8", "@uirouter/rx": "^1.0.0", diff --git a/frontend/src/spot.scss b/frontend/src/spot.scss index d20d5913082a..6171c5c8a77e 100644 --- a/frontend/src/spot.scss +++ b/frontend/src/spot.scss @@ -7,3 +7,6 @@ // SPOT styles @import "app/spot/styles/sass/common"; @import "app/spot/styles/sass/components"; + +// Primer CSS +@import '@primer/css/core/index.scss'; From 0d79b05882fa3e0461a1c6e45d8383f3012dd81e Mon Sep 17 00:00:00 2001 From: Wieland Lindenthal Date: Tue, 20 Jun 2023 22:43:07 +0200 Subject: [PATCH 17/57] Load Primer CSS from external. Basic overwrite of Primer theme CSS vars. --- app/views/custom_styles/_inline_css.erb | 49 ++++++++++++++++--------- app/views/homescreen/index.html.erb | 12 +++--- app/views/layouts/_common_head.html.erb | 3 ++ app/views/layouts/base.html.erb | 1 + config/initializers/secure_headers.rb | 2 +- 5 files changed, 43 insertions(+), 24 deletions(-) diff --git a/app/views/custom_styles/_inline_css.erb b/app/views/custom_styles/_inline_css.erb index 63ca363a8a2a..cffe9618a9ce 100644 --- a/app/views/custom_styles/_inline_css.erb +++ b/app/views/custom_styles/_inline_css.erb @@ -29,26 +29,39 @@ See COPYRIGHT and LICENSE files for more details.