mirror of
https://github.com/opf/openproject.git
synced 2026-06-14 03:30:14 +00:00
Add a component for inline macros
This is intended to become a replacement for the angular-based <opce-macro-wp-quickinfo> component. However, the new component should be more generic, so that it can also be used for other cases, such as rich links to wiki pages.
This commit is contained in:
Jan Sandbrink
@@ -3,6 +3,7 @@
|
||||
@import "op_primer/border_box_table_component"
|
||||
@import "op_primer/full_page_prompt_component"
|
||||
@import "op_primer/form_helpers"
|
||||
@import "op_primer/inline_macro_component"
|
||||
@import "open_project/common/attribute_component"
|
||||
@import "open_project/common/attribute_help_text_component"
|
||||
@import "open_project/common/attribute_help_text_caption_component"
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
<%#-- copyright
|
||||
OpenProject is an open source project management software.
|
||||
Copyright (C) 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.
|
||||
|
||||
++#%>
|
||||
|
||||
<%= render(Primer::BaseComponent.new(tag: :span, **@system_arguments)) do %>
|
||||
<%= leading_visual_icon %>
|
||||
<%= content %>
|
||||
<% end %>
|
||||
@@ -0,0 +1,47 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
#-- copyright
|
||||
# OpenProject is an open source project management software.
|
||||
# Copyright (C) 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.
|
||||
#++
|
||||
|
||||
module OpPrimer
|
||||
class InlineMacroComponent < Primer::Component
|
||||
renders_one :leading_visual_icon, ->(icon:, color: :muted) do
|
||||
Primer::Beta::Octicon.new(icon:, color:, mr: 2, vertical_align: :middle)
|
||||
end
|
||||
|
||||
def initialize(**system_arguments)
|
||||
super()
|
||||
|
||||
@system_arguments = system_arguments
|
||||
@system_arguments[:classes] = class_names(
|
||||
@system_arguments[:classes],
|
||||
"op-inline-macro"
|
||||
)
|
||||
end
|
||||
end
|
||||
end
|
||||
@@ -0,0 +1,11 @@
|
||||
@media screen
|
||||
.op-inline-macro
|
||||
display: inline
|
||||
background: var(--bgColor-muted)
|
||||
border: 1px solid transparent
|
||||
border-radius: var(--borderRadius-medium)
|
||||
padding: 4px 8px
|
||||
|
||||
&:hover
|
||||
cursor: default
|
||||
border-color: var(--borderColor-emphasis)
|
||||
@@ -275,8 +275,9 @@ $scrollbar-size: 10px
|
||||
@mixin macro--text-style
|
||||
@media screen
|
||||
display: inline
|
||||
background: rgba(218,223,225,0.19)
|
||||
background: var(--bgColor-muted)
|
||||
border: 1px solid transparent
|
||||
border-radius: var(--borderRadius-medium)
|
||||
padding: 2px
|
||||
|
||||
&:has(.-multiline)
|
||||
@@ -284,8 +285,7 @@ $scrollbar-size: 10px
|
||||
|
||||
&:hover
|
||||
cursor: default
|
||||
border-color: var(--fgColor-muted)
|
||||
background: rgba(218,223,225,0.75)
|
||||
border-color: var(--borderColor-emphasis)
|
||||
|
||||
@mixin unset-button-styles
|
||||
padding: 0
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
#-- copyright
|
||||
# OpenProject is an open source project management software.
|
||||
# Copyright (C) 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.
|
||||
#++
|
||||
|
||||
module OpPrimer
|
||||
# @logical_path OpenProject/Primer
|
||||
class InlineMacroComponentPreview < ViewComponent::Preview
|
||||
def default
|
||||
render OpPrimer::InlineMacroComponent.new do
|
||||
"I am a text inside an InlineMacroComponent."
|
||||
end
|
||||
end
|
||||
|
||||
# @param text [String]
|
||||
# @param icon [Symbol] octicon
|
||||
def playground(text: "InlineMacroComponent", icon: nil)
|
||||
render(OpPrimer::InlineMacroComponent.new) do |component|
|
||||
component.with_leading_visual_icon(icon:) if icon.present? && icon != :none
|
||||
|
||||
text
|
||||
end
|
||||
end
|
||||
|
||||
def with_link
|
||||
render_with_template
|
||||
end
|
||||
|
||||
def with_surrounding_text
|
||||
render_with_template
|
||||
end
|
||||
end
|
||||
end
|
||||
@@ -0,0 +1,6 @@
|
||||
<%=
|
||||
render(OpPrimer::InlineMacroComponent.new) do |component|
|
||||
component.with_leading_visual_icon(icon: :sun)
|
||||
render(Primer::Beta::Link.new(href: "#")) { "Click me" }
|
||||
end
|
||||
%>
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
<p>
|
||||
A component commonly used inline is the <%= render(OpPrimer::InlineMacroComponent.new) { |c| c.with_leading_visual_icon(icon: :book); "InlineMacroComponent" } %>. It
|
||||
can appear in the middle of other text.
|
||||
</p>
|
||||
Reference in New Issue
Block a user