The future of Plone's Theme Editor
CC Attribution 3.0 Germany:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Bailey, Oshane
During summer 2017, I worked on improving the Plone Theme Editor through Google Summer of Code (GSoC). I will show the new features of and improvements in the Plone theme editor and will discuss its future. Part of the future vision is to showcase the newly implemented Rapido store where Rapido apps can be imported and installed from another theme and/or a remote repository of Rapido apps. I will also briefly share my experience with GSoC and the Plone Foundation during summer 2017.
 Good afternoon everyone. I'm Oshin Dei as you probably already know. I'm from Jamaica, Seymour David. I work with David for a couple years now. I think it's two, yeah, around two to three years. So I've been a prone advocate somewhat for the last two and a half years. So I did Google some of code this year and it was great. I got good feedback from the commentary on my mentor, David, which is my employer. And Ask-A-SoCart, they did a wonderful job of getting into the program. Well, get started and get into the program. All right, so let's go. Before we look at the prone editor, what I wanted to do, prone team editor, what I wanted to do, look back at what it was, what it is now. Well, it's not merged into the core of prone as yet, but it will be soon. And what it will be in the future. All right, as I said before, the first time I used prone was probably two to three years ago. When I first started, it wasn't so great. In fact, David basically instruct me to just create a team package and just use that to do teaming. While we continue with prone project, the more and more prone update itself due to its commentary, it became better. And like recently, I asked about it with the guys at the apartment, which include Peter, Mike, and John, and they're like, oh, you started at the right time. Before that, they actually uploaded the team in the ZMI portal skins. So I'm like, oh, I had this confused look on my face. You guys were doing the technical stuff. I got the easy part, where prone team editor are a package. Okay, so this is what it looked like in 2010. It was basic features as creating new files, folders, and the other teams were first introduced around this time. Between 2010 to 2015, a lot of changes has been made. More bootstrap stuff has been added. Rest CSS has been added, where we can just build it directly from the team editor and so forth has been added. So we started to actually use the team prone team editor sometime in 2016 to 2017. Even David, I realized that he started to switch from using C9 to actually using the prone team editor, mainly for rapido apps because that's the end thing right now, apart from mosaic and fragments. Alright, so we made a lot of improvements during Google Summab code. We asked the community about what's the best thing we should put inside of the prone team editor. They gave us a lot of feedback. Some of which is a search mechanism where you can search for files by name or text within files. Another feature we added was drag and drop because before you could not drag and drop files into the team editor, nor you could drag around files inside of the file tree. So it didn't give us a lot of flexibility to make changes in the team file system or folder. Another feature we built out is Rapido Store. Currently, it only supports cross teams whereby you can just import a rapido app from a team that you already installed inside the current one that is active. The future of it is basically to have an external rapido store like a market. We saw all the work, even PHP WordPress of a market store, so why not? You notice I mentioned we. The reason why I mentioned we instead of I, I didn't know most of the coding, but my mentors and I, it was, well, it's not mentors and I, I should say, my mentors, I and the community. All of us work together on this. Feedbacks were given and so forth, so we got a lot done and improved the team editor. All right. You can go to gsoft.osuba.com. The password is provided with the username to do the demo. A special permission is set up to take you right into the, the pro and team editor. So go. I'm going to use my local install version. I restarted my machine. Yeah, so about that. Oh, and. Oh. Oh, so about that. I went to new instance. All right. So some of the stuff that wasn't in the previous version that we added was like a new layout where the menus are grouped together now because previously the menus weren't. We're properly railed and railed and there was certain, you notice like based on the screen resolution, it then basically pushed down and some of the buttons overflowed on top of the buttons on the left side of the screen. So we made a bit of real change to the team editor and we also improved basically the look and feel of it as well as included shortcut keys for certain functionalities that the pro and team editor has now. Oh, this is taken. Now I'm willing to virtual box and I'm up on port 8080 to port 80. Oh, it's not finished as it. I. This is moving quite so. I'm going to see sent to update that I think I'm the only windows person at the conference. I haven't seen a Windows machine. So. It's gone. It's gone. Wow. Final it's up. Oh, this, this is was a training. I went to the, the team in training that I did this on. Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oops. Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Interesting. Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, Oh, There was a restart, apart from the restart that I did, and the instance probably went down. It is going down. First of all, thank you for your work. That's amazing. It's very difficult to run a live demo. So, you have it? It's all right. The instance went down and did some ocean. Didn't get a notification about it. So, yeah. This is what I actually was. So, on the homepage, it gives you everything and basically the username and password right here. Setup. Well, in the nickel time. 10 acts of 5 warnings. Okay. Yes. Yeah. The password and password and the username is basically scroll down on the homepage and you see it as credential. All right. So, this is basically it. So, I group together new files. You have new file uproar right here. The edit and do it is in this. So, you have fine file and a fine file in folder. If you notice, there is shortcut keys. So, if you press control F, oh, came off the screen. So, let me just do it from here. Say, before. Oh, that's the first one. So, before search, what it does, it does a JavaScript query and pin point all of the files inside of the team. Then, when I rejects expression, well, I don't know if I should talk this technical. But when I rejects expression to get the right number and it run a counter. So, if you click on the right number, it takes you basically to the file and to the exact line. Why clicking on any file will show you the different option. You can upload directly here. If it's a folder, it will upload. If it's a file, it will not upload. So, if you can upload something directly in the CSS. Okay, just going to upload something random. I'll just upload. Refresh the tree. Where is that file? Okay, it's going to be a good one to find that file. You can drag and drop files now. If you notice, one of the things that when you drag and drop, it actually refresh the file tree. So, this probably might mess up the team. But drag and drop is there. You can drag and drop outside as well. Okay, Oshane, we have to stop here because the next talk will start soon. If you have any questions, please ask after the talk. Thank you very much. Thank you.
 Good afternoon everyone.  I'm Oshin Dei as you probably already know.  I'm from Jamaica, Seymour David. I work with David for a couple years now.  I think it's two, yeah, around two to three years.  So I've been a prone advocate somewhat for the last two and a half years.  So I did Google some of code this year and it was great.  I got good feedback from the commentary on my mentor, David, which is my employer.  And Ask-A-SoCart, they did a wonderful job of getting into the program.  Well, get started and get into the program.  All right, so let's go.  Before we look at the prone editor, what I wanted to do, prone team editor,  what I wanted to do, look back at what it was, what it is now.  Well, it's not merged into the core of prone as yet, but it will be soon.  And what it will be in the future.  All right, as I said before, the first time I used prone was probably two to three years ago.  When I first started, it wasn't so great.  In fact, David basically instruct me to just create a team package and just use that to do teaming.  While we continue with prone project, the more and more prone update itself due to its commentary, it became better.  And like recently, I asked about it with the guys at the apartment,  which include Peter, Mike, and John, and they're like, oh, you started at the right time.  Before that, they actually uploaded the team in the ZMI portal skins.  So I'm like, oh, I had this confused look on my face.  You guys were doing the technical stuff.  I got the easy part, where prone team editor are a package.  Okay, so this is what it looked like in 2010.  It was basic features as creating new files, folders, and the other teams were first introduced around this time.  Between 2010 to 2015, a lot of changes has been made.  More bootstrap stuff has been added.  Rest CSS has been added, where we can just build it directly from the team editor and so forth has been added.  So we started to actually use the team prone team editor sometime in 2016 to 2017.  Even David, I realized that he started to switch from using C9 to actually using the prone team editor,  mainly for rapido apps because that's the end thing right now, apart from mosaic and fragments.  Alright, so we made a lot of improvements during Google Summab code.  We asked the community about what's the best thing we should put inside of the prone team editor.  They gave us a lot of feedback.  Some of which is a search mechanism where you can search for files by name or text within files.  Another feature we added was drag and drop because before you could not drag and drop files into the team editor,  nor you could drag around files inside of the file tree.  So it didn't give us a lot of flexibility to make changes in the team file system or folder.  Another feature we built out is Rapido Store.  Currently, it only supports cross teams whereby you can just import a rapido app from a team that you already installed inside the current one that is active.  The future of it is basically to have an external rapido store like a market.  We saw all the work, even PHP WordPress of a market store, so why not?  You notice I mentioned we.  The reason why I mentioned we instead of I, I didn't know most of the coding, but my mentors and I, it was, well, it's not mentors and I, I should say, my mentors, I and the community.  All of us work together on this.  Feedbacks were given and so forth, so we got a lot done and improved the team editor.  All right.  You can go to gsoft.osuba.com.  The password is provided with the username to do the demo.  A special permission is set up to take you right into the, the pro and team editor.  So go.  I'm going to use my local install version.  I restarted my machine.  Yeah, so about that.  Oh, and.  Oh.  Oh, so about that.  I went to new instance.  All right.  So some of the stuff that wasn't in the previous version that we added was like a new layout where the menus are grouped together now because previously the menus weren't.  We're properly railed and railed and there was certain, you notice like based on the screen resolution, it then basically pushed down and some of the buttons overflowed on top of the buttons on the left side of the screen.  So we made a bit of real change to the team editor and we also improved basically the look and feel of it as well as included shortcut keys for certain functionalities that the pro and team editor has now.  Oh, this is taken.  Now I'm willing to virtual box and I'm up on port 8080 to port 80.  Oh, it's not finished as it.  I.  This is moving quite so.  I'm going to see sent to update that I think I'm the only windows person at the conference.  I haven't seen a Windows machine.  So.  It's gone.  It's gone.  Wow.  Final it's up.  Oh, this, this is was a training.  I went to the, the team in training that I did this on.  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oops.  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Interesting.  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  Oh,  There was a restart, apart from the restart that I did, and the instance probably went down.  It is going down.  First of all, thank you for your work. That's amazing. It's very difficult to run a live demo.  So, you have it?  It's all right.  The instance went down and did some ocean. Didn't get a notification about it.  So, yeah. This is what I actually was.  So, on the homepage, it gives you everything and basically the username and password right here.  Setup.  Well, in the nickel time.  10 acts of 5 warnings. Okay.  Yes.  Yeah. The password and password and the username is basically scroll down on the homepage and you see it as credential.  All right.  So, this is basically it. So, I group together new files. You have new file uproar right here.  The edit and do it is in this. So, you have fine file and a fine file in folder.  If you notice, there is shortcut keys. So, if you press control F, oh, came off the screen.  So, let me just do it from here.  Say, before.  Oh, that's the first one.  So, before search, what it does, it does a JavaScript query and pin point all of the files inside of the team.  Then, when I rejects expression, well, I don't know if I should talk this technical.  But when I rejects expression to get the right number and it run a counter.  So, if you click on the right number, it takes you basically to the file and to the exact line.  Why clicking on any file will show you the different option.  You can upload directly here.  If it's a folder, it will upload. If it's a file, it will not upload.  So, if you can upload something directly in the CSS.  Okay, just going to upload something random.  I'll just upload.  Refresh the tree.  Where is that file?  Okay, it's going to be a good one to find that file.  You can drag and drop files now.  If you notice, one of the things that when you drag and drop, it actually refresh the file tree.  So, this probably might mess up the team.  But drag and drop is there.  You can drag and drop outside as well.  Okay, Oshane, we have to stop here because the next talk will start soon.  If you have any questions, please ask after the talk.  Thank you very much.  Thank you.
Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_0_323.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_324_443.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_444_6035.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_6036_6383.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_6384_6899.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_6900_9491.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_9492_10091.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_10092_11351.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_11352_12371.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_12372_16175.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_16176_20747.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_20748_20939.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_20940_21743.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_21744_21791.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_21792_23207.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_23208_25847.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_25848_26783.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_26784_27347.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_27348_30971.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_30972_33707.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_33708_36887.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_36888_37487.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_37488_38003.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_38004_40463.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_40464_42167.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_42168_42587.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_42588_45995.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_45996_46643.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_46644_46787.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_46788_46979.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_46980_47051.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_47052_47375.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_47376_47447.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_47448_48071.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_48072_48455.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_48456_48767.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_48768_48887.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_48888_49283.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_49284_49487.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_49488_50195.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_50196_50315.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_50316_53999.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_54000_56147.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_56148_58775.png Day_3__Oshane_Bailey_-_The_future_of_Plone_s_Theme__moFZwGdnu4_58776_58894.png