devexpress / themebuilder Goto Github PK

A tool for creating custom DevExtreme themes

Home Page: https://devexpress.github.io/ThemeBuilder/

TypeScript 51.93% CSS 13.76% HTML 34.16% JavaScript 0.15%

devextreme themebuilder custom-themes custom-theme

themebuilder's Introduction

DevExtreme ThemeBuilder UI

The DevExtreme ThemeBuilder UI allows you to modify themes shipped with DevExtreme or create custom themes. This tool is available online.

If you need to run the ThemeBuilder UI locally, clone this repository and follow the instructions below.

Prerequisites

You will need Node.js 12.16 or higher and npm 5.5.1 or higher. The app is built using angular-cli. Run npm install @angular/cli -g to install it.

Install required packages and Launch

Run the following commands:

npm install
npm start

Go to http://localhost:4200/.

NOTE: The ThemeBuilder UI creates themes for the latest minor DevExtreme version. If you want to create a theme for a specific version, use the ThemeBuilder CLI.

themebuilder's People

Contributors

Stargazers

Watchers

themebuilder's Issues

Online .dx-badge No Option To Set

Did I miss the option to set the .dx-badge background color in the online version?

Oldest supported version?

What's the oldest version of devextreme that this supports? I tried updating packages.json to get 15.1.15, but it says it can't find it.

Version 20.1.6 - excel export button issue with angular

I've updated my theme to version 20.1.6 (custom theme), the css output of the .dx-icon-export-excel-button is significantly different compared to how it used to be and the export icon is not found anymore showing a blank icon:

From my own analysis, the problem seems to be with that rule specifically:

.dx-datagrid-export-button .dx-icon-export-excel-button:before {
  content: "\f117";
}

while it previously was:

.dx-datagrid-export-button .dx-icon-export-excel-button:before {
    content: '\f060';
}

replacing that specific css part fixes the issue and the icon properly appears as intended:

Am I losing something or is it actually an issue?

Thanks.

Theme builder filter by feature doesn't consider theme items in filtering

Steps to Reproduce:

Open theme builder by https://js.devexpress.com/ThemeBuilder/
Type Accent in search bar

Results You Received:

Filter all properties and show that ones containing word "Accent" for example first one in Base Theming

Results You Expected:

It doesn't show anything

Note: Filter works for filtering "Data Grid" for example, which is not that useful, for example you want to change hover color, and you don't know where is it

What is the swatch option for?

I noticed that there is checkbox for save as swatch, but what does this do?

Also, a suggestion to improve this tool:

A CLI or library to generate the CSS based on metadata (without the Angular app).

v23.1.3: Daterangebox is missing in Theme Export if not All Widgets are selected

Daterangebox is missing in Theme Export if not All Widgets are selected.

For Example:

Daterangebox is in Theme Export

dx.generic.custom-scheme (all).zip

Daterangebox is missing in Theme Export

dx.generic.custom-scheme (exclude).zip

It doesn't matter which widget is unselected once one is unselected.

Problems with DevExtreme ThemeBuilder "Metadata has a wrong format."

I want to import an existing Theme in the DevExtreme ThemeBuilder via metadata. I got the error message "Metadata has a wrong format."

In the browser console log I can see that there are some CORS mistakes:

       Access to XMLHttpRequest at 'https://js.devexpress.com/api/themebuilder/buildtheme' from origin 'https://devexpress.github.io' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
main.862f94c9c5680e8be834.js:1 
        
       ERROR Error: Uncaught (in promise): n: {"headers":{"normalizedNames":{},"lazyUpdate":null,"headers":{}},"status":0,"statusText":"Unknown Error","url":"https://js.devexpress.com/api/themebuilder/buildtheme","ok":false,"name":"HttpErrorResponse","message":"Http failure response for https://js.devexpress.com/api/themebuilder/buildtheme: 0 Unknown Error","error":{"isTrusted":true}}
    at Lt (polyfills.a4090ea770c837a9e0e3.js:1:21843)
    at Lt (polyfills.a4090ea770c837a9e0e3.js:1:21339)
    at polyfills.a4090ea770c837a9e0e3.js:1:22722
    at w.invokeTask (polyfills.a4090ea770c837a9e0e3.js:1:12360)
    at Object.onInvokeTask (main.862f94c9c5680e8be834.js:1:2183353)
    at w.invokeTask (polyfills.a4090ea770c837a9e0e3.js:1:12281)
    at w.runTask (polyfills.a4090ea770c837a9e0e3.js:1:7380)
    at $t (polyfills.a4090ea770c837a9e0e3.js:1:14780)
    at w.invokeTask [as invoke] (polyfills.a4090ea770c837a9e0e3.js:1:13531)
    at J (polyfills.a4090ea770c837a9e0e3.js:1:27317)
R6e @ main.862f94c9c5680e8be834.js:1
js.devexpress.com/api/themebuilder/buildtheme:1 

       Failed to load resource: net::ERR_FAILED
        
       Access to XMLHttpRequest at 'https://js.devexpress.com/api/themebuilder/metadata' from origin 'https://devexpress.github.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
main.862f94c9c5680e8be834.js:1 
        
       ERROR Error: Uncaught (in promise): n: {"headers":{"normalizedNames":{},"lazyUpdate":null,"headers":{}},"status":0,"statusText":"Unknown Error","url":"https://js.devexpress.com/api/themebuilder/metadata","ok":false,"name":"HttpErrorResponse","message":"Http failure response for https://js.devexpress.com/api/themebuilder/metadata: 0 Unknown Error","error":{"isTrusted":true}}
    at Lt (polyfills.a4090ea770c837a9e0e3.js:1:21843)
    at Lt (polyfills.a4090ea770c837a9e0e3.js:1:21339)
    at polyfills.a4090ea770c837a9e0e3.js:1:22722
    at w.invokeTask (polyfills.a4090ea770c837a9e0e3.js:1:12360)
    at Object.onInvokeTask (main.862f94c9c5680e8be834.js:1:2183353)
    at w.invokeTask (polyfills.a4090ea770c837a9e0e3.js:1:12281)
    at w.runTask (polyfills.a4090ea770c837a9e0e3.js:1:7380)
    at $t (polyfills.a4090ea770c837a9e0e3.js:1:14780)
    at w.invokeTask [as invoke] (polyfills.a4090ea770c837a9e0e3.js:1:13531)
    at J (polyfills.a4090ea770c837a9e0e3.js:1:27317)
R6e @ main.862f94c9c5680e8be834.js:1
js.devexpress.com/api/themebuilder/metadata:1 

       Failed to load resource: net::ERR_FAILED
        
       Failed to load resource: the server responded with a status of 404 ()