I'm trying to make my own theme for jstree by way of ember-cli-jstree. I thought I would start by using the proton theme. I copied the proton directory from this link into my public directory in my app and added the name of the theme to my jsconfig blob in my controller:
jsTreeConfig: {
themes: {
name: 'proton',
dots: false,
icons: false,
variant: 'large',
},
},
However, this causes the styles to break completely. I haven't found great documentation for creating a custom theme using the ember-cli-jstree addon so any pointers in the right direction there would be helpful.
You can't link directly to the public directory in ember because of the way that directory is treated in the build process. I deleted the public directory from my URL and it worked.
jsTreeConfig: {
themes: {
name: 'my-theme',
url: '../../my-theme/style.css',
},
},
Related
I am just trying out the new Tailwind CSS 'jit' mode and realized when switched Webstorm fails to autocomplete the Tailwind CSS classes.
May there be a fix to this?
my tailwind.config.js;
module.exports = {
mode: 'jit',
purge: [
'./public/**/*.html',
'./src/**/*.{js,jsx,ts,tsx,vue}',
],
presets: [],
darkMode: false, // or 'media' or 'class'
theme: {...}
...
My postcss config (inside nuxt.config.js);
postcss: {
plugins: {
'tailwindcss': {},
'#tailwindcss/jit': {},
autoprefixer: {},
}
}
It's a known issue: with "jit" mode, code completion list is very limited, most of applicable CSS classes are not suggested. This will be fixed in the scope of WEB-50318, please follow it for updates.
Note also that, when using latest tailwindcss versions, the completion includes unrelated CSS classes from some *.test.css files. This will be fixed with the next tailwindcss package update, see https://github.com/tailwindlabs/tailwindcss/issues/4393. Workaround: delete node_modules/tailwindcss/jit/tests/ folder, it's not needed.
I wanted to change my color scheme and therefore added custom colors to tailwind in the tailwindconfig file, but although in can find them in the master.css after building the css, the flask dev server doesnt not use the new colors but the old ones.
I looked if I have connected the wrong stylesheet but I actually have connected the right one.
help would very much appreciated. Thank you already!
tailwind.config.js
purge: [],
theme: {
extend: {
fontFamily: {
"mont": "montserrat"
},
colors: {
"primary": "#595b83",
"secondary": "#f4abc4",
"third": "#f4abc4",
"fourth": "#060930"
}
},
},
variants: {},
plugins: [],
}
It may be that your browser uses the cache, and you need to clear the cache before refreshing the page.
If you are using Google Chrome, press the ctrl+shift+delete key combination to enter the clear cache page.
Am using ember-models-table to display table in my applicaiton. The table is great for sorting , pagination etc, but am trying to route from specific row to different page based on the id. it has mentioned in its example to use 'routeName'
But when I use it throws the following error:
"Assertion Failed: When calling warn you must provide an options hash as the third parameter. options should include an id property."
My .js coding :
columns:[
{
"propertyName": "firstName",
"title":"First Name",
"routeName":"/#/profile/_id"
},
and so on
Thanks for your help.
update: the error is gone after updating ember to ember 3.1.2
but there is a warning and its not functioning properly as expected , where am i going wrong?
my code :
columns:[
{
"propertyName": "firstName",
"title":"First Name",
"routeName":"profile"
},
If you look at the example app for this addon, you'll see the following syntax for the route:
{
propertyName: 'id',
routeName: 'users.user'
},
This roughly corresponds to a route like users/1. So, if this is your router:
Router.map(function() {
this.route('users', function() {
this.route('user', { path: '/users/:user_id' });
});
});
And here are the columns:
columns: [
{
"propertyName": "something",
"routeName": "users.user"
},
{
"propertyName": "id",
"routeName": "users.user"
}
]
Here's the template:
{{models-table
data=model
columns=columns
...
}}
routeName should not include the id segment.
Hover over the anchor tag created to see where it leads to, and make adjustments until it matches where it should go. It will only render when there's a valid route for the link. The path seems like it might be relative, so if you're already on the users route, you may only need to specify user for the routeName.
I figured this out by searching the addon codebase for routeName and then trying it out with the same kind of format that {{link-to}} helper uses in Ember.
P.S. this is some missing info in the documentation, so if this addon is helping you out, consider making a PR to help others.
Despite using the Dojo build system, my app is still including a large number of javascript files which I would have hoped to be covered by the build.
Here's my build profile:
var profile = (function(){
return {
basePath: "./",
releaseDir: "release",
action: "release",
selectorEngine: "acme",
cssOptimize: "comments.keepLines",
packages:[{
name: "dojo",
location: "dojo"
},{
name: "dijit",
location: "dijit"
},{
name: "dojox",
location: "dojox"
},{
name: "my",
location: "my"
}],
layers: {
"my/admin": {
include: ['dojo/ready', 'dojo/dom', 'dojo/query', 'dojo/request/xhr', 'my/Form', 'my/Tree/Radio']
}
}
};
})();
The app is still including the following JS files on each request: my/Form.js (even though this is listed in the profile), dojo/fx/Toggler.js, dijit/_base.js, dijit/WidgetSet.js, dijit/_base/focus.js, dijit/_base/place.js, dijit/place.js, dijit/_base/popup.js, dijit/popup.js, dijit/BackgroundIframe.js, dijit/_base/scroll.js, dijit/_base/sniff.js, dijit/_base/typematic.js, dijit/typematic.js, dijit/_base/wai.js, dijit/_base/window.js.
my/Tree/Radio extends dijit/Tree, so I'm assuming a lot of the files above are dijit base files that are being loaded automatically by dijit.Tree. But surely the build tool should resolve dependencies like this and include them in the 'built' file?
I am using Dojo 1.8.3.
In dojo/fx, it dynamically looks up the Toggler with the comment
use indirection so modules not rolled into a build
Not sure why, but if you add dojo/fx/Toggler to the include of your build script, it should not make the additional xhr requests.
EDIT: Apparently dijit/Widget does something similar with dijit/_base, so you will want to add that to the includes as well.
http://trac.dojotoolkit.org/ticket/14262
I'm creating an app with some custom gauges using Rally SDK 2.0. This requires some custom HTML. I took a rake-compiled app.html file from the examples as a starting point. Using JustGage for my gauges. Here is my launch function.
launch: function () {
var info = this.getStoriesForProject(); //Gets some aggregate info
$('#header label').html(info.Title);
var g = new JustGage({
id: "devgauge",
value: info.DevPercent,
levelColors: ['#f80404', '#f8f804', '#50ed0e'],
min: 0,
max: 100,
title: "Dev %"
});
this.add('foo');
},
Then I added some custom HTML in app.html.
Now, if i run this without the code "this.add('foo')", the app adds a new div in the body with class="x-container" and puts my custom HTML outside that div effectively hiding it.
If i use the "this.add('foo') it does NOT create the div class=x-container and it shows my widget just fine.
What is the PROPER way to accomplish what I'm attempting using the 2.0 sdk? I realize the add method is for adding Ext components, but somehow calling this is causing my HTML to render ok. Looking at some apps we developed in the old SDK, using the custom HTML worked just fine in those.
Ext likes to know what is going on layout-wise and often gets confused if you're manually manipulating the dom beneath it without its knowledge. Usually if we have some known set of initial layout we add those via the items collection on the app:
Ext.define('My.App', {
extend: 'Rally.app.App',
items: [
{
xtype: 'container',
itemId: 'header'
},
{
xtype: 'container',
itemId: 'devguage'
}
]
});
Then inside of launch you can add content to those like so:
this.down('#devguage').add({
//some other component
});
You can always just drop all the way down to the element level though as well:
this.down('#header').getEl().dom //the raw html element
By default apps use an auto layout, so any items should flow as you would expect with normal html.
Or, instead of using itemId, you can set the id of the container's element using its id property:
Ext.define('My.App', {
extend: 'Rally.app.App',
items: [
{
xtype: 'container',
id: 'header'
},
{
xtype: 'container',
id: 'devguage'
}
]
});
The resulting html elements will use those ids, which allows you to target them directly with your own custom rendering.