enhanced xray pod view and add support for transparent background

README.md

@@ -454,7 +454,7 @@ You can style K9s based on your own sense of look and style. Skins are YAML file
 You can also change K9s skins based on the cluster you are connecting too. In this case, you can specify the skin file name as `$HOME/.k9s/mycluster_skin.yml`
 Below is a sample skin file, more skins are available in the skins directory in this repo, just simply copy any of these in your user's home dir as `skin.yml`.
 
-Colors can be defined by name or uing an hex representation.
+Colors can be defined by name or uing an hex representation. Of recent, we've added a color named `default` to indicate a transparent background color to preserve your terminal background color settings if so desired.
 
 > NOTE: This is very much an experimental feature at this time, more will be added/modified if this feature has legs so thread accordingly!
 
@@ -464,8 +464,8 @@ k9s:
   # General K9s styles
   body:
     fgColor: dodgerblue
-    bgColor: #ffffff
+    bgColor: '#ffffff'
-    logoColor: #0000ff
+    logoColor: '#0000ff'
   # ClusterInfoView styles.
   info:
     fgColor: lightskyblue
@@ -488,7 +488,7 @@ k9s:
       activeColor: skyblue
     # Resource status and update styles
     status:
-      newColor: #00ff00
+      newColor: '#00ff00'
       modifyColor: powderblue
       addColor: lightskyblue
       errorColor: indianred

go.mod

@@ -31,7 +31,7 @@ require (
 	fyne.io/fyne v1.2.2 // indirect
 	github.com/Nvveen/Gotty v0.0.0-20120604004816-cd527374f1e5 // indirect
 	github.com/atotto/clipboard v0.1.2
-	github.com/derailed/tview v0.3.3
+	github.com/derailed/tview v0.3.4
 	github.com/elazarl/goproxy v0.0.0-20190421051319-9d40249d3c2f // indirect
 	github.com/elazarl/goproxy/ext v0.0.0-20190421051319-9d40249d3c2f // indirect
 	github.com/fatih/color v1.6.0

go.sum

@@ -147,6 +147,8 @@ github.com/deislabs/oras v0.7.0 h1:RnDoFd3tQYODMiUqxgQ8JxlrlWL0/VMKIKRD01MmNYk=
 github.com/deislabs/oras v0.7.0/go.mod h1:sqMKPG3tMyIX9xwXUBRLhZ24o+uT4y6jgBD2RzUTKDM=
 github.com/derailed/tview v0.3.3 h1:tipPwxcDhx0zRBZuc8VKIrNgWL40FL5JeF/30XVieUE=
 github.com/derailed/tview v0.3.3/go.mod h1:yApPszFU62FoaGkf7swy2nIdV/h7Nid3dhMSVy6+OFI=
+github.com/derailed/tview v0.3.4 h1:PnF64fLqm48LEjC/XwOS7JufDgFuuPYx85YVt5t3rwE=
+github.com/derailed/tview v0.3.4/go.mod h1:yApPszFU62FoaGkf7swy2nIdV/h7Nid3dhMSVy6+OFI=
 github.com/dgrijalva/jwt-go v3.2.0+incompatible h1:7qlOGliEKZXTDg6OTjfoBKDXWrumCAMpl/TFQ4/5kLM=
 github.com/dgrijalva/jwt-go v3.2.0+incompatible/go.mod h1:E3ru+11k8xSBh+hMPgOLZmtrrCbhqsmaPHjLKYnJCaQ=
 github.com/dnaeon/go-vcr v1.0.1/go.mod h1:aBB1+wY4s93YsC3HHjMBMrwTj2R9FHDzUr9KyGc8n1E=

internal/config/styles.go

@@ -292,6 +292,11 @@ func NewStyles() *Styles {
 	}
 }
 
