Sneak Preview: New UNIX.COM UserCP VueJS Demo


Login or Register to Reply

 
Thread Tools Search this Thread
# 1  
Sneak Preview: New UNIX.COM UserCP VueJS Demo

Hey,

Now that I'm caught-up on a number of forum tasks, I can turn my attention to the next-generation UserCP (and learn VueJS) for the site.

Today I created this (not yet functional) demo using Vue;

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

What do you think?
These 6 Users Gave Thanks to Neo For This Post:
# 2  
Quite nice - the visual side of it... Looks cool...
# 3  
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:
# 4  
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 Smilie

That is the easy part, LOL

Image
This User Gave Thanks to Neo For This Post:
# 5  
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.
# 6  
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):

Image

Image

Image

Image
This User Gave Thanks to Neo For This Post:
# 7  
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:
Login or Register to Reply

|
Thread Tools Search this Thread
Search this Thread:
Advanced Search

More UNIX and Linux Forum Topics You Might Find Helpful
New UserCP Update Profile Image Page (UserCP Screeching Frog 0.7485)
Neo
Update! UserCP Screeching Frog 0.7485 Created a new page for uploaded a profile picture (profile pictures are different than avatar pictures). https://www.unix.com/usercp/#/settings/other https://www.unix.com/members/1-albums225-picture1158.png ...... What is on Your Mind?
0
What is on Your Mind?
Vuejs Periodic Table by Kadin Zhang
Neo
Was working on Vue.js and stumbled upon this beautiful Vue project by Kadin Zhang Periodicity is a dynamic periodic table built with Vue.js that animates and graphs data to aid the visualization of chemical concepts. The code is available on GitHub... What is on Your Mind?
2
What is on Your Mind?
License with demo???
merlin
I'm trying to setup a test environment to test upgrading to Solaris 8 or 9. Though when I go to install the demo version of Sun1 (forte/sun workshop as named before) it'll still ask for a 20 hexidecminal password for just a demo. huh? Ok so I added a 20 character thing in there it passed...... UNIX for Dummies Questions & Answers
2
UNIX for Dummies Questions & Answers