afonsof / jenkins-material-theme Goto Github PK
View Code? Open in Web Editor NEWBeautify your Jenkins with the Material Design theme!
Home Page: http://afonsof.com/jenkins-material-theme
License: MIT License
Beautify your Jenkins with the Material Design theme!
Home Page: http://afonsof.com/jenkins-material-theme
License: MIT License
The SafeRestart Plugin, https://wiki.jenkins-ci.org/display/JENKINS/SafeRestart+Plugin, adds it's own icon, any chance to add a replacement icon for this plugin, similar to what's been done for other plugins?
Here's the img src you'll need to override. /jenkins/static/2985eed1/plugin/saferestart/images/48x48/quick_restart.png
Hi,
there seems to be an issue with the pipeline stage view of jenkins v2 where the first stage overlaps the build info on the left (see attachment)
it only happens when width is over 1600px and some font sizes are updated
@media (min-width:1600px){
body#jenkins.j-hide-left #main-panel{max-width:75%}
body, table, form, input, td, th, p, textarea, select, #tasks .task
{font-size:14px;}
}
@media (min-width:2000px){
body#jenkins.j-hide-left #main-panel{max-width:85%}
body, table, form, input, td, th, p, textarea, select, #tasks .task
{font-size:15px;}
}
Thanks!
(I am using Chrome v51.0.2704.84 on Windows 10)
It's using the same icon used in history.
Need to use a different selector and replace by a pencil icon.
Hello,
If you use "Large" icons, then the global build history view (the one accessed via /view/All/builds
, not the sidebar version displayed for individual projects) looks fine
When set to "Medium", the new icons appear tiled behind the old
And in "Small" (the setting I tend to use), you can just see the new icon behind the old, in addition the console icon is the default.
I don't use this view very often, so minor issue as far as I'm concerned but thought I'd better mention it :)
(Screenshots taken from 1.1.9 from the new dist URL)
When I access the 'context' menu of a build node (i.e. the small down arrow right to it)
the menu is rendered at the top of the page instead of next to the node
From #31:
The editor for Groovy has some more problems, the cursor and and entered text start to separate quickly, colors seem to be unaffected tough.
<div id="workflow-editor-wrapper" style="position: relative;">
<textarea style="display: none;" checkdependson="sandbox" name="_.script" checkmethod="post" rows="5" class="setting-input validated " checkurl="/job/Workflow_Snippet_Generator_Dummy/descriptorByName/org.jenkinsci.plugins.workflow.cps.CpsFlowDefinition/checkScript"/>
<div class="jquery-ui-1">
<div style="position: absolute; right: 1px; z-index: 100; top: 1px;" class="samples">
<select>
<option>try sample Pipeline...</option>
<option value="hello">Hello World</option>
<option value="github-maven">GitHub + Maven</option>
</select>
</div>
<div id="workflow-editor" class="pane-frame ace_editor ui-resizable ace-tomorrow" style="height: 250px; border-bottom-width: 0.4em;">
<div style="position: absolute;"/>
<textarea style="opacity: 0; height: 14px; width: 8px; left: 53px; top: 35px;" spellcheck="false" autocapitalize="off" autocorrect="off" class="ace_text-input" wrap="off"/>
<div class="ace_gutter">
<div style="margin-top: -7px; height: 273px; width: 49px;" class="ace_layer ace_gutter-layer ace_folding-enabled">
<div style="height: 14px;" class="ace_gutter-cell ">4<span style="height: 14px;" class="ace_fold-widget ace_start ace_open"/>
</div>
<div style="height: 14px;" class="ace_gutter-cell ">5</div>
<div style="height: 14px;" class="ace_gutter-cell ">6</div>
<div style="height: 14px;" class="ace_gutter-cell ">7</div>
<div style="height: 14px;" class="ace_gutter-cell ">8</div>
<div style="height: 14px;" class="ace_gutter-cell ">9</div>
<div style="height: 14px;" class="ace_gutter-cell ">10</div>
<div style="height: 14px;" class="ace_gutter-cell ">11</div>
<div style="height: 14px;" class="ace_gutter-cell ">12<span style="height: 14px;" class="ace_fold-widget ace_start ace_open"/>
</div>
<div style="height: 14px;" class="ace_gutter-cell ">13</div>
<div style="height: 14px;" class="ace_gutter-cell ">14</div>
<div style="height: 14px;" class="ace_gutter-cell ">15<span style="height: 14px;" class="ace_fold-widget ace_start ace_open"/>
</div>
<div style="height: 14px;" class="ace_gutter-cell ">16</div>
<div style="height: 14px;" class="ace_gutter-cell ">17<span style="height: 14px;" class="ace_fold-widget ace_start ace_open"/>
</div>
<div style="height: 14px;" class="ace_gutter-cell ">18</div>
<div style="height: 14px;" class="ace_gutter-cell ">19</div>
<div style="height: 14px;" class="ace_gutter-cell ">20</div>
<div style="height: 14px;" class="ace_gutter-cell ">21</div>
<div style="height: 14px;" class="ace_gutter-cell ">22</div>
</div>
<div style="top: 35px; height: 14px;" class="ace_gutter-active-line"/>
</div>
<div style="left: 49px; right: 17px; bottom: 0px;" class="ace_scroller">
<div style="margin-top: -7px; width: 1099px; height: 273px; margin-left: 0px;" class="ace_content">
<div class="ace_layer ace_print-margin-layer">
<div style="left: 644px; visibility: visible;" class="ace_print-margin"/>
</div>
<div class="ace_layer ace_marker-layer">
<div class="ace_active-line" style="height:14px;top:42px;left:0;right:0;"/>
</div>
<div style="padding: 0px 4px;" class="ace_layer ace_text-layer">
<div class="ace_line" style="height:14px">
<span class="ace_keyword">def</span>
<span class="ace_identifier">dump</span>(<span class="ace_identifier">obj</span>) {</div>
<div class="ace_line" style="height:14px">
<span class="ace_identifier">println</span>
<span class="ace_string">"dump: "</span>
<span class="ace_keyword ace_operator">+</span>
<span class="ace_keyword">new</span>
<span class="ace_identifier">ReflectionToStringBuilder</span>(<span class="ace_identifier">obj</span>).<span class="ace_identifier">toString</span>()</div>
<div class="ace_line" style="height:14px">}</div>
<div class="ace_line" style="height:14px"/>
<div class="ace_line" style="height:14px">
<span class="ace_identifier">stage</span>
<span class="ace_identifier">concurrency</span>: <span class="ace_constant ace_numeric">1</span>, <span class="ace_identifier">name</span>: <span class="ace_string">'Build'</span>
</div>
<div class="ace_line" style="height:14px">
<span class="ace_keyword">def</span>
<span class="ace_identifier">allBuildServers</span>
<span class="ace_keyword ace_operator">=</span> [<span class="ace_string">'a'</span>, <span class="ace_string">'b'</span>]</div>
<div class="ace_line" style="height:14px">
<span class="ace_keyword">def</span>
<span class="ace_identifier">GIT_COMMIT</span>
<span class="ace_keyword ace_operator">=</span>
<span class="ace_string">''</span>
</div>
<div class="ace_line" style="height:14px">
<span class="ace_keyword">def</span>
<span class="ace_identifier">buildJobs</span>
<span class="ace_keyword ace_operator">=</span> [:]</div>
<div class="ace_line" style="height:14px">
<span class="ace_keyword">for</span> (<span class="ace_keyword">int</span>
<span class="ace_identifier">i</span>
<span class="ace_keyword ace_operator">=</span>
<span class="ace_constant ace_numeric">0</span>; <span class="ace_identifier">i</span>
<span class="ace_keyword ace_operator"><</span>
<span class="ace_identifier">allBuildServers</span>.<span class="ace_identifier">size</span>(); <span class="ace_identifier">i</span>
<span class="ace_keyword ace_operator">++</span>) {</div>
<div class="ace_line" style="height:14px">
<span class="ace_identifier">buildJobs</span>[<span class="ace_identifier">nodeName</span>] <span class="ace_keyword ace_operator">=</span> {}</div>
<div class="ace_line" style="height:14px">}</div>
<div class="ace_line" style="height:14px">
<span class="ace_keyword">try</span> {</div>
<div class="ace_line" style="height:14px">
<span class="ace_comment">// need a node to calculate the build number on</span>
</div>
<div class="ace_line" style="height:14px">
<span class="ace_identifier">node</span>(<span class="ace_string">'xxxx'</span>) {</div>
<div class="ace_line" style="height:14px">
<span class="ace_comment">/* aaaa */</span>
</div>
<div class="ace_line" style="height:14px"> [<span class="ace_string">"PATH+ANT=${ant}${pathSeparator}bin"</span>, <span class="ace_string">"ANT_HOME=${ant}"</span>]</div>
<div class="ace_line" style="height:14px"> }</div>
<div class="ace_line" style="height:14px">}</div>
<div class="ace_line" style="height:14px">
<span class="ace_keyword">catch</span> (<span class="ace_identifier">ex</span>){}</div>
</div>
<div class="ace_layer ace_marker-layer"/>
<div class="ace_layer ace_cursor-layer ace_hidden-cursors">
<div style="left: 4px; top: 42px; width: 8px; height: 14px;" class="ace_cursor"/>
</div>
</div>
</div>
<div style="width: 22px; bottom: 0px;" class="ace_scrollbar ace_scrollbar-v">
<div style="width: 22px; height: 308px;" class="ace_scrollbar-inner"/>
</div>
<div style="display: none; height: 22px; left: 49px; right: 17px;" class="ace_scrollbar ace_scrollbar-h">
<div style="height: 22px; width: 1165px;" class="ace_scrollbar-inner"/>
</div>
<div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font: inherit; overflow: hidden;">
<div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font: inherit; overflow: visible;"/>
<div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font-family: inherit; font-style: inherit; font-size: inherit; line-height: inherit; font-size-adjust: inherit; font-stretch: inherit; font-feature-settings: inherit; font-language-override: inherit; font-kerning: inherit; font-synthesis: inherit; font-variant: inherit; overflow: visible;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div>
</div>
<div style="z-index: 90;" class="ui-resizable-handle ui-resizable-s"/>
</div>
</div>
</div>
Hi,
It would be nice to easily be able to change the logo. My 2 cents...
Thx
The progressbar inside a job view is not updated during a job run, so it seems the job is running endless.
At the global view of the build processor status on the Jenkins main page the progressbar works flawless.
The following two icons appear blank:
nobuilt
icon for a new job that is currently building (which looks identical to the grey blinking icon)clock
icon for the Build Now icon for a job that is scheduled to build, but is waiting in the queue for the next executorTo reproduce:
Hi!
Just wanted to report a possible bug in version 1.2 of the theme.
Sometime between versions 1.1.12 and 1.2 the red delete buttons in the manage-roles section of the role strategy plugin which makes it possible to edit/remove roles have disappeared. See the attached screenshots.
Best regards,
//Jon
This is help request rather than an issue. Do you have some quick steps how to go about modifying the colour of the top bar (which is currently this one I guess http://www.colorhexa.com/1d9888)
Hey,
Your theme is so awesome, I liked it ๐
But i have the issue with Console input
I am using ANSI Color Plugin for colorful logs.
and the issue is that colored lines have a banner type background which hide the upper line text
here is the screenshot
http://i.imgur.com/i5gelA3.png
full console input here
http://jenkins.legacyserver.in/job/AOSP-CAF-MM_armani_%20deepak/3/console
thank you
The Top header is only rarely used. It has just the logo, search bar, username and logout link. Main functionality are all below it, and I find myself always having to scroll down to see useful stuff.
Can we please dedicate lesser area to the header bar, so that people have more visual space for more important stuff? Like bringing it down from 64px to 36px, and making the logo smaller?
There's a bug where the back button does not totally cover the customized logo. The solution for this is increase the back button canvas size.
When looking at a view of a Project that's in progress I see no icon. I do see the tooltip.
Element: <img src="/static/0027ac25/images/32x32/aborted_anime.gif" alt="In progress" tooltip="In progress" style="width: 32px; height: 32px; " class="icon-aborted-anime icon-lg" title="In progress">
After install the "Last Console" plugin, the list view will be like this:
Consider add "console icon" to list view.
[src$='terminal.gif']{padding-left: 43.2px!important;padding-top: 43.2px!important;height: 0!important;width: 0!important;background-size: 100% 100%!important;font-size: 0!important;background-image:url(data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20fill%3D%22%239E9E9E%22%20d%3D%22M20%2019V7H4v12h16m0-16a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h16m-7%2014v-2h5v2h-5m-3.42-4L5.57%209H8.4l3.3%203.3c.39.39.39%201.03%200%201.42L8.42%2017H5.59l3.99-4z%22%2F%3E%3C%2Fsvg%3E)}
Preview:
When applying this theme it breaks the pipeline(workflow) plugin editor box with its auto completion.
When we open Console page the Executed Target has dot before name.
Original jenkins page align the "Executed Targets" table to the border left so
list style is hidden.
Already fix on rackspace repository rackerlabs/canon-jenkins#21
From jenkins/job/jobName/buildTimeTrend:
<table class="sortable" style="margin-top:1em;" id="trend">
<tbody>
<tr><th>...</th></tr>
<tr>
<td data="4">
<img alt="Success" src="/static/c82d2d81/images/16x16/blue.png" height="16" width="16">
</td>
<td data="4">
<a class="model-link inside" href="4/">#4</a>
</td>
<td data="661214">11 min</td><td></td></tr>
<tr>
</tbody>
</table>
<img title="Not built" src="/static/c82d2d81/images/16x16/nobuilt.png" alt="Not built" tooltip="Not built" style="width: 16px; height: 16px; " class="icon-nobuilt icon-sm">
I see in the legend that the disabled icon is there however, when a project is disabled I don't see that icon. Mousing over the space does show 'disabled'.
Jenkins: 1.642.1
Element:
<img src="/static/0027ac25/images/32x32/disabled.png" alt="Disabled" tooltip="Disabled" style="width: 32px; height: 32px; " class="icon-disabled icon-lg" title="Disabled">
Hi,
Thanks for the beautiful theme. i just made a fresh install of jenkins then install the theme following the recommended way in the doc (Using the github page Url ). everything went smoothly, but as you can see in the image below there is a messing icon in the menu en the left for the "manage jenkins" section. Do you have any idea of how or what i might check on my side to fix this ?
My setup is :
I have recently linked jenkins-matherial-theme in our Jenkins, amazing job. But in our home page the weather icons aren't replaced. I've seen that is due to the "Dashboard View Plugin"
https://wiki.jenkins-ci.org/display/JENKINS/Dashboard+View
They have included the images without any 'class' in them.
<img src="/jenkins/static/90efd0f1/images/16x16/health-00to19.png" alt="Build stability: 4 out of the last 5 builds failed." title="Build stability: 4 out of the last 5 builds failed.">
My solution for this is using the same styles used to overwrite the color balls:
[src$='blue.png']
Like this:
[src$='health-80plus.png'] { background-image: url(data:image/svg+xml;base64,PHN... }
If you agree that this is the solution I can send my file with the modifications if it's from any help.
Regards
Maybe as a real Jenkins plugin that could be updated using the normal update center?
The problem for me is that our users can't reach fonts.googleapis.com and afonsof.github.io from where they access the Jenkins server.
Also it would be awesome if there were no animated graphics. Our clients have to be accessed using Remote Desktop and Firefox for example uses a ton of CPU to render the gif animations (It uses way less CPU for the CSS based animations) also since you use distinct shapes for yello-anime.gif and yellow.png the animations don't add anything.
First of all, thank for this awesome theme, makes Jenkins look so great.
This is only a little suggestion. It would be nice to specify, in Installation section, https
protocol in the URL, because, if the site is https
, the browser will filter the content since is mixed "active" content. And perhaps someone doesn't realise this and can get desperated trying to get the theme load (actually happened to me, but it's not the first time that I've been fighting with mixed contents and I realised quite soon)!
Thanks again for the nice theme!
Hi!
First of all I want to congratulate you for creating the best looking Jenkins theme available :)
I also wanted to ask if it would be much work for you to make the logo generator also allow the user to enter a custom color for the header and link texts?
Best regards,
//Jon
The theme is working on mainpage and some subpages of jenkins 2.0 as standalone plugin.. I guess would only take some minor adjustments for Jenknis 2 .. would be great to get this .. Theme is really awesome.
Loading regression test HTML cucumber reports which have issue with CSS(obviously trying to call things not in the provided theme). Can you exempt these report pages or somehow manage them?
Only tested on 2.0
Thanks!
The CodeMirror editor textarea which is for example used by "Execute Shell script" is using Roboto, but it should rather use a monospaced font ;)
I see this in style.less
. Is hiding it intentional? If so, then why?
#breadcrumbBar {
background-color: transparent;
visibility: hidden
}
Hi,
sorry if this is a dupe, tried to find an issue for this but couldn't find anything.
Tables have no hover effect on rows, so it's hard to see, for example, which build I'm starting (workaround for this is to wait for the tooltip)
Hello,
it seems that Gitlab Logo plugin doesn't work correctly with material design theme.
Default theme - http://i.imgur.com/U8McAu2.png
Material design theme - http://i.imgur.com/pecUE8t.png
It is hard to read dashboard when you use yellow theme, there is a yellow fond on white background.
Contrast is too low.
I really love this theme, so much nicer than the default.
So this is really nitpicking, but we have these two bars on top of the screen, the one with the Jenkins logo, and the menu bar below. In original Jenkins layout, when you scroll down, the Jenkins logo bar disappears, and the menu bar stays at the top. Here, the (quite useledd) big green Jenkins bar stays, and the (very useful) menu bar scrolls away.
Can this be reversed?
Hello,
Recently I updated the core plugins for my Jenkins installation, and every since the Credentials icon displayed in the sidebar is double the size it should be:
Not really sure if this is something you can fix or not, as the relevant HTML has conflicting attributes
<a href="/credential-store" class="task-icon-link">
<img src="/static/12efab6f/plugin/credentials/images/48x48/credentials.png"
style="width: 48px; height: 48px; width: 24px; height: 24px; margin: 2px;"
class="icon-credentials-credentials icon-xlg"
</a>
Oddly enough if the material theme is disabled, the original credentials icon appears appears at the correct 24x24 size.
I've reported this as a bug with the credentials plugin, but thought I'd also report it here too as there is a different in sizes between native and with the material theme.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.