Add target attribute to Menu #15636
Add target attribute to Menu #15636
Conversation
|
Hi @MikeAlhayek ，It's ready for review. |
| @@ -24,6 +24,12 @@ | |||
| <span class="hint">@T["The url of the link. A link will be shown only if it or one of their children have a url. The url will be relative to the root of the admin site"]</span> | |||
| </div> | |||
|
|
|||
| <div class="mb-3"> | |||
| <label asp-for="Target" class="form-label">@T["Target"]</label> | |||
| <input asp-for="Target" class="form-control" /> | |||
There was a problem hiding this comment.
Select menu instead of of a text box. The options can be
Value: Text
_blank: Opens the linked document in a new window or tab
_self Opens: the linked document in the same frame as it was clicked (this is default)
_parent: Opens the linked document in the parent frame
_top: Opens the linked document in the full body of the window
There was a problem hiding this comment.
This restricts users from using named window, such as those with a target attribute set to MyWorkflow, so clicking on any link if whose target is MyWorkflow will always use the same window
Not sure if OC has a text box similar to autocomplete, we can set the above options you mentioned as autocomplete options, while allowing the user to enter any custom content
There was a problem hiding this comment.
I like to create UI where anyone can use not just developers. Drop down menu will provide better user experience for the common use. What if we do a menu with "Other" options. When other is selected, we can show an input to provider the custom value?
There was a problem hiding this comment.
what about this ?
https://getbootstrap.com/docs/5.3/forms/form-control/#datalists
| @@ -15,6 +15,14 @@ | |||
| </div> | |||
| </div> | |||
|
|
|||
| <div class="@Orchard.GetWrapperClasses()"> | |||
| @@ -14,3 +14,11 @@ | |||
| <input asp-for="Url" class="form-control" /> | |||
| </div> | |||
| </div> | |||
|
|
|||
| <div class="@Orchard.GetWrapperClasses()"> | |||
|
|
||
| if (!string.IsNullOrEmpty(htmlMenuItemPart.Target)) | ||
| { | ||
| tag.Attributes["target"] = htmlMenuItemPart.Target; |
There was a problem hiding this comment.
Validate the value to make sure only valid values can be provided
There was a problem hiding this comment.
This is really not necessary, since the target attribute is freely definable, e.g. target="order_details" , and when the user clicks on a link it will always refresh the existing window as much as possible, instead of always opening a new one.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target
| @@ -1 +1 @@ | |||
| <a href="@(Model.Href ?? "#")">@Model.Text</a> | |||
| <a href="@(Model.Href ?? "#")" @(!string.IsNullOrEmpty(Model.Target) ? $"target=\"" + Model.Target + "\"" : string.Empty)>@Model.Text</a> | |||
There was a problem hiding this comment.
You can always add target attribute. Use _self as the default value
There was a problem hiding this comment.
If you use the default values, there will be only one option here.
| <a class="nav-link" href="{{ link.Url | href }}"{% if link.Target %} target="{{link.Target}}" {% endif %}>{{ link.Html | raw }}</a> |
There was a problem hiding this comment.
New line at the end of the file and add target attribute by default with _self as default value
| @@ -1,5 +1,5 @@ | |||
| {% assign link = Model.ContentItem.Content.LinkMenuItemPart %} | |||
| <a class="nav-link" href="{{ link.Url | href }}" | |||
| <a class="nav-link" href="{{ link.Url | href }}"{% if link.Target %} target="{{link.Target}}" {% endif %} | |||
| @@ -3,5 +3,5 @@ | |||
| {% if Model.HasItems %} | |||
| <a href="{{ link.Url | href }}" class="nav-link px-lg-3 py-3 py-lg-4 dropdown-toggle" data-bs-toggle="dropdown">{{ link.Html | raw }}<b class="caret"></b></a> | |||
| {% else %} | |||
| <a class="nav-link px-lg-3 py-3 py-lg-4" href="{{ link.Url | href }}">{{ link.Html | raw }}</a> | |||
| <a class="nav-link px-lg-3 py-3 py-lg-4" href="{{ link.Url | href }}"{% if link.Target %} target="{{link.Target}}" {% endif %}>{{ link.Html | raw }}</a> | |||
There was a problem hiding this comment.
Same. With line at the end of the file
| @@ -3,5 +3,5 @@ | |||
| {% if Model.HasItems %} | |||
| <a href="{{ link.Url | href }}" class="nav-link px-lg-3 py-3 py-lg-4 dropdown-toggle" data-bs-toggle="dropdown">{{ Model.ContentItem.DisplayText }}<b class="caret"></b></a> | |||
| {% else %} | |||
| <a class="nav-link px-lg-3 py-3 py-lg-4" href="{{ link.Url | href }}">{{ Model.ContentItem.DisplayText }}</a> | |||
| <a class="nav-link px-lg-3 py-3 py-lg-4" href="{{ link.Url | href }}"{% if link.Target %} target="{{link.Target}}" {% endif %}>{{ Model.ContentItem.DisplayText }}</a> | |||
|
This pull request has merge conflicts. Please resolve those before requesting a review. |
fixed: #15541
This PR allows the user to specify the
targetproperty on both theMenusand theAdminMenusMenus
AdminMenus