Web Development

View Public Profile for vbe

02-13-2019

Moderator

6,876, 694

Join Date: Sep 2005

Last Activity: 10 February 2021, 3:50 AM EST

Location: Switzerland - GE

Posts: 6,876

Thanks Given: 594

Thanked 694 Times in 627 Posts

Quite nice - the visual side of it... Looks cool...

vbe

Find all posts by vbe

02-13-2019

Registered User

489, 285

Join Date: Nov 2018

Last Activity: 30 October 2021, 10:47 AM EDT

Location: undefined

Posts: 489

Thanks Given: 382

Thanked 285 Times in 215 Posts

Hello
Everything is great, only the theme I would change.
I would prefer the controls and the background to be of the same neutral color. For example. The background color of the menu is highlighted unnecessarily. How also buttons and so on. It distracts from the essence. In general, would prefer a smaller color play.
This is just my personal opinion, sorry and thanks.

This User Gave Thanks to nezabudka For This Post:

nezabudka

View Public Profile for nezabudka

Find all posts by nezabudka

02-13-2019

Administrator

19,118, 3,359

Join Date: Sep 2000

Last Activity: 15 July 2022, 8:51 AM EDT

Location: Asia Pacific, Cyberspace, in the Dark Dystopia

Posts: 19,118

Thanks Given: 2,351

Thanked 3,359 Times in 1,878 Posts

Current working on a switch to toggle light and dark mode, but it's not working yet so I cannot demo.

There is a lot of work to do; so I would not be worried about "colors" very much at this point in time, if I were you

That is the easy part, LOL

This User Gave Thanks to Neo For This Post:

Neo

02-14-2019

Administrator

19,118, 3,359

Join Date: Sep 2000

Last Activity: 15 July 2022, 8:51 AM EDT

Location: Asia Pacific, Cyberspace, in the Dark Dystopia

Posts: 19,118

Thanks Given: 2,351

Thanked 3,359 Times in 1,878 Posts

OK... I have the Dark / Light mode working in the prototype, thanks to the developer of the Vue.js template I am using to get started; and will upload a new "Sneak Peek" sooner than later and let everyone know.

Neo

02-14-2019

Administrator

19,118, 3,359

Join Date: Sep 2000

Last Activity: 15 July 2022, 8:51 AM EDT

Location: Asia Pacific, Cyberspace, in the Dark Dystopia

Posts: 19,118

Thanks Given: 2,351

Thanked 3,359 Times in 1,878 Posts

Mock-Update:

Here are a few pics and a link to Vue Black Dashboard (UserCP) Mockup Prototype V0.02 with the switch for dark and light mode, etc:

Code:

https://www.unix.com/cp/index.php

You might need to completely quit your browser app and restart it to get the new version to load (due to some caching issue):

This User Gave Thanks to Neo For This Post:

Neo

02-14-2019

Administrator

19,118, 3,359

Join Date: Sep 2000

Last Activity: 15 July 2022, 8:51 AM EDT

Location: Asia Pacific, Cyberspace, in the Dark Dystopia

Posts: 19,118

Thanks Given: 2,351

Thanked 3,359 Times in 1,878 Posts

Update: Version Mockup 0.03

Vue Black Dashboard Mockup v0.03

Code:

https://www.unix.com/cp/index.php

Removed world map (for now) because of "responsive issues" on mobile.
Added localStorage() to save "dark / light" mode switch and "sidebar background color selection".
Changed link to /cp/index.com temporarily due to some strange PHP issue.

Code (new SidebarSharePlugin.vue code in red):

Code:

<script>
import { BaseSwitch } from "src/components";

export default {
  name: "sidebar-share",
  components: {
    BaseSwitch
  },
  props: {
    backgroundColor: String
  },
  data() {
    return {
      sidebarMini: true,
      darkMode: true,
      isOpen: false,
      sidebarColors: [
        { color: "primary", active: false, value: "primary" },
        { color: "vue", active: true, value: "vue" },
        { color: "info", active: false, value: "blue" },
        { color: "success", active: false, value: "green" },
        { color: "warning", active: false, value: "orange" },
        { color: "danger", active: false, value: "red" }
      ]
    };
  },
  methods: {
    toggleDropDown() {
      this.isOpen = !this.isOpen;
    },
    closeDropDown() {
      this.isOpen = false;
    },
    toggleList(list, itemToActivate) {
      list.forEach(listItem => {
        listItem.active = false;
      });
      itemToActivate.active = true;
    },
    changeSidebarBackground(item) {
      this.$emit("update:backgroundColor", item.value);
      this.toggleList(this.sidebarColors, item);
      localStorage.setItem("sidebarbg", item.value);
    },
    toggleMode(type) {
      let docClasses = document.body.classList;
      if (type) {
        docClasses.remove("white-content");
        localStorage.setItem("mode", "dark-content");
      } else {
        docClasses.add("white-content");
        localStorage.setItem("mode", "white-content");
      }
    },
    minimizeSidebar() {
      this.$sidebar.toggleMinimize();
    }
  },
  mounted() {
    let modeSwitch = document.getElementById("dark-mode");
    if (localStorage.getItem("mode")) {
      if (localStorage.getItem("mode") == "white-content") {
        document.body.classList.add("white-content");
        modeSwitch.classList.add("bootstrap-switch-off");
      } else if (localStorage.getItem("mode") == "dark-content") {
        document.body.classList.remove("white-content");
        modeSwitch.classList.add("bootstrap-switch-on");
      }
    }
    let sidebarBg = document.getElementById("sidebar-bg");
    if (localStorage.getItem("sidebarbg")) {
      this.$emit("update:backgroundColor", localStorage.getItem("sidebarbg"));
    }
  }
};
</script>

These 2 Users Gave Thanks to Neo For This Post:

Neo