+// LoadDefaults loads the default skin
+func (s *Styles) DefaultSkins() {
+	s.K9s = newStyle()
+}
+
 // FgColor returns the foreground color.
 func (s *Styles) FgColor() tcell.Color {
 	return AsColor(s.Body().FgColor)
@@ -385,6 +390,7 @@ func (s *Styles) Update() {
 	tview.Styles.PrimaryTextColor = s.FgColor()
 	tview.Styles.BorderColor = AsColor(s.K9s.Frame.Border.FgColor)
 	tview.Styles.FocusColor = AsColor(s.K9s.Frame.Border.FocusColor)
+	s.fireStylesChanged()
 }
 
 // AsColor checks color index, if match return color otherwise pink it is.

internal/render/helpers.go

@@ -151,7 +151,7 @@ func Truncate(str string, width int) string {
 
 func mapToStr(m map[string]string) (s string) {
 	if len(m) == 0 {
-		return MissingValue
+		return ""
 	}
 
 	kk := make([]string, 0, len(m))

internal/render/helpers_test.go

@@ -305,7 +305,7 @@ func TestMapToStr(t *testing.T) {
 		e string
 	}{
 		{map[string]string{"blee": "duh", "aa": "bb"}, "aa=bb,blee=duh"},
-		{map[string]string{}, MissingValue},
+		{map[string]string{}, ""},
 	}
 	for _, u := range uu {
 		assert.Equal(t, u.e, mapToStr(u.i))

internal/ui/config.go

@@ -103,6 +103,9 @@ func (c *Configurator) RefreshStyles(context string) {
 
 func (c *Configurator) updateStyles(f string) {
 	c.skinFile = f
+	if !c.HasSkins() {
+		c.Styles.DefaultSkins()
+	}
 	c.Styles.Update()
 
 	render.StdColor = config.AsColor(c.Styles.Frame().Status.NewColor)

internal/ui/menu.go

@@ -15,7 +15,7 @@ import (
 )
 
 const (
-	menuIndexFmt = " [key:bg:b]<%d> [fg:bg:d]%s "
+	menuIndexFmt = " [key:-:b]<%d> [fg:-:d]%s "
 	maxRows      = 7
 )
 
@@ -195,7 +195,7 @@ func formatNSMenu(i int, name string, styles config.Frame) string {
 }
 
 func formatPlainMenu(h model.MenuHint, size int, styles config.Frame) string {
-	menuFmt := " [key:bg:b]%-" + strconv.Itoa(size+2) + "s [fg:bg:d]%s "
+	menuFmt := " [key:-:b]%-" + strconv.Itoa(size+2) + "s [fg:-:d]%s "
 	fmat := strings.Replace(menuFmt, "[key", "["+styles.Menu.KeyColor, 1)
 	fmat = strings.Replace(fmat, "[fg", "["+styles.Menu.FgColor, 1)
 	fmat = strings.Replace(fmat, ":bg:", ":"+styles.Title.BgColor+":", -1)

internal/ui/menu_test.go

@@ -18,9 +18,9 @@ func TestNewMenu(t *testing.T) {
 		{Mnemonic: "0", Description: "zero", Visible: true},
 	})
 
-	assert.Equal(t, " [fuchsia:black:b]<0> [white:black:d]zero ", v.GetCell(0, 0).Text)
+	assert.Equal(t, " [fuchsia:-:b]<0> [white:-:d]zero ", v.GetCell(0, 0).Text)
-	assert.Equal(t, " [dodgerblue:black:b]<a> [white:black:d]bleeA ", v.GetCell(0, 1).Text)
+	assert.Equal(t, " [dodgerblue:-:b]<a> [white:-:d]bleeA ", v.GetCell(0, 1).Text)
-	assert.Equal(t, " [dodgerblue:black:b]<b> [white:black:d]bleeB ", v.GetCell(1, 1).Text)
+	assert.Equal(t, " [dodgerblue:-:b]<b> [white:-:d]bleeB ", v.GetCell(1, 1).Text)
 }
 
 func TestActionHints(t *testing.T) {

internal/ui/splash.go

@@ -6,7 +6,6 @@ import (
 
 	"github.com/derailed/k9s/internal/config"
 	"github.com/derailed/tview"
-	"github.com/gdamore/tcell"
 )
 
 // LogoSmall K9s small log.
@@ -37,16 +36,15 @@ type Splash struct {
 // NewSplash instantiates a new splash screen with product and company info.
 func NewSplash(styles *config.Styles, version string) *Splash {
 	s := Splash{Flex: tview.NewFlex()}
+	s.SetBackgroundColor(styles.BgColor())
 
 	logo := tview.NewTextView()
 	logo.SetDynamicColors(true)
-	logo.SetBackgroundColor(tcell.ColorDefault)
 	logo.SetTextAlign(tview.AlignCenter)
 	s.layoutLogo(logo, styles)
 
 	vers := tview.NewTextView()
 	vers.SetDynamicColors(true)
-	vers.SetBackgroundColor(tcell.ColorDefault)
 	vers.SetTextAlign(tview.AlignCenter)
 	s.layoutRev(vers, version, styles)
 

internal/ui/table_helper.go

@@ -14,6 +14,9 @@ import (
 )
 
 const (
+	// DefaultColorName indicator to keep term colors.
+	DefaultColorName = "default"
+
 	// SearchFmt represents a filter view title.
 	SearchFmt = "<[filter:bg:r]/%s[fg:bg:-]> "
 
@@ -81,12 +84,16 @@ func TrimLabelSelector(s string) string {
 
 // SkinTitle decorates a title.
 func SkinTitle(fmat string, style config.Frame) string {
-	fmat = strings.Replace(fmat, "[fg:bg", "["+style.Title.FgColor+":"+style.Title.BgColor, -1)
+	bgColor := style.Title.BgColor
+	if bgColor == "default" {
+		bgColor = "-"
+	}
+	fmat = strings.Replace(fmat, "[fg:bg", "["+style.Title.FgColor+":"+bgColor, -1)
 	fmat = strings.Replace(fmat, "[hilite", "["+style.Title.HighlightColor, 1)
 	fmat = strings.Replace(fmat, "[key", "["+style.Menu.NumKeyColor, 1)
 	fmat = strings.Replace(fmat, "[filter", "["+style.Title.FilterColor, 1)
 	fmat = strings.Replace(fmat, "[count", "["+style.Title.CounterColor, 1)
-	fmat = strings.Replace(fmat, ":bg:", ":"+style.Title.BgColor+":", -1)
+	fmat = strings.Replace(fmat, ":bg:", ":"+bgColor+":", -1)
 
 	return fmat
 }

internal/view/app.go

@@ -267,11 +267,11 @@ func (a *App) switchCtx(name string, loadPods bool) error {
 			log.Error().Err(err).Msg("Config save failed!")
 		}
 		a.Flash().Infof("Switching context to %s", name)
+		a.ReloadStyles(name)
 		if err := a.gotoResource("pods", true); loadPods && err != nil {
 			a.Flash().Err(err)
 		}
 		a.clusterModel.Reset(a.factory)
-		a.ReloadStyles(name)
 	}
 
 	return nil

internal/view/cluster_info.go

@@ -32,6 +32,7 @@ func NewClusterInfo(app *App) *ClusterInfo {
 func (c *ClusterInfo) Init() {
 	c.app.Styles.AddListener(c)
 	c.layout()
+	c.StylesChanged(c.app.Styles)
 }
 
 // StylesChanged notifies skin changed.
@@ -51,9 +52,14 @@ func (c *ClusterInfo) layout() {
 func (c *ClusterInfo) sectionCell(t string) *tview.TableCell {
 	cell := tview.NewTableCell(t + ":")
 	cell.SetAlign(tview.AlignLeft)
-	var s tcell.Style
+	// var style tcell.Style
-	cell.SetStyle(s.Bold(true).Foreground(config.AsColor(c.styles.K9s.Info.SectionColor)))
+	// style.Bold(true).
-	cell.SetBackgroundColor(c.app.Styles.BgColor())
+	// 	Background(tcell.ColorGreen).
+	// 	Foreground(config.AsColor(c.styles.K9s.Info.SectionColor))
+	// cell.SetStyle(style)
+	// cell.SetBackgroundColor(c.app.Styles.BgColor())
+	// cell.SetBackgroundColor(tcell.ColorDefault)
+	cell.SetBackgroundColor(tcell.ColorGreen)
 
 	return cell
 }

skins/black_and_wtf.yml

@@ -1,56 +1,70 @@
+# Styles...
+fg: &fg "white"
+bg: &bg "black"
+mark: &mark "darkgoldenrod"
+active: &active "dimgray"
+text: &text "navajowhite"
+white: &white "whitesmoke"
+ghost: &ghost "ghostwhite"
+dslate: &dslate "darkslategray"
+err: &err "pink"
+slate: &slate "slategray"
+gray: &gray "gray"
+
+# Skin
 k9s:
   body:
-    fgColor: white
+    fgColor: *fg
-    bgColor: black
+    bgColor: *bg
-    logoColor: white
+    logoColor: *fg
   info:
-    fgColor: navajowhite
+    fgColor: *text
-    sectionColor: white
+    sectionColor: *fg
   frame:
     border:
-      fgColor: white
+      fgColor: *fg
-      focusColor: white
+      focusColor: *fg
     menu:
-      fgColor: white
+      fgColor: *fg
-      keyColor: white
+      keyColor: *fg
-      numKeyColor: navajowhite
+      numKeyColor: *text
     crumbs:
-      fgColor: black
+      fgColor: *fg
-      bgColor: navajowhite
+      bgColor: *bg
-      activeColor: whitesmoke
+      activeColor: *active
     status:
-      newColor: ghostwhite
+      newColor: *white
-      modifyColor: navajowhite
+      modifyColor: *text
-      addColor: darkslategray
+      addColor: *ghost
-      errorColor: whitesmoke
+      errorColor: *err
-      highlightcolor: dimgray
+      highlightcolor: *dslate
-      killColor: slategray
+      killColor: *slate
-      completedColor: gray
+      completedColor: *gray
     title:
-      fgColor: ghostwhite
+      fgColor: *fg
-      highlightColor: navajowhite
+      highlightColor: *active
-      counterColor: navajowhite
+      counterColor: *text
-      filterColor: slategray
+      filterColor: *slate
   table:
-    fgColor: white
+    fgColor: *fg
-    bgColor: black
+    bgColor: *bg
-    cursorColor: white
+    cursorColor: *fg
-    markColor: darkgoldenrod
+    markColor: *mark
     header:
-      fgColor: darkgray
+      fgColor: *dslate
-      bgColor: black
+      bgColor: *bg
-      sorterColor: white
+      sorterColor: *fg
   xray:
-    fgColor: white
+    fgColor: *fg
-    bgColor: black
+    bgColor: *bg
-    cursorColor: whitesmoke
+    cursorColor: *ghost
     graphicColor: gray
     showIcons: false
   views:
     yaml:
-      keyColor: ghostwhite
+      keyColor: *ghost
-      colorColor: slategray
+      colorColor: *slate
-      valueColor: navajowhite
+      valueColor: *text
     logs:
-      fgColor: ghostwhite
+      fgColor: *ghost
-      bgColor: black
+      bgColor: *bg

skins/dracula.yml

@@ -1,3 +1,4 @@
+# Styles...
 foreground: &foreground "#f8f8f2"
 background: &background "#282a36"
 current_line: &current_line "#44475a"
@@ -10,6 +11,8 @@ pink: &pink "#ff79c6"
 purple: &purple "#bd93f9"
 red: &red "#ff5555"
 yellow: &yellow "#f1fa8c"
+
+# Skin...
 k9s:
   # General K9s styles
   body:

skins/in_the_navy.yml

@@ -1,58 +1,78 @@
+# Styles...
+
+fg: &fg "dodgerblue"
+bg: &bg "white"
+blue: &blue "blue"
+sky: &sky "lightskyblue"
+steel: &steel "steelblue"
+dark: &dark "darkblue"
+alice: &alice "aliceblue"
+corn: &corn "cornflowerblue"
+err: &err "indianred"
+royal: &royal "royalblue"
+slate: &slate "slategray"
+gray: &gray "gray"
+cadet: &cadet "cadetblue"
+powder: &powder "powderblue"
+aqua: &aqua "aqua"
+mslate: &mslate "mediumslateblue"
+
+# Skin...
 k9s:
   body:
-    fgColor: dodgerblue
+    fgColor: *fg
-    bgColor: white
+    bgColor: *bg
-    logoColor: blue
+    logoColor: *blue
   info:
-    fgColor: lightskyblue
+    fgColor: *sky
-    sectionColor: steelblue
+    sectionColor: *steel
   frame:
     border:
-      fgColor: dodgerblue
+      fgColor: *fg
-      bgColor: darkblue
+      bgColor: *dark
-      focusColor: aliceblue
+      focusColor: *alice
     menu:
-      fgColor: darkblue
+      fgColor: *dark
-      keyColor: cornflowerblue
+      keyColor: *corn
-      numKeyColor: cadetblue
+      numKeyColor: *cadet
     crumbs:
-      fgColor: white
+      fgColor: *bg
-      bgColor: steelblue
+      bgColor: *steel
-      activeColor: skyblue
+      activeColor: *sky
     status:
-      newColor: blue
+      newColor: *blue
-      modifyColor: powderblue
+      modifyColor: *powder
-      addColor: lightskyblue
+      addColor: *sky
-      errorColor: indianred
+      errorColor: *err
-      highlightcolor: royalblue
+      highlightcolor: *royal
-      killColor: slategray
+      killColor: *slate
-      completedColor: gray
+      completedColor: *gray
     title:
-      fgColor: aqua
+      fgColor: *cadet
-      bgColor: darkblue
+      bgColor: *bg
-      highlightColor: skyblue
+      highlightColor: *sky
-      counterColor: slateblue
+      counterColor: *slate
-      filterColor: slategray
+      filterColor: *slate
   table:
-    fgColor: blue
+    fgColor: *fg
-    bgColor: darkblue
+    bgColor: *bg
-    cursorColor: aqua
+    cursorColor: *aqua
-    markColor: mediumslateblue
+    markColor: *mslate
     header:
-      fgColor: white
+      fgColor: *fg
-      bgColor: darkblue
+      bgColor: *bg
-      sorterColor: orange
+      sorterColor: *cadet
   xray:
-    fgColor: blue
+    fgColor: *blue
-    bgColor: darkblue
+    bgColor: *dark
-    cursorColor: aqua
+    cursorColor: *aqua
-    graphicColor: mediumslateblue
+    graphicColor: *mslate
     showIcons: false
   views:
     yaml:
-      keyColor: steelblue
+      keyColor: *steel
-      colorColor: blue
+      colorColor: *blue
-      valueColor: royalblue
+      valueColor: *royal
     logs:
-      fgColor: white
+      fgColor: *dark
-      bgColor: darkblue
+      bgColor: *bg