mirror of
https://github.com/wekan/wekan.git
synced 2025-12-16 23:40:13 +01:00
Reorganized Docs. In Progress.
This commit is contained in:
Lauri Ojansivu
parent
1961e22cbd
commit
ce89ff4833
202 changed files with 0 additions and 0 deletions
50
docs/Theme/Converting-Meteor-Stylus-to-CSS.md
Normal file
50
docs/Theme/Converting-Meteor-Stylus-to-CSS.md
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
[Original issue](https://github.com/wekan/wekan/issues/4512)
|
||||
|
||||
## Introduction
|
||||
|
||||
Previously WeKan used Stylus, that is similar to CSS. Stylus has some additional features.
|
||||
|
||||
Stylus code was located at `wekan/client/components/*/*.styl`, for example `wekan/client/components/boards/boardsList.styl`.
|
||||
|
||||
## Why
|
||||
|
||||
- `coagmano:stylus` is not maintained anymore
|
||||
- When building meteor bundle, `coagmano:stylus` causes [errors like Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency](https://github.com/Meteor-Community-Packages/meteor-stylus/issues/9) with newest Meteor 2.7.2
|
||||
- Removing `coagmano:stylus` fixed [Mermaid Diagram error: Maximum call stack size exceeded](https://github.com/wekan/wekan/issues/4251) from browserside right click / Inspect / Console. After removing `coagmano:stylus`, that error was not there anymore.
|
||||
|
||||
## Converting Stylus to CSS
|
||||
|
||||
[Source](https://github.com/wekan/wekan/blob/main/releases/stylus-to-css.sh)
|
||||
|
||||
#### 1) Install Stylus
|
||||
```
|
||||
sudo npm -g install stylus
|
||||
```
|
||||
#### 2) Comment out `@import 'nib'` that is not supported syntax in newest plain Stylus, for all .styl files in directory
|
||||
```
|
||||
sed -i "s|@import 'nib'|//@import 'nib'|g" *.styl
|
||||
```
|
||||
That code `@import 'nib'` is using [CSS imports](https://developer.mozilla.org/en-US/docs/Web/CSS/@import) that does [Eric Meyer's CSS reset of styles](https://github.com/stylus/nib/blob/master/lib/nib/reset.styl). xet7 [added that reset to separate CSS file](https://github.com/wekan/wekan/commit/985c2cdbfdb38eb43852f3aa257859bbd3f817b9). While in [original converting Stylus to CSS](https://github.com/wekan/wekan/commit/072778b9aaefd7fcaa7519b1ce1cafc1704d646d) that `@import 'nib'` was in many files, it seems it's enough to have it at [client/components/boards/boardsList.css](https://github.com/wekan/wekan/commit/985c2cdbfdb38eb43852f3aa257859bbd3f817b9#diff-c227ea7dd2df8f46604db81ce7c49902b7e8829266ab79bb1c80077b5ba2b5b0) that is used at all pages of WeKan.
|
||||
|
||||
Alternative to CSS imports would be to add that CSS code to beginning of that CSS file where it is needed.
|
||||
|
||||
Other CSS transpilers may use similar imports.
|
||||
|
||||
Not having all requires CSS can be seen like:
|
||||
- [Some extra bullets](https://github.com/wekan/wekan/issues/4516)
|
||||
- [Some wrong colors](https://github.com/wekan/wekan/issues/4519)
|
||||
|
||||
#### 3) For all files in directory, run command `stylus filename.styl`
|
||||
```
|
||||
ls *.styl | xargs stylus
|
||||
```
|
||||
#### 4) Remove `coagmano:stylus`
|
||||
```
|
||||
meteor remove coagmano:stylus
|
||||
```
|
||||
#### 5) Delete .styl files
|
||||
```
|
||||
cd wekan
|
||||
rm client/components/*/*.styl
|
||||
```
|
||||
|
||||
217
docs/Theme/Custom-CSS-themes.md
Normal file
217
docs/Theme/Custom-CSS-themes.md
Normal file
|
|
@ -0,0 +1,217 @@
|
|||
Here is how to build wekan code and add your new theme with code changes and send as pull request:
|
||||
https://github.com/wekan/wekan/wiki/Emoji#how-you-could-add-another-plugin
|
||||
|
||||
Here is how some have sent previous themes to Wekan, what code changes they made:
|
||||
https://github.com/wekan/wekan/pulls?q=is%3Apr+is%3Aclosed+theme
|
||||
|
||||
After you have sent new theme as pull request, you see it as open pull request:
|
||||
https://github.com/wekan/wekan/pulls?q=is%3Apr+theme+is%3Aopen
|
||||
|
||||
And when I have merged it to Wekan, that theme will be in next Wekan release, listed at ChangeLog:
|
||||
https://github.com/wekan/wekan/blob/main/CHANGELOG.md
|
||||
|
||||
At Wekan Snap page you see with webpage reload, when new version has been released:
|
||||
https://snapcraft.io/wekan
|
||||
|
||||
Wekan Snap version gets updates automatically soon after new Wekan version has been released, or you can update manually immediately:
|
||||
https://github.com/wekan/wekan-snap/wiki/Automatic-update-schedule
|
||||
|
||||
***
|
||||
|
||||
Also see: [Dark Mode](Dark-Mode)
|
||||
|
||||
All Wekan themes are directly integrated to Wekan. You can add pull request to master branch to add custom theme, you can see from [from this commit](https://github.com/wekan/wekan/commit/34b2168d0dda253dedabbee47031873efa4ae446) required new color/theme name and changes to these files 3 files listed below. In that commit is also changes to other files, you don't need to change those files.
|
||||
- `wekan/client/components/boards/boardColors.styl`
|
||||
- `wekan/models/boards.js`
|
||||
- `wekan/server/migrations.js`
|
||||
|
||||
Alternatives for sending new theme as pull request:
|
||||
- If you would like to have some new theme, please add screenshot mockup to [new Wekan issue](https://github.com/wekan/wekan/issues).
|
||||
- If possible, you can also try to create those CSS changes with [Stylish browser extension](https://userstyles.org/) and add those to new issue too.
|
||||
|
||||
There are currently board color modes/themes, and these full themes:
|
||||
- Dark: modified from below by @lonix1 and more changes by xet7
|
||||
- Relax: Light green background that helps Wekan users to relax in company of Wekan contributor that sent theme CSS.
|
||||
|
||||
Upcoming full themes that will be added by xet7:
|
||||
- Corteza, that will be mostly-white theme, although different than example of white theme below
|
||||
- Octopus, that will have different colors and some Wekan features hidden
|
||||
|
||||
|
||||
|
||||
## Dark theme
|
||||
|
||||
[by @lonix1](https://github.com/wekan/wekan/issues/1149), could look a little like this screenshot mockup:
|
||||
|
||||
<!--
|
||||
|
||||
-->
|
||||
|
||||
lonix1 created some css overrides with Stylish. It's not complete but I'm happy with it. I work in swimlanes mode, so that is what I changed (not list mode or calendar mode).
|
||||
|
||||
Colors:
|
||||
- adds dark mode, I used vscode as a reference
|
||||
|
||||
Other:
|
||||
- hides various useless icons and things
|
||||
- hides "add card", "add swimlane", "add list" links, until hovered (I find these very "noisy")
|
||||
|
||||
```css
|
||||
/* HIDE PERMANENTLY -------------------------------------------------- */
|
||||
|
||||
/* various */
|
||||
.wekan-logo,
|
||||
.close-card-details { display:none; }
|
||||
|
||||
/* header text */
|
||||
#header-quick-access >ul >li:nth-child(1) >a { font-size:0; }
|
||||
#header-quick-access >ul >li:nth-child(1) >a >.fa-home{ font-size:12px; margin:0; }
|
||||
|
||||
/* popup menu titles (boards, swimlanes, lists, cards, labels) */
|
||||
.pop-over >.header { display:none; }
|
||||
|
||||
/* OPTIONAL
|
||||
card fields: received, start, due, end, members, requested, assigned
|
||||
I rarely use these... uncomment if you want to hide them */
|
||||
/*
|
||||
.card-details-item.card-details-item-received,
|
||||
.card-details-item.card-details-item-start,
|
||||
.card-details-item.card-details-item-due,
|
||||
.card-details-item.card-details-item-end,
|
||||
.card-details-item.card-details-item-members,
|
||||
.card-details-item.card-details-item-name { display:none; }
|
||||
.card-details-items:empty { display:none; }
|
||||
*/
|
||||
|
||||
/* HIDE UNTIL HOVER -------------------------------------------------- */
|
||||
|
||||
/* header "+" button */
|
||||
#header-quick-access .fa-plus { display:none; }
|
||||
#header-quick-access:hover .fa-plus { display:inherit; }
|
||||
|
||||
/* "add card" links (use visibility rather than display so items don't jump) */
|
||||
.open-minicard-composer { visibility:hidden; }
|
||||
.list.js-list:hover .open-minicard-composer { visibility:visible; }
|
||||
.list-header-menu { visibility:hidden; }
|
||||
.list.js-list:hover .list-header-menu { visibility:visible; }
|
||||
|
||||
/* "add list/swimlane" links (use visibility rather than display so items don't jump) */
|
||||
.list.js-list-composer >.list-header { visibility:hidden; }
|
||||
.list.js-list-composer:hover >.list-header { visibility:visible; }
|
||||
|
||||
/* DARK MODE -------------------------------------------------- */
|
||||
|
||||
/* headers */
|
||||
#header-quick-access, #header { background-color:rgba(0,0,0,.75) !important; }
|
||||
#header .board-header-btn:hover { background-color:rgba(255,255,255,0.3) !important; }
|
||||
|
||||
/* backgrounds: swimlanes, lists */
|
||||
.swimlane { background-color:rgba(0,0,0,1); }
|
||||
.swimlane >.swimlane-header-wrap,
|
||||
.swimlane >.list.js-list,
|
||||
.swimlane >.list-composer.js-list-composer { background-color:rgba(0,0,0,.9); }
|
||||
|
||||
/* foregrounds: swimlanes, lists */
|
||||
.list >.list-header, .swimlane-header { color:rgba(255,255,255,.7); }
|
||||
|
||||
/* minicards */
|
||||
.minicard { background-color:rgba(255,255,255,.4); }
|
||||
.minicard-wrapper.is-selected .minicard,
|
||||
.minicard:hover,
|
||||
.minicard-composer.js-composer,
|
||||
.open-minicard-composer:hover { background-color:rgba(255,255,255,.8) !important; color:#000; }
|
||||
.minicard, .minicard .badge { color:#fff; }
|
||||
.minicard:hover .badge, .minicard-wrapper.is-selected .badge { color:#000; }
|
||||
|
||||
/* cards */
|
||||
.card-details,
|
||||
.card-details .card-details-header { background-color:#ccc; }
|
||||
|
||||
/* sidebar */
|
||||
.sidebar-tongue, .sidebar-shadow { background-color:#666 !important; }
|
||||
.sidebar-content h3, .sidebar-content .activity-desc { color:rgba(255,255,255,.7) !important; }
|
||||
```
|
||||
|
||||
If anyone improves on this, please share here.
|
||||
|
||||
## White theme
|
||||
|
||||
[pravdomil](https://github.com/wekan/wekan/issues/1690) has created small script for tampermonkey to redesign wekan board.
|
||||
|
||||
|
||||
|
||||
script for tampermonkey
|
||||
```js
|
||||
// ==UserScript==
|
||||
// @name Kanban
|
||||
// @namespace https://pravdomil.com/
|
||||
// @version 0.1
|
||||
// @match https://wekan.indie.host/*
|
||||
// @grant none
|
||||
// ==/UserScript==
|
||||
|
||||
;(function() {
|
||||
const el = document.createElement("style")
|
||||
// language=CSS
|
||||
el.textContent = `
|
||||
/* white background */
|
||||
body { background-color: white; }
|
||||
|
||||
/* header bar next to top bar */
|
||||
#header #header-main-bar {
|
||||
position: absolute;
|
||||
right: 70px;
|
||||
left: 300px;
|
||||
top: -3px;
|
||||
padding: 0;
|
||||
height: calc(28px + 3px);
|
||||
}
|
||||
|
||||
/* swimlane white background, no borders, fix ellipsis */
|
||||
.swimlane { background-color: white; }
|
||||
.swimlane-header-wrap { border: 0 !important; }
|
||||
.swimlane-header { text-overflow: initial !important; }
|
||||
|
||||
/* column header only for first row */
|
||||
.swimlane .list-header { margin: 4px 12px 4px; }
|
||||
.swimlane .list-header-name { display: none; }
|
||||
div:nth-child(1 of .swimlane) .list-header { margin: 20px 12px 4px; }
|
||||
div:nth-child(1 of .swimlane) .list-header-name { display: inline; }
|
||||
|
||||
/* cells no borders, fix height, less padding, no add new card */
|
||||
.list { border: 0; background-color: white; flex: 300px 0 0; }
|
||||
.list .list-body { height: 160px; padding: 0 2px; }
|
||||
.list .open-minicard-composer { display: none; }
|
||||
.list .open-list-composer { opacity: 0; transition: opacity .2s; }
|
||||
.list .open-list-composer:hover { opacity: 1; }
|
||||
|
||||
/* card style */
|
||||
.minicard-wrapper { margin-bottom: 2px !important; }
|
||||
.minicard { box-shadow: 0 0 16px rgba(0,0,0,0.15) inset; }
|
||||
|
||||
/* card style for first and last column */
|
||||
.swimlane .list:nth-child(2) .minicard { opacity: .5 !important; }
|
||||
.swimlane .list:nth-last-child(2) .minicard { opacity: .1 !important; }
|
||||
|
||||
/* card details always center, menu items tweaks */
|
||||
.card-details {
|
||||
position: absolute;
|
||||
z-index: 10000 !important;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: calc(50% - 510px / 2);
|
||||
}
|
||||
.pop-over-list .js-labels { display: none }
|
||||
.pop-over-list .js-move-card-to-top { display: none }
|
||||
.pop-over-list .js-move-card-to-bottom { display: none }
|
||||
.pop-over-list .js-archive { color: darkred }
|
||||
|
||||
/* not needed */
|
||||
.wekan-logo, .js-member, .attachments-galery { display: none; }
|
||||
|
||||
`
|
||||
|
||||
document.body.appendChild(el)
|
||||
})()
|
||||
|
||||
```
|
||||
22
docs/Theme/Dark-Mode.md
Normal file
22
docs/Theme/Dark-Mode.md
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
## Wekan Dark Mode
|
||||
|
||||
|
||||
|
||||
## Other Dark Modes
|
||||
|
||||
### Chrome Desktop Browser
|
||||
- [Dark Mode Extension](https://chrome.google.com/webstore/detail/dark-mode-for-chrome/geooakdjiamlhpechokegobmhdmlgidk) - changes all webpages to dark, including Wekan.
|
||||
- [Decent - Dark Theme](https://chrome.google.com/webstore/detail/decent/bnnjhehfmlfkbdocbphdoagolcknbohp)
|
||||
|
||||
### Firefox Desktop and Mobile Browser
|
||||
- [Dark Mode Webextension](https://addons.mozilla.org/en-US/android/addon/dark-mode-webextension/) - changes all webpages to dark, including Wekan.
|
||||
- There is dark themes, depends what someone likes
|
||||
|
||||
### Thunderbird Email
|
||||
- [TT DeepDark - Dark Theme](https://addons.thunderbird.net/en-US/thunderbird/addon/tt-deepdark/) - after installing click Edit/Preferences/Display/Colors/Font&Colors-Colors Text: Grey Background: Black and also Plain Text Messages Color: Black.
|
||||
|
||||
### Qubes OS Desktop
|
||||
- Start / System Tools / Appearance / Styles: Adwaita-dark
|
||||
|
||||
### Android M
|
||||
- [Dark Phone Theme](https://www.phonearena.com/news/Finally-Android-M-scores-a-new-system-wide-dark-UI-theme_id69814)
|
||||
Loading…
Add table
Add a link
Reference in a new issue