Sneak Preview: New UNIX.COM UserCP VueJS Demo


Login or Register for Dates, Times and 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 for Dates, Times and to Reply

Previous Thread | Next Thread
Thread Tools Search this Thread
Search this Thread:
Advanced Search

6 More Discussions You Might Find Interesting

1. What is on Your Mind?

Video Overview of the Vue.js UserCP @UNIX.com

Here is my second live video screencast (in my life, using Camtasia) with voice for the new usercp: Overview of the Vue.js UserCP @UNIX.com Shout outs to Don Cragun, Corona688, Rudi, Wolf, Made in Germany, stomp, Ravinder, Creative Tim, PubNub and others in the video. Thanks. If you are... (1 Reply)
Discussion started by: Neo
1 Replies

2. What is on Your Mind?

New UserCP Update Profile Image Page (UserCP Screeching Frog 0.7485)

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 ... (0 Replies)
Discussion started by: Neo
0 Replies

3. What is on Your Mind?

Major Changes in New UserCP (v0.63) Prototype

Regarding the latest version of the UserCP prototype (version 0.63) I have made a lot of major changes, including Added a "Posts Timeline" table for the recent posts, complimenting the non-table version earlier, which has been moved off the main menu (link at the bottom of the table). Added a... (4 Replies)
Discussion started by: Neo
4 Replies

4. What is on Your Mind?

Vuejs Periodic Table by Kadin Zhang

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 (2 Replies)
Discussion started by: Neo
2 Replies

5. UNIX for Dummies Questions & Answers

Shell basic graphics demo.

I have been thinking about another shell scripting project using the Arduino Diecimila board. I was going to make a kids level slow 8 channel Logic Analyser. I thought about using the termiinal esc code graphics characters. This is the test code using said terminal escape codes. I have only... (2 Replies)
Discussion started by: wisecracker
2 Replies

6. UNIX for Dummies Questions & Answers

License with demo???

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... (2 Replies)
Discussion started by: merlin
2 Replies

Featured Tech Videos