Commit Graph

14 Commits

Author SHA1 Message Date
Robert Kaussow
7109f3c6d1 Change default icon size to 20 (#4458)
Co-authored-by: Patrick Schratz <patrick.schratz@gmail.com>
2024-11-26 20:02:29 +01:00
Anbraten
d0927e37dc Untangle settings / header slots (#4403) 2024-11-18 15:16:30 +01:00
qwerty287
059cb93d06 Remove unplugin-icons (#3809) 2024-07-17 08:13:56 -07:00
Lukas
5a7e314f5a Link labels to input and select (#2974) 2023-12-19 22:32:35 +02:00
Anbraten
fe489287fc Fix active tab not updating on prop change (#2712) 2023-11-03 16:01:14 +01:00
Anbraten
284fb99194 UI cleanups and improvements (#2548) 2023-10-08 17:49:13 +02:00
Robert Kaussow
91192a900a Truncate commit message in pipeline log view header (#2356) 2023-08-30 16:17:01 +02:00
qwerty287
9718791eac Increase header padding again (#2348)
From #2327
(https://github.com/woodpecker-ci/woodpecker/pull/2327#pullrequestreview-1600673521)

This probably needs some discussion first, but I think it looks ugly
with the current padding.

**Before**
![Screenshot 2023-08-29 at 17-17-00
Woodpecker](https://github.com/woodpecker-ci/woodpecker/assets/80460567/0f4df035-b10e-4309-b119-2044fad1d534)

**After**
![Screenshot 2023-08-29 at 17-16-48
Woodpecker](https://github.com/woodpecker-ci/woodpecker/assets/80460567/c45328c1-c3bf-401d-83fa-1b4b1b96d0c0)
2023-08-29 18:31:25 +02:00
Robert Kaussow
81aa9b1439 Use full width header on pipeline view and show repo name (#2327)
Co-authored-by: Patrick Schratz <patrick.schratz@gmail.com>
Co-authored-by: 6543 <m.huber@kithara.com>
2023-08-29 15:57:58 +02:00
Robert Kaussow
dca01e6817 Use consistent woodpecker color scheme (#2003)
Fixes: https://github.com/woodpecker-ci/woodpecker/issues/1079

What do you think about using a consistent `woodpecker` color scheme?
Right now, the `lime` color scheme from windicss is used that does not
really fit the primary color used for the documentation website. I have
used the primary color `#4CAF50` from the docs and created a color
palette with https://palettte.app/:

<details>
  <summary>JSON source</summary>

```Json
[
  {
    "paletteName": "New Palette",
    "swatches": [
      {
        "name": "New Swatch",
        "color": "166E30"
      },
      {
        "name": "New Swatch",
        "color": "248438"
      },
      {
        "name": "New Swatch",
        "color": "369943"
      },
      {
        "name": "New Swatch",
        "color": "4CAF50"
      },
      {
        "name": "New Swatch",
        "color": "68C464"
      },
      {
        "name": "New Swatch",
        "color": "8AD97F"
      }
    ]
  }
]
```

</details>


![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/a254f1e0-ce17-43a9-9e8b-72252296fd6f)

I have added this color scheme to the windicss config and replaced the
use of `lime` in the UI. While `woodpecker-300` would be the primary
color that is used for the docs, I currently use `woodpecke-400` as
primary color for the UI to fix some contrast issues.


![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/7bf751e1-f2a6-481c-bee7-a27d27cf8adb)

![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/e5673dc7-81c1-4fd4-bef9-14494bc5aa27)

What do you think? If you would like to stay with the current colors,
that's fine for me, I can just use the custom CSS feature in this case.

---------

Co-authored-by: 6543 <6543@obermui.de>
2023-08-02 09:09:12 +02:00
Anbraten
25e2c8055c UI improvements (#1640) 2023-03-18 21:49:12 +01:00
Lukas
2dfa231184 Unify buttons, links and improve focus styles (#1317) 2022-11-18 08:10:43 +01:00
Lukas
8593b756b8 Use html landmark elements (#1361)
Co-authored-by: Anbraten <anton@ju60.de>
2022-10-31 15:04:19 +01:00
Divya Jain
e2ab8a46ed Header and Tabs UI Improvements (#1290)
Some improvements to the Page Header and Tab UI.

Original |  New
:--------:|:-------:

![image](https://user-images.githubusercontent.com/62170586/197360886-046f1016-ca39-4b69-8134-99ba88e3a0c2.png)
|
![image](https://user-images.githubusercontent.com/62170586/197360819-7efd0d82-1412-465d-aefa-039164f97465.png)

![image](https://user-images.githubusercontent.com/62170586/197360872-f2ece5fd-7c0b-4e2c-8629-31524a412af5.png)
|
![image](https://user-images.githubusercontent.com/62170586/197360830-49f09e0d-619e-4fa9-8e38-8d05d9404185.png)

![image](https://user-images.githubusercontent.com/62170586/197281776-e3de6441-9417-4614-8b25-1aaef0b8da61.png)
|
![image](https://user-images.githubusercontent.com/62170586/197281698-40c66d34-76f3-4fd5-97e3-1c422b74844c.png)

![image](https://user-images.githubusercontent.com/62170586/196609248-ff150c6e-2995-4bcc-8573-49ffaf388446.png)
|
![image](https://user-images.githubusercontent.com/62170586/197323734-7c1a1b79-0f41-4bf2-96a3-dd38df9e1415.png)

![image](https://user-images.githubusercontent.com/62170586/196609329-b7a6f37e-e8c2-4004-a98b-73f837122ff8.png)
|
![image](https://user-images.githubusercontent.com/62170586/197323882-10141ffd-7411-4493-8291-b8000adc3cc5.png)


What?
- Create a new Scaffold component, which includes the header and tabs
required for a page.
- Use this component to wrap all the views that have a header.
- Ensures consistency in headers between different pages.
- [x] Add support to use custom html/component in place of title (for
repo page, pipeline page, etc)
- [x] Add support of right icon buttons (for repo page, pipeline page,
etc)
- [x] Refactor tabs handling using compositions (useTabsProvider, useTabsClient)
- [x] Make new header ui resposive
2022-10-28 00:55:07 +02:00