Is there a proper way of using ant with remix?
Using antd (ant.design) version 5. Tried adding the following to the root.tsx (as well as route files) file in remix project but styles still don't work:
import styles from "antd/dist/reset.css";
export function links() {
return [
{
rel: "stylesheet",
href: styles,
}
]
}
On version 5+, all you need to do is import the components and use. No need to import the css anymore, as mentioned here. You may add a ConfigProvider to app/root.tsx if you need to customize the theme.
import { Button, DatePicker } from 'antd';
export default function Index() {
return (
<>
<Button type="primary">PRESS ME</Button>
<DatePicker placeholder="select date" />
</>
);
}
The reset file should be added to app/root.tsx, only if you need to reset the basic styles.
Sadly, right now there is no easy way to use Ant Design without budled css file. As remix doesn't support bundling css yet, also there is no option to overridde esbuild config to add such plugin. But Remix team is working on such feature: https://github.com/remix-run/remix/discussions/1302#discussioncomment-1913510
Related
I have Blazor Webassembly ASP.NET Core hosted and I installed Swashbuckle.AspNetCore to display endpoints that my Blazor app has (/swagger endpoint).
My Startup.Configure looks like this (only swagger part):
app.UseSwagger();
app.UseSwaggerUI(c =>
{
foreach (var description in provider.ApiVersionDescriptions)
{
c.SwaggerEndpoint($"{description.GroupName}/swagger.json", $"v{description.GroupName.ToUpperInvariant()}");
}
c.InjectStylesheet("/css/swaggerDark.css");
});
As you can see, I inject custom .css file which works.
In my Blazor app, I inject swagger so my page looks like this (.razor page):
<iframe src="swagger"/>
Again, it works correctly, swagger documentation is displayed and it has dark theme.
I have noticed (to no suprise) that this iframe has a link to this .css file:
<link href="/css/swaggerDark.css" rel="stylesheet" media="screen" type="text/css">
Removing this link brings the default swagger look (light theme).
The user of my app can choose which theme he wants (light/dark) of the whole application. My question is, how do I dynamically inject/remove (or maybe enable/disable) this .css file so depending on which app theme the user chooses, the swagger will either display default (light) or dark theme (using that .css file)?
I couldn't find any relevant info on this issue so I decided to create this question. I appreciate any help. Thank you.
Ok, I figured it out. The answer is: use JsInterop.
My .razor page looks like this at the moment:
#page "/something"
#inject IJSRuntime JS //needed to call InvokeVoidAsync
//I made my own ThemeManager to control the Blazor app theme
#if (ThemeManager.IsDefaultTheme)
{
<iframe id="myiframe" src="swagger" #onload="() => ToggleSwaggerTheme(true)" />
}
else
{
<iframe id="myiframe" src="swagger" #onload="() => ToggleSwaggerTheme(false)" />
}
#code {
private async Task ToggleSwaggerTheme(bool isLight) => await JS.InvokeVoidAsync("toggleSwaggerTheme", isLight);
}
I made it so the iframe toggles depending on the app theme. The ToggleSwaggerTheme function is self-explanatory - I'm calling my JS function to toggle the theme of swagger.
In index.html I added a script to load my helperFunctions.js (in body) in which toggleSwaggerTheme function can be found:
<script src="/js/helperFunctions.js"></script>
I added helperFunctions.js in my wwwroot:
wwwroot -> js -> helperFunctions.js
My helperFunctions.js looks like this:
function toggleSwaggerTheme(isLight) {
let myiframe = document.getElementById('myiframe');
let styleSheets = myiframe.contentWindow.document.styleSheets;
for (let i = 0; i < styleSheets.length; i++) {
if (styleSheets[i].href == null) {
continue;
}
if (styleSheets[i].href.includes("/css/swaggerDark.css")) {
styleSheets[i].disabled = isLight;
break;
}
}
}
The above function allowed me to toggle the swagger theme. Please note, I don't know if this is the best solution that can be created. Also, I'm not sure how it's going to behave in the production environment. I will update this answer if there are any problems in the production. I hope it can help somebody.
UPDATE AFTER GOING LIVE:
I've had some issues with displaying dark theme after going live. But the following seems to fix the issue:
In Program.cs (Server side), in CreateHostBuilder method I added (not sure if it's needed):
webBuilder.UseStaticWebAssets();
So in my case, it looks like this:
public static IHostBuilder CreateHostBuilder(string[] args) =>
Host.CreateDefaultBuilder(args)
.ConfigureWebHostDefaults(webBuilder =>
{
webBuilder.UseStaticWebAssets();
webBuilder.UseStartup<Startup>();
});
I also changed my swaggerDark.css file property: the Copy to Output Directory to Copy always.
You do this by right-clicking the file in Solution Explorer -> Properties (at the end).
After doing these new steps, It seems to be working fine. I hope it can help somebody.
Here i have requirement like if i type type anything in Textbox it should be Reflect back to Component
<label> Search FRom Table:</label> <input (change)="someval()">
Someval(){
//Here i need that TextBox value
}
You can achieve this in Two way data binding method and so on.
Html Looks like following
<label> Search From Table:</label>
<input name="searchTxt" [(ngModel)]="searchTxt" (input)="someval()">
{{searchTxt}} <!-- here iam printed html file also -->
Typescript File:
//Add one variable
public searchTxt:any;
someval(){
console.log("Here iam printed variable",this.searchTxt);
}
Make sure you have to import Forms Module in app module file
other wise it show error like this
app.module.ts
import { FormsModule } from '#angular/forms'
imports: [
FormsModule,
],
For more details about related here, please visit:
https://www.code-sample.com/2017/05/angular2-input-textbox-change-events.html
Angular 2 change event on every keypress
I want to migrate DataTable initialization to newest version. But I didn't find any possibilities to implement custom header in declarative way. dataTables.jqueryui.js is included.
Obsolete way:
DataTable {
bJqueryUI: true,
sDom: '<"H"<"#custom-id">f>t'
}
I could repeat this behaviour only with this spike:
DataTable {
dom: '<"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"<"#tInfo">f>t'
}
How can I clarify, that I want to add header in a new way?
DataTables live - http://live.datatables.net/petupeto/1/edit?html,js,output
Fiddle - http://fiddle.jshell.net/2syoa2gv/
I made some researches and found that dataTables.jqueryui just extends default settings of datatables.
$.extend( true, DataTable.defaults, {
dom:
'<"'+toolbar_prefix+'tl ui-corner-tr"lfr>'+
't'+
'<"'+toolbar_prefix+'bl ui-corner-br"ip>',
renderer: 'jqueryui'
} );
so there is no any ability to make custom header with jquery-ui integration in new way
I copied the jQuery passthrough example from here http://angular-ui.github.com to this fiddle http://jsfiddle.net/ilyaD/Xe48t/3/ and it is not working. I am getting ui is not defined
this is the JS:
angular.module('ui.config', []).value('ui.config', {
// The ui-jq directive namespace
jq: {
// The Tooltip namespace
tooltip: {
// Tooltip options. This object will be used as the defaults
placement: 'right'
}
}
});
what did I miss?
UPADTE:
I added ui to angular.module('ui.config', ['ui']).value('ui.config', { but still not working http://jsfiddle.net/Xe48t/9/
Actually, you're not supposed to declare the value on the ui.config module. You declare it on your own app and it will take precedence:
angular.module('myApp', ['ui']).value('ui.config', {
jq: {
// whatever
}
});
Note that this is defined on myApp
It also helps if you:
run your JS in the right place (head)
have AngularJS initialize properly (using ng-app)
and load the bootstrap lib and css
http://jsfiddle.net/Xe48t/12/
Make sure you're including the AngularUI javascript file, and then you want to use the string "ui".
angular.module('ui.config', ['ui'])
You missed the ui dependency:
angular.module('ui.config', ['ui']).value('ui.config', {
http://jsfiddle.net/Xe48t/4/
Would it be possible to use a project-specific stylesheet for JIRA projects?
For example, if I would like to include project X in an iframe, I'd like to hide the logo and possibly the JIRA toolbar - for specific user groups for example (it's only for viewing purpose, it is not a security feature)
Granted that I'd have to implement this myself (through the webservice api for example) - are there templates for the standard issue page?
Thanks in advance!
There is a (currently undocumented) plugin point in JIRA for inserting top navigation components, <top-navigation>.
You can use this plugin point to add your own navigation bar, and perhaps hide the normal bar using an inline CSS stylesheet. The following example triggers this behavior by using a ?hideit=true query parameter, which is the simplest way to approach the "embed in iframe" problem. You could make that "sticky" by storing it in a session or cookie.
Once you have created a plugin that plugins into the <top-navigation>, hiding the top bar is simple. Here is a velocity script that does it:
#if ($hideHeaderHack)
<style>
\#header {display:none;}
</style>
HIDDEN (remove this message eventually)
#else
NORMAL (remove this message eventually)
#end
To create such a plugin, use the Atlassian Plugin SDK (use atlas-create-jira-plugin). Your atlassian-plugin.xml should look like:
<atlassian-plugin key="${project.groupId}.${project.artifactId}" name="${project.name}" plugins-version="2">
<plugin-info>
<description>${project.description}</description>
<version>${project.version}</version>
<vendor name="${project.organization.name}" url="${project.organization.url}" />
</plugin-info>
<top-navigation key="standard-navigation-top"
name="Tigerblood"
class="com.madbean.topnavhack.TopNav" state='enabled'>
<resource type="velocity" name="view" location="topnav.vm"/>
<order>5</order>
</top-navigation>
</atlassian-plugin>
Your top-navigation implementation class (called com.madbean.topnavhack.TopNav above) should look like:
public class TopNav implements PluggableTopNavigation {
private TopNavigationModuleDescriptor descriptor;
public void init(TopNavigationModuleDescriptor descriptor)
{
this.descriptor = descriptor;
}
public String getHtml(HttpServletRequest request) {
Map<String,Object> params = new HashMap<String, Object>();
params.put("hideHeaderHack", "true".equals(request.getParameter("hideit")));
return descriptor.getTopNavigationHtml(request, params);
}
}
Your plugin will be laid out something like:
./pom.xml
./src/main/java/com/madbean/topnavhack/TopNav.java
./src/main/resources/atlassian-plugin.xml
./src/main/resources/topnav.vm
Disclaimer I work for Atlassian as a developer in the JIRA team.
I don't believe this functionality is exposed directly, and you don't state what JIRA version you are using, but in 4.x in \atlassian-jira\includes\decorators there is a file called bodytop.jsp the has the following fragment that renders the top level navigation and toolbar elements:
// Render all the top nav plugins
for (Iterator iterator = topNavPlugins.iterator(); iterator.hasNext();) {
TopNavigationModuleDescriptor topNavModuleDescriptor = (TopNavigationModuleDescriptor) iterator.next();
PluggableTopNavigation pluggableTopNavigation = (PluggableTopNavigation) topNavModuleDescriptor.getModule();
%>
<%= pluggableTopNavigation.getHtml(request) %>
<%
}
%>
If you wanted to you could create a version of the dashboard rendering jsp that calls a modified bodytop.jsp that renders none of the usual nav elements.
I would be tempted to write a basic plugin to do this.
Take a look at http://confluence.atlassian.com/display/JIRA/Web+Resource+Plugin+Module
If you have yet to write a jira plugin, now might be the time to try it out http://confluence.atlassian.com/display/DEVNET/Developing+your+Plugin+using+the+Atlassian+Plugin+SDK .
I'm currently running Jira 4.2.2 and wrote a plugin that implements PluggableTopNavigation for a custom navigation bar. Unfortunately, this functionality, as detailed in the awarded question, is now depreciated.
My plugin added a div to the top of the Jira header that created a nice menu for use with our development pages. The source of the menu was hard-coded into the plugin and located as a static menu.html file on our server for sharing across different pages.
Since I'd have to completely redesign the plugin for Jira 5.2, I started searching for different ways to re-implement the menu. Here's what I settled on. It's not pretty, but it makes it so you don't have to write a plugin.
Change your announcement banner (quickly get there by typing 'gg', then search for announcement banner) to the following:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery.get("http://path.to.server/menu.html", function(data){
jQuery("#header").prepend('<nav class="global" role="navigation">'+data+'</nav>');
jQuery("#top-level-id-of-navbar a").css("color", "white")
});
});
</script>
Replace the menu.html link with your own link. The color of the header was inherited by the links in my menu, so I had to change them back to white after inserting the html page.
The result looks identical to Jira 4.2.2, so I'm happy